如何将 Storybook 配置为从项目根目录以外的目录运行

Question

我正在尝试将 Storybook 配置为从不是项目根目录的目录中运行，但遇到了一些麻烦。我已经使用https://github.com/jibin2706/cra-monorepo-demo作为基础设置了一个单声道代表。

我的项目目录如下所示：

- project
-- packages
---- app
---- components
---- utils
---- stories
------ .storybook
-------- main.js
------ ComponentA
-------- ComponentA.stories.mdx

因为我使用的是带有别名的 monorep（例如，一个组件可以从 导入@project/utils），所以我将 webpack 配置.storybook/main.js为：

const path = require('path');

module.exports = {
  stories: ['../**/*.stories.mdx', '../../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async (config, { configType }) => {
    const result = {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@project/components': path.resolve(
            process.cwd(),
            'packages/components'
          ),
        },
      },
    };
  },
};

然后在我里面ComponentA.stories.mdx我有一个像import { ComponentA } from '@project/components';

但是，当我运行它时，当它在.js文件中遇到 JSX 时，我总是遇到错误：

./packages/components/MyComponent1/MyComponent1.js 中的错误 106:11 模块解析失败：意外令牌 (106:11) 文件已使用这些加载程序处理：

• ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js 你可能需要一个额外的加载器来处理这些加载器的结果。|

return <React.Fragment>{children}</React.Fragment>;

我似乎无法弄清楚为什么会抛出此错误。我试过运行yarn storybook --debug-webpack它似乎包含一个加载器jsx和js文件。我不是 100% 确定这是否正确，但从我读过的其他文档来看，它看起来大致正确。

module: {
    rules: [
      {
        test: /\.(mjs|tsx?|jsx?)$/,
        use: [
          {
            loader: '/home/ian/src/cra-monorepo-demo/node_modules/babel-loader/lib/index.js',
            options: {
              sourceType: 'unambiguous',
              presets: [
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/preset-env/lib/index.js',
                  { shippedProposals: true, loose: true }
                ],
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/preset-typescript/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/preset-react/lib/index.js'
              ],
              plugins: [
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-decorators/lib/index.js',
                  { legacy: true }
                ],
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                  { loose: true }
                ],
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
                  { loose: true }
                ],
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                  { loose: true, useBuiltIns: true }
                ],
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-classes/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-parameters/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-destructuring/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-spread/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-for-of/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@storybook/core-common/node_modules/babel-plugin-macros/dist/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
                  {
                    method: 'usage-global',
                    absoluteImports: '/home/ian/src/cra-monorepo-demo/node_modules/core-js/index.js',
                    version: '3.16.1'
                  }
                ],
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-template-literals/lib/index.js'
              ]
            }
          }
        ],
        include: [ '/home/ian/src/cra-monorepo-demo' ],
        exclude: [ /node_modules/, /dist/ ]
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: '/home/ian/src/cra-monorepo-demo/node_modules/babel-loader/lib/index.js',
            options: {
              sourceType: 'unambiguous',
              presets: [
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/preset-env/lib/index.js',
                  {
                    shippedProposals: true,
                    modules: false,
                    loose: true,
                    targets: 'defaults'
                  }
                ],
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/preset-react/lib/index.js'
              ],
              plugins: [
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-decorators/lib/index.js',
                  { legacy: true }
                ],
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
                  { loose: true }
                ],
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
                  { loose: true }
                ],
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
                  { loose: true, useBuiltIns: true }
                ],
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-classes/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-parameters/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-destructuring/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-spread/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-transform-for-of/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@storybook/core-common/node_modules/babel-plugin-macros/dist/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
                '/home/ian/src/cra-monorepo-demo/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
                [
                  '/home/ian/src/cra-monorepo-demo/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
                  {
                    method: 'usage-global',
                    absoluteImports: '/home/ian/src/cra-monorepo-demo/node_modules/core-js/index.js',
                    version: '3.16.1'
                  }
                ]
              ]
            }
          }
        ],
        include: [Function: include]
      },
...

谁能看到我在这里可能遗漏了什么，或者需要什么额外的配置？

Answer 1

据我所知你.storybook/main.js看起来不错。

内置加载器也应该按预期工作。

关于您看到的错误：您是否尝试过将文件类型（也称为重命名文件结尾）从 更改.js为.jsx？因为加载器可以区分.js和.jsx文件，但是如果没有明确告知解释器这样做（就像您的.js文件的情况一样），则解释器无法理解 jsx 表示法。