[Bug]: Getting error of core-js package while using alpha and canary release of @tldraw/tldraw

[vrajdesai78]

What happened?

While using @tldraw/tldraw@alpha as well as canary it's giving me following error

How can we reproduce the bug?

No response

What browsers are you seeing the problem on?

No response

Contact Details

[email protected]

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[judicaelandria]

Hey @vrajdesai78 could you please create a repo or a codesandbox/stackblitz project that reproduce this?

[vrajdesai78]

Hey @vrajdesai78 could you please create a repo or a codesandbox/stackblitz project that reproduce this?

Hey @judicaelandria, you can find the full code here: https://codesandbox.io/p/github/vrajdesai78/whiteboard-yjs/main

[wwz223]

I have encountered the same problem. Is there a solution

[vrajdesai78]

I have encountered the same problem. Is there a solution

Unable to find solution, but it works in vite/react project. I face this issue only with Next JS

[wwz223]

I have encountered the same problem. Is there a solution

Unable to find solution, but it works in vite/react project. I face this issue only with Next JS

me too

[tscans]

Any updates on this?

[kawana77b]

This is occurring on the server side of Next.js, and the most fundamental problem is that the module function calls during hydration are being made in Node.js. In this case, ESM cannot load CJS. On the other hand, scripts fully bundled by Webpack can be executed on the client side.

Perhaps very importantly, scripts fully bundled by Webpack must be served from the server and executed only on the client side. Need to address this so that the scripts are not executed on the server side. I can't think of a very good solution to do this. The use of dynamic and use client seems very important, but may not be a good solution in complex cases.

[judicaelandria]

you have to dynamically import Tldraw and set ssr to false and use use client to be able to run Tldraw

but may not be a good solution in complex cases

what do you mean by complex cases? it shouldn't affect of what you're building

[judicaelandria]

To run Tldraw with Next.js, do something like this

'use client'

import dynamic from 'next/dynamic'
import '@tldraw/tldraw/tldraw.css'

const Tldraw = dynamic(async () => (await import('@tldraw/tldraw')).Tldraw, {
	ssr: false,
})


export default function Home() {
	return (
		<div className="tldraw__editor">
			<Tldraw />
		</div>
	)
}

[kawana77b]

@judicaelandria Thank you for showing the example. Sorry, I could have misunderstood. I think that solution is fine. I do not see this as a bug related to the package, as I believe this is an issue related to the configuration and usage of Next.js.

I will explain why I thought this way in this context. I made the statement about the complex case because I reproduced the codesandbox code in the title case. What initially caught my attention was the fact that I was importing and configuring multiple elements from modules, not just the Tldrow component. In other words, I am setting up a store and a shareZone. I figured this could be done by calling YjsExample with dynamic to create chunks of the required parts in .next/static/chunks to achieve what I was hoping for. This actually worked.

Most likely, this code appears to have another error, but since I don't have time to verify the correctness of this code, I commented it out and didn't pay much attention to it. I saw a comment in another issue (#1449) about a problem with the app router, so I replaced them with the app router format, and when I injected console.log(store) at the initial time of useYjsStore and called it, it was clearly called on the server side, and no chunk was created The use client is also used to create a chunk. Using use client also did not work well and I did not know how to deal with this.

However, after reviewing your statement, I reset the whole situation and checked again, and both the pages router and the app router are working as expected. I have no idea why, as I did not record the exact steps of this process. It is very likely that I have refactored something incorrectly in the procedure. Since I am confused, it might be best not to pursue this too much.

In any case, here is an example of my modification that seems to be working well with the client at present. The basic idea is as @judicaelandria and the documentation indicate. (line 36 of src\store\useYjsStore.ts needs to be commented out)

// src/pages/index.tsx
import "@tldraw/tldraw/tldraw.css";
import dynamic from "next/dynamic";

const HOST_URL = "ws://localhost:8080";

const Example = dynamic(
　// Just moved index.tsx to src/pages/components/component.tsx from original src/pages/index.tsx
  async () => (await import("@/pages/components/comoponent")).default,
  {
    ssr: false,
  }
);

export default function YjsExample() {
  return <Example />;
}

[merobal]

I had the same error at a regular react app, and npm i core-js --save (yarn add core-js) fixed this issue for me

[raviteja83]

in the alpha version, the imports of core-js do not have any extension. if you are using webpack add the following to webpack.config.js:

resolve: {
  alias: {
      'core-js/stable/array/at': 'core-js/stable/array/at.js',
      'core-js/stable/array/flat': 'core-js/stable/array/flat.js',
      'core-js/stable/array/flat-map': 'core-js/stable/array/flat-map.js',
      'core-js/stable/string/at': 'core-js/stable/string/at.js',
      'core-js/stable/string/replace-all':
        'core-js/stable/string/replace-all.js',
    },
}

[mimecuvalo]

Hello all, we've since resolved this (hopefully!) in #2940

But let us know if, after that version, there are still troubles with this. Thanks!