Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeError with App router using excalidraw #7513

Open
engelbrechtz opened this issue Jan 4, 2024 · 11 comments
Open

TypeError with App router using excalidraw #7513

engelbrechtz opened this issue Jan 4, 2024 · 11 comments
Labels
bug Something isn't working package:excalidraw @excalidraw/excalidraw SSR next.js and server-side-rendering in general

Comments

@engelbrechtz
Copy link

I copied the code above, the app router gives me this error, how to solve this issue?

TypeError: _packages_excalidraw_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
@MinhuaHuang
Copy link

MinhuaHuang commented Jan 21, 2024 •
edited
Loading

me too

const Excalidraw = dynamic(
  async () => (await import("@excalidraw/excalidraw")).Excalidraw,
  {
    ssr: false,
  }
);

next: 14.0.5-canary.68
@excalidraw/excalidraw: 0.17.2

@ad1992
Copy link
Member

ad1992 commented Jan 22, 2024 •
edited
Loading

Have you also added use client in the file?
can you share a code sandbox reproducible example ?

@ad1992 ad1992 added SSR next.js and server-side-rendering in general package:excalidraw @excalidraw/excalidraw labels Jan 22, 2024
@damien-schneider
Copy link

I can confirm the error, I have the same, even with "use client", and does the same when I don't import it dynamically.

PS : The error appears to me only if I use turbo.

@tswistak
Copy link

tswistak commented Apr 5, 2024

Any news on this? It looks like it doesn't work with turbo, but works with usual Webpack because the library for some reason tries to use css-loader. Here's a call stack:

Call Stack
<unknown>
/node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js (12:134)
./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!../../css/variables.module.scss
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (2028:3)
__webpack_require__
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5626:11)
<unknown>
./../css/variables.module.scss (17:296)
../../css/variables.module.scss
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5250:3)
__webpack_require__
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5626:11)
<unknown>
./../constants.ts (87:103)
../../constants.ts
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (3688:3)
__webpack_require__
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5626:11)
<unknown>
/publicPath.js (2:87)
./publicPath.js
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (4370:3)
__webpack_require__
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5626:11)
<unknown>
/entry.js (51:88)
./entry.js
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (4348:3)
__webpack_require__
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5626:11)
[project]/node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js [app-client] (ecmascript)/</</<
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5890:17)
[project]/node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js [app-client] (ecmascript)/</<
node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js (5893:0)
<unknown>
webpackUniversalModuleDefinition@http://localhost:3000/_next/static/chunks/node_modules_%40excalidraw_excalidraw_dist_excalidraw_development_53067b.js (13:85)

I use Excalidraw 0.17.3. with Next 14.1.4 and app router.

Additional info: basing on a NextJS sample you've provided I just had to remove line import "@excalidraw/excalidraw/index.css"; because that file doesn't exist in an NPM package.

@Mrazator Mrazator added the bug Something isn't working label May 7, 2024
@haydenbleasel
Copy link

haydenbleasel commented Jul 18, 2024 •
edited
Loading

I get a similar error with @excalidraw/[email protected] and [email protected] but it looks like it's trying to load scss files:

