Getting Error: No valid WebSocket class provided

Open Q&A
1

I am trying to implement Courier with NextJS. Until this point, the code of my _app.js looks like this,

import '../styles/globals.css';
import { CourierProvider } from '@trycourier/react-provider';
import { Toast } from '@trycourier/react-toast';

import { uuid } from 'uuidv4';

function MyApp({ Component, pageProps }) {
  const USER_ID =
    localStorage.getItem('userId') || localStorage.setItem('userId', uuid());

  return (
    <CourierProvider
      clientKey={process.env.COURIER_CLIENT_KEY}
      userId={`${USER_ID} + ''`}
    >
      <Toast />
      <Component {...pageProps} />
    </CourierProvider>
  );
}

export default MyApp;

I am getting this error when I load the page Uncaught Error: No valid WebSocket class provided. I am also attaching a screenshot of the error.
What am I doing wrong here? Also, do you have any resources for setting up Courier for NextJS or React?

image
image1919×988 125 KB

2

Hey there @subhachanda176 :wave:

From the looks of your code, you have Toast and another Component as children of CourierProvider. Is the Inbox component being passed down in “Component” with that spread syntax? Inbox along with Toast need to be nested inside CourierProvider to work.

Also, if you don’t mind me asking, could you explain your string interpolation for the userId config? Not too sure, but it could be causing an error.

You can find our React integration guide here.

Thanks!

3

Hey @rodrigo Thank you for your reply. I haven’t used the Inbox component yet. I was just trying to integrate toast into the application.

The string interpolation was just a try to resolve the issue. But I believe the clientKey prop is causing the issue, as the page renders when I remove the prop.

Any idea what’s the issue? Am I passing the correct prop?

4

My pleasure, so what you’re saying is that when you remove the clientKey your app renders fine? That’s definitely not expected behavior. Are you recovering the clientKey from your Courier Push Integration?

5

Yes. The app renders fine when I remove the whole prop clientKey={process.env.COURIER_CLIENT_KEY}.

Here’s an absolute basic NextJS application with the CourierProvider wrapper. You can check yourself by removing the clientKey={CLIENT_KEY} in the _app.js file.

I’ve used the client key received from the Courier Push Integration page that you mentioned. But for the above dummy project, the client key is a random value.

Also, the @trycourier/react-provider package conflicts with the latest version of React used in NextJS projects, i.e., react@18.0.2.

Should I look for another way to integrate it without using the CourierProvider?

6

Hi there, our app.courier.com is a nextjs application fwiw. To get nextjs to pick up an env variable you do need to prepend NEXT_STATIC in front of the property name. In our case, our variable is NEXT_STATIC_COURIER_CLIENT_KEY.

Can you try hardcoding the CLIENT_KEY and not use it from a env variable to see if that fixes it?

7

I think what may be happening is that you are server rendering the CourierProvider and on the server there is no websocket… there is only websockets in the browser. It’s possible we should check if we are on the server and bail on trying to connect to the websocket.

let me ponder this a minute.

8

Hey Riley, thank you for your reply.

I’ve tried hardcoding the values, but the error persists.

Please let me know if you find any solution.

9

The problem is that you are trying to server render the Component and it only works on the browser. So you can either conditionally render CourierProvider based on whether is it on the server or the browser… or I will try this week to implement that into the component itself.

10

Okay. I’ll try to implement it the way you suggested. But having an example would be great.