Using storybook reports error Must use import to load ES Module

[DanaCoding]

Describe the bug

Reproduction

Execute in the root directory of the project built by sveltekit:

npx sb@next init

Start storybook

npm run storybook

Logs

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli   'C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'run',
0 verbose cli   'storybook'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing config:load:defaults Completed in 2ms
4 timing config:load:file:C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 2ms
5 timing config:load:builtin Completed in 2ms
6 timing config:load:cli Completed in 1ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:F:\workspace\svelte-demo\.npmrc Completed in 0ms
9 timing config:load:project Completed in 0ms
10 timing config:load:file:C:\Users\Administrator\.npmrc Completed in 0ms
11 timing config:load:user Completed in 1ms
12 timing config:load:file:C:\Users\Administrator\AppData\Roaming\npm\etc\npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 1ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 10ms
19 verbose npm-session 739d589aaf252fd0
20 timing npm:load Completed in 22ms
21 timing command:run Completed in 2990ms
22 verbose stack Error: command failed
22 verbose stack     at ChildProcess.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\promise-spawn\index.js:64:27)
22 verbose stack     at ChildProcess.emit (events.js:314:20)
22 verbose stack     at maybeClose (internal/child_process.js:1047:16)
22 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
23 verbose pkgid [email protected]
24 verbose cwd F:\workspace\svelte-demo
25 verbose Windows_NT 10.0.19042
26 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Administrator\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "storybook"
27 verbose node v14.13.1
28 verbose npm  v7.6.3
29 error code 1
30 error path F:\workspace\svelte-demo
31 error command failed
32 error command C:\WINDOWS\system32\cmd.exe /d /s /c start-storybook -p 6006
33 verbose exit 1

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
    Memory: 7.05 GB / 15.89 GB
  Binaries:
    Node: 14.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.53)
    Internet Explorer: 11.0.19041.1202

Severity

blocking an upgrade

Additional Information

storybookjs/storybook#16680

[bluwy]

This is because SvelteKit is using type: "module" in package.json, so the code written in .storybook/main.js needs to be in ESM (import), not CJS (require). It should work after you refactor the changes.

If not, try adding a package.json of {"type": "commonjs"} in the .storybook directory and keep the code there as is (in CJS).

[DanaCoding]

It works for me, many thx😀

.storybook create package.json

{"type":"commonjs"}

.storybook/main.js

module.exports = {
 ... ...

  "svelteOptions": {
     - "preprocess": require("../svelte.config.js").preprocess
     + "preprocess": import("../svelte.config.js").preprocess
  }
}

[martaver]

This also works for me, however the second time running, when storybook caches the manager build, I get:

Uncaught ReferenceError: require is not defined

Haven't looked at it too closely, but running storybook with --no-manage-cache gets around it, in case anyone else encounters this.

[Myrmod]

I did the following, for supporting esm:

rename main.js to main.cjs and change its contents from

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
  framework: '@storybook/svelte',
  core: {
    builder: 'storybook-builder-vite',
  },
  svelteOptions: {
    preprocess: require('../svelte.config.js').preprocess,
  },
}

to

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
  framework: '@storybook/svelte',
  core: {
    builder: 'storybook-builder-vite',
  },
  svelteOptions: {
    preprocess: import('../svelte.config.js').preprocess,
  },
}

This doesn't work for TypeScript though.

[benbender]

Just try

svelteOptions: async () => ({
  preprocess: await import('../../svelte.config.js').then(({ default: mod }) => mod.preprocess)
}),