TypeError with App router using excalidraw

[engelbrechtz]

trafficstars

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]

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]

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

[damien-schneider]

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]

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.

[haydenbleasel]

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]

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

https://github.com/vercel/turbo/pull/8848