[Bug]: Cannot build storybook packages: Cannot use import statement outside a module

[tobiasdiez]

Describe the bug

Checking out the next branch and running yarn build in the code folder yields (with Node.js v22.4.1):

# yarn build --watch
(node:25860) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("esbuild-register/loader", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:25860) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
D:\Programming\storybook\scripts\build-package.ts:1
import { resolve, posix, sep } from 'path';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at loadCJSModule (node:internal/modules/esm/translators:180:25)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:258:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:109:5)

Reproduction link

No reproduction

Reproduction steps

See above

System

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-1280P
  Binaries:
    Node: 22.4.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 4.3.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD <----- active
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.8 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.102)
  npmPackages:
    @storybook/addon-a11y: workspace:* => 8.3.0-alpha.0
    @storybook/addon-actions: workspace:* => 8.3.0-alpha.0
    @storybook/addon-backgrounds: workspace:* => 8.3.0-alpha.0
    @storybook/addon-controls: workspace:* => 8.3.0-alpha.0
    @storybook/addon-designs: ^7.0.4 => 7.0.7
    @storybook/addon-docs: workspace:* => 8.3.0-alpha.0
    @storybook/addon-essentials: workspace:* => 8.3.0-alpha.0
    @storybook/addon-highlight: workspace:* => 8.3.0-alpha.0
    @storybook/addon-interactions: workspace:* => 8.3.0-alpha.0
    @storybook/addon-jest: workspace:* => 8.3.0-alpha.0
    @storybook/addon-links: workspace:* => 8.3.0-alpha.0
    @storybook/addon-mdx-gfm: workspace:* => 8.3.0-alpha.0
    @storybook/addon-measure: workspace:* => 8.3.0-alpha.0
    @storybook/addon-onboarding: workspace:* => 8.3.0-alpha.0
    @storybook/addon-outline: workspace:* => 8.3.0-alpha.0
    @storybook/addon-storysource: workspace:* => 8.3.0-alpha.0
    @storybook/addon-toolbars: workspace:* => 8.3.0-alpha.0
    @storybook/addon-viewport: workspace:* => 8.3.0-alpha.0
    @storybook/angular: workspace:* => 8.3.0-alpha.0
    @storybook/bench: next => 1.0.0-next.6
    @storybook/builder-vite: workspace:* => 8.3.0-alpha.0
    @storybook/builder-webpack5: workspace:* => 8.3.0-alpha.0
    @storybook/cli:  8.3.0-alpha.0
    @storybook/codemod: workspace:* => 8.3.0-alpha.0
    @storybook/core-webpack: workspace:* => 8.3.0-alpha.0
    @storybook/csf: 0.1.11 => 0.1.4
    @storybook/csf-plugin: workspace:* => 8.3.0-alpha.0
    @storybook/ember: workspace:* => 8.3.0-alpha.0
    @storybook/eslint-config-storybook: ^4.0.0 => 4.0.0
    @storybook/global: ^5.0.0 => 5.0.0
    @storybook/html: workspace:* => 8.3.0-alpha.0
    @storybook/html-vite: workspace:* => 8.3.0-alpha.0
    @storybook/html-webpack5: workspace:* => 8.3.0-alpha.0
    @storybook/instrumenter: workspace:* => 8.3.0-alpha.0
    @storybook/linter-config: ^4.0.0 => 4.0.0
    @storybook/nextjs: workspace:* => 8.3.0-alpha.0
    @storybook/preact: workspace:* => 8.3.0-alpha.0
    @storybook/preact-vite: workspace:* => 8.3.0-alpha.0
    @storybook/preact-webpack5: workspace:* => 8.3.0-alpha.0
    @storybook/preset-create-react-app: workspace:* => 8.3.0-alpha.0
    @storybook/preset-html-webpack: workspace:* => 8.3.0-alpha.0
    @storybook/preset-preact-webpack: workspace:* => 8.3.0-alpha.0
    @storybook/preset-react-webpack: workspace:* => 8.3.0-alpha.0
    @storybook/preset-server-webpack: workspace:* => 8.3.0-alpha.0
    @storybook/preset-svelte-webpack: workspace:* => 8.3.0-alpha.0
    @storybook/preset-vue3-webpack: workspace:* => 8.3.0-alpha.0
    @storybook/react: workspace:* => 8.3.0-alpha.0
    @storybook/react-vite: workspace:* => 8.3.0-alpha.0
    @storybook/react-webpack5: workspace:* => 8.3.0-alpha.0
    @storybook/server: workspace:* => 8.3.0-alpha.0
    @storybook/server-webpack5: workspace:* => 8.3.0-alpha.0
    @storybook/source-loader: workspace:* => 8.3.0-alpha.0
    @storybook/svelte: workspace:* => 8.3.0-alpha.0
    @storybook/svelte-webpack5: workspace:* => 8.3.0-alpha.0
    @storybook/test: workspace:* => 8.3.0-alpha.0
    @storybook/testing-library: next => 0.2.2-next.0
    @storybook/vue3: workspace:* => 8.3.0-alpha.0
    @storybook/vue3-vite: workspace:* => 8.3.0-alpha.0
    @storybook/vue3-webpack5: workspace:* => 8.3.0-alpha.0
    @storybook/web-components: workspace:* => 8.3.0-alpha.0
    @storybook/web-components-vite: workspace:* => 8.3.0-alpha.0
    @storybook/web-components-webpack5: workspace:* => 8.3.0-alpha.0
    eslint-plugin-storybook: ^0.8.0 => 0.8.0

Additional context

Maybe using a ts runtime with esm support like jiti could solve this, see also https://github.com/privatenumber/ts-runtime-comparison

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue, update the package.json in the scripts directory to include the "type": "module" field.

1. Open scripts/package.json.
2. Add the following line:

{
  "type": "module"
}

Alternatively, rename build-package.ts to build-package.mjs.

References

/scripts/build-package.ts /package.json

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[valentinpalkovic]

When developing under Windows make sure to use WSL2. The development of Storybook on Windoes directly is not officially supported. Furthermore, you have to use Node.js 18 for development due to a bug in esbuild-register.

[tobiasdiez]

Right, this seems to be https://github.com/egoist/esbuild-register/issues/96. This project seems to be semi-dead, perhaps it would be a good moment to migrate to an actively developed ts runtime.

[valentinpalkovic]

We are on it migrating to bun: https://github.com/storybookjs/storybook/pull/28046