Storybook运行main.ts报错Cannot use import statement outside a module如何解决

你遇到的报错是Node默认以CommonJS模式加载Storybook的.storybook/main.ts配置文件时，识别不了文件内的ES模块import语法导致的。以下三个可选方案均不需要在.storybook目录下新增package.json：

方案1：修改Storybook启动命令（推荐，无需改动现有配置代码） #

在项目根目录package.json的scripts中，修改Storybook启动命令，添加Node的ESM解析参数即可：

{
  "scripts": {
    "storybook": "NODE_OPTIONS=\"--experimental-specifier-resolution=node --loader ts-node/esm\" start-storybook -p 6006",
    "build-storybook": "NODE_OPTIONS=\"--experimental-specifier-resolution=node --loader ts-node/esm\" build-storybook"
  }
}

如果是Windows系统，需要先安装cross-env包处理环境变量，将命令改成：

"storybook": "cross-env NODE_OPTIONS=\"--experimental-specifier-resolution=node --loader ts-node/esm\" start-storybook -p 6006"

方案2：修改main.ts为CommonJS语法（最稳妥，无额外依赖要求） #

直接把.storybook/main.ts里的ES模块语法换成CommonJS格式即可，原有其他配置逻辑不用改：

const path = require('path')

module.exports = {
  core: {
    builder: 'webpack5'
  },
  tsDocgenLoaderOptions: {
    tsconfigPath: path.resolve(__dirname, '../tsconfig.json')
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript'
  },
  stories: ['../src/**/__stories__/*.stories.tsx', '../src/__stories__/**'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/addon-essentials'
  ],
  webpackFinal: (config: any) => {
    const cwd = process.cwd()

    if (config.resolve?.alias) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@emotion/core': path.join(cwd, 'node_modules', '@emotion', 'react'),
        '@emotion/styled': path.join(cwd, 'node_modules', '@emotion', 'styled'),
        '@emotion/styled-base': path.join(
          cwd,
          'node_modules',
          '@emotion',
          'styled'
        ),
        'emotion-theming': path.join(cwd, 'node_modules', '@emotion', 'react')
      }
    }

    if (config.module?.rules) {
      config.module.rules.push({
        test: /\.(png)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      })
    }

    return config
  }
}

方案3：升级Storybook版本 #

你当前用的是6.3.12版本，升级到6.4及以上版本后，官方默认支持ESM格式的配置文件，无需额外修改配置即可正常启动。

注意事项 #

• 以上三个方案任选其一即可，原有babel.config.json、.storybook/tsconfig.json的配置都可以保留不用修改。
• 方案1需要你已经在项目根目录安装ts-node、typescript依赖，你已经安装过可以直接使用。

内容的提问来源于stack exchange，提问作者Dorian Maliszewski