Storybook main.ts：不能在模块外使用 import 语句

Posted 2023-02-19

【中文标题】Storybook main.ts：不能在模块外使用 import 语句

【英文标题】：Storybook main.ts: Cannot use import statement outside a module

【发布时间】：2021-12-16 21:15:29

【问题描述】：

使用 main.ts 时不能使用 import 语句。 我有一个./storybook/babel.config.json

  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-env",  "shippedProposals": true, "targets":  "node": "current"  ],
    "@babel/preset-react",
    [
      "@emotion/babel-preset-css-prop",
      
        "sourceMap": false,
        "autoLabel": "never",
        "labelFormat": "[filename]--[local]"
      
    ]
  ]

一个.storybook/tsconfig.json：

  "target": "es2020",
    "module": "esnext",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "esModuleInterop": true,
    "noEmit": true,
    "moduleResolution": "node",
    "jsx": "preserve",

在我的 .storybook/main.ts 中

import path from 'path'

export default 
  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
  ,

每次我得到

ERR! import path from 'path';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module

这个我不知道怎么解决（也不想在.storybook文件夹里多加一个package.json）

信息：我已经在 main package.json 中添加了 ts-node 依赖项。

故事书信息：

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.1.0 - /usr/local/bin/node
    Yarn: 3.0.2 - /usr/local/bin/yarn
    npm: 7.24.2 - ~/*****/node_modules/.bin/npm
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 89.0.2
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: 6.3.12 => 6.3.12
    @storybook/addon-docs: 6.3.12 => 6.3.12
    @storybook/addon-essentials: 6.3.12 => 6.3.12
    @storybook/addon-links: 6.3.12 => 6.3.12
    @storybook/addons: 6.3.12 => 6.3.12
    @storybook/builder-webpack5: 6.3.12 => 6.3.12
    @storybook/manager-webpack5: 6.3.12 => 6.3.12
    @storybook/react: 6.3.12 => 6.3.12
    @storybook/theming: 6.3.12 => 6.3.12

【参考方案1】：

将您的 "module": "esnext" 更改为 "module": "commonjs"。

但是，既然您提到您已安装 ts-node，您可能需要添加：

"ts-node": 
  "compilerOptions": 
    "module": "commonjs"
  

改为您的tsconfig.json，具体取决于您将如何编译/运行您的代码。

如果您想将esnext 与tsc 和commonjs 与ts-node 一起使用，您也可以以不同方式指定它们。

另外，只需确保您的 ts-node 确实在使用您的 tsconfig.json，我一直在努力解决此类问题，然后最终意识到它甚至根本没有使用我的配置。