[Bug]:无法构建storybook包:无法在模块外部使用import语句

v9tzhpje  于 6个月前  发布在  其他
关注(0)|答案(4)|浏览(57)

描述bug

检出 next 分支并在 code 文件夹中运行 yarn build ,得到的结果是(使用 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)

复现链接

无复现

复现步骤

见上文

系统环境

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

额外信息

也许使用支持 ESM 的 ts runtime,如 jiti 可以解决这个问题,参见 https://github.com/privatenumber/ts-runtime-comparison

agxfikkp

agxfikkp1#

免责声明:由于信息是自动生成的,可能存在不准确的情况。
要解决这个问题,请更新 scripts 目录中的 package.json 以包含 "type": "module" 字段。

  1. 打开 scripts/package.json
  2. 添加以下行:
{
  "type": "module"
}

或者,将 build-package.ts 重命名为 build-package.mjs

参考资料

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

关于 Greptile

此回复为您提供了研究的起点,而非精确解决方案。
帮助我们改进!如果这有帮助,请留下一个 👍,如果无关紧要,请留下一个 👎。

kupeojn6

kupeojn62#

在Windows下开发时,请确保使用WSL2。直接在Windows上开发Storybook并不受官方支持。此外,由于esbuild-register中的一个错误,您需要使用Node.js 18进行开发。

q0qdq0h2

q0qdq0h23#

这个看起来像是egoist/esbuild-register#96。这个项目似乎已经半死不活了,或许现在是迁移到一个积极开发的ts运行时的好时机。

sf6xfgos

sf6xfgos4#

我们正在迁移到bun: #28046

相关问题