excalidraw
excalidraw copied to clipboard
TypeError with App router using excalidraw
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
me too
const Excalidraw = dynamic(
async () => (await import("@excalidraw/excalidraw")).Excalidraw,
{
ssr: false,
}
);
next: 14.0.5-canary.68 @excalidraw/excalidraw: 0.17.2
Have you also added use client
in the file?
can you share a code sandbox reproducible example ?
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.
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.
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',
},
},
},
}
Should be fixed with this PR and be part of an upcoming release.
https://github.com/vercel/turbo/pull/8848