not-found-boundary.tsx:69 Uncaught 
TypeError: _packages_excalidraw_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
    at eval (cjs.js??ruleSet[1].r….module.scss:12:134)
    at ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js!../../css/variables.module.scss (excalidraw.development.js:2027:1)
    at __webpack_require__ (excalidraw.development.js:5625:42)
    at eval (variables.module.scss:17:277)
    at ../../css/variables.module.scss (excalidraw.development.js:5249:1)
    at __webpack_require__ (excalidraw.development.js:5625:42)
    at eval (constants.ts:87:84)
    at ../../constants.ts (excalidraw.development.js:3687:1)
    at __webpack_require__ (excalidraw.development.js:5625:42)
    at eval (publicPath.js:2:68)
    at ./publicPath.js (excalidraw.development.js:4369:1)
    at __webpack_require__ (excalidraw.development.js:5625:42)
    at eval (entry.js:51:69)
    at ./entry.js (excalidraw.development.js:4347:1)
    at __webpack_require__ (excalidraw.development.js:5625:42)
    at excalidraw.development.js:5889:37
    at excalidraw.development.js:5892:11
    at webpackUniversalModuleDefinition (excalidraw.development.js:11:20)
    at Object.<anonymous> (excalidraw.development.js:18:2)
    at [project]/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@excalidraw/excalidraw/dist/excalidraw.development.js [app-client] (ecmascript) (http://…nt_157870.js:2519:3)
    at runtime-base.ts:347:21
    at runModuleExecutionHooks (runtime-base.ts:403:5)
    at instantiateModule (runtime-base.ts:345:5)
    at getOrInstantiateModuleFromParent (runtime-base.ts:451:10)
    at commonJsRequire (runtime-utils.ts:240:18)
    at Object.<anonymous> (main.js:10:17)
    at [project]/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@excalidraw/excalidraw/main.js [app-client] (ecmascript) (http://…main_586713.js:19:3)
    at runtime-base.ts:347:21
    at runModuleExecutionHooks (runtime-base.ts:403:5)
    at instantiateModule (runtime-base.ts:345:5)
    at getOrInstantiateModuleFromParent (runtime-base.ts:451:10)
    at esmImport (runtime-utils.ts:215:18)
    at 7e03c_@excalidraw_ex…ain_6757a0.js:12:16
    at async Excalidraw.loadableGenerated.modules [as loader] (index.tsx:14:23)

Figured it could be solved by adding .scss support to turbopack (supposed to be supported through Next.js by default) but no dice on that either:

experimental: {
  turbo: {
      rules: {
        '*.scss': {
          loaders: ['style-loader', 'css-loader', 'sass-loader'],
          as: '*.js',
        },
      },
    },
}

@haydenbleasel
Copy link

Should be fixed with this PR and be part of an upcoming release.

vercel/turborepo#8848

@lagupa
Copy link

lagupa commented Sep 13, 2024

Should be fixed with this PR and be part of an upcoming release.

vercel/turborepo#8848

I have confirmed this did not fix the issue for me, it only works if turbo is not enabled. Next version: 14.2.11

@clement2026
Copy link

@lagupa The fix is not in the stable versions of excalidraw. You can try and pick an unstable version from https://www.npmjs.com/package/@excalidraw/excalidraw?activeTab=versions.

For example:

  "dependencies": {
    "@excalidraw/excalidraw": "0.17.1-c1b310c",
  }
image

@andrewgosselin
Copy link

Yes! @clement2026's idea worked for me! (ctx)
I was having the same issue as @tswistak and downgrading to the latest unstable version worked (at the time of posting this 0.17.1-47ee8a0). To make this work, I also had to install lodash because it seems they added that as a dependency in this version as it errors otherwise.
I suppose we must wait until this is merged into stable?

Also after doing this, I now get the following downloadable font errors:
Image
I assume this may just be because I am on my local? However not sure and either way it is a bug with the way this gets integrated with NextJS as their official docs for the integration don't work at all properly out of the box.

@clement2026
Copy link

@andrewgosselin I’m glad to hear you found it helpful!

I suppose we must wait until this is merged into stable?

Yeah, looks like it.

I also noticed the .woff2 errors in my NextJS project, but since they don’t affect anything, I’m fine with it.

@haroldSanchezb
Copy link

Hi, I tried theses versions and I getting this error

ERROR in ./node_modules/@excalidraw/excalidraw/dist/dev/index.js 1576:0-42
Module not found: Error: Can't resolve 'roughjs/bin/math' in '<my_path_app>/node_modules/@excalidraw/excalidraw/dist/dev'
Did you mean 'math.js'?
BREAKING CHANGE: The request 'roughjs/bin/math' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.

Maybe the Package should build for cjs and esm, or change to type module in package.json, or If you know the solution, I appreciate (sorry my english its very bad)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working package:excalidraw @excalidraw/excalidraw SSR next.js and server-side-rendering in general
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests