Not able to initialise the spaces on nextjs, react about spaces HOT 16 CLOSED

thanks @awachat. I've setup a fresh nextjs app, but could not reproduce the error. Any chance you could provide a full stack trace? The error suggests some issue with module resolution, but as far as I can tell you are importing the correct (.mjs, which the default) pacakge. Perhaps something went wrong when you installed the package? I'd try removing node_modules and installing again.

As a side note, I noticed you are not passing a clientId to the constructor. When authenticating with the API_KEY, you'll need to do:

new Spaces({ key: "ABLY_API_KEY", clientId: "a client id" })

You can read about what a clientId is for Ably here https://ably.com/docs/realtime/authentication?lang=javascript#identified-clients

(noticed this is missing in our docs currently)

from spaces.

hey @awachat sorry to hear that. Happy to screen share, will chat with Daria to arrange

from spaces.

I am trying to investigate if it has to do something with server sider rendering. I tried to use dynamic import, but no luck. The dynamic import throws another error (type mistmatch)

const Spaces = dynamic(() => import('@ably-labs/spaces'));

Also, @dpiatek I am use the page router of nextjs along with auth0. Auth0 checks the session on the servers, and if the user is not logged in, then redirect to login page.

Thanks.

from spaces.

The interesting thing in that error @awachat is that the missing import (for Cursors) is lacking the JS extension and, looking at our compiled code, it differs from other imports:

Perhaps the way bundling is resolved in your application requires the correct extension, if so, we should be able to amend on our side to make this work (will give it a try tomorrow morning).

from spaces.

hey @awachat yes, of course, you've mentioned before. I'm still not quite sure which part of next's config causes this issue, but I amended now the internal imports for this to work. Have a go with 0.0.10. And many thanks for your help in testing the lib :)

from spaces.

Thanks a ton @dpiatek. It's working now. I will get started adding some cool features you and your team built. Let me know if you have any example of using ably for document collaboration with comments.

from spaces.

hey @awachat, thanks for trying out the SDK. I can look into this for you. Could you please post how are you importing the library and what are you passing to Spaces (basically what's cut-off on the screenshot)?

Moreover, to confirm versions – you are using next 13.4.6 and node 20.3?

from spaces.

@dpiatek I am using "next": "^13.4.6", "react": "^18.2.0" and node v19.6.1. Let me know if this is helpful.

PS: I removed the API Key to take the screenshot. I pasted the api key from the dashboard as a string here.

from spaces.

@dpiatek I removed node_modules .next, deleted package.json. Reinstalled all the packages. Yet no luck. I'm getting the same error.

Should we get on a call, and do a screenshare to figure the root cause. Let me know what do you think?

Update:

from spaces.

I read about this a little today. It looks like the when js extension is not specified - it defaults to commonjs instead of es module.

from spaces.

hey @awachat I've just cut release 0.0.9 could you give it a try?

from spaces.

@dpiatek Now I got this error. I followed the demo example.

from spaces.

hey @awachat it looks like now next.js thinks Ably is a CommonJS module - could you post your tsconfig please?

from spaces.

@dpiatek here you go.

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

from spaces.

the config looks good @awachat :( I wonder if this could be a problem with SSR? Is the breaking component a use client component or imported via dynamic ?

from spaces.

I'm using page router. It's not added dynamically. This error happen at the compile time.

from spaces.