javascript - 如何将 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 导入)，所以我在 .storybook/main.js 中配置了 webpack读起来像:

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 时，我总是遇到错误。文件:

ERROR in ./packages/components/MyComponent1/MyComponent1.js 106:11Module parse failed: Unexpected token (106:11)File was processed with these loaders:

• ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.jsYou may need an additional loader to handle the result of these loaders.|

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 项目根有关。默认 babel-loader定义了 include等于 project root .而“项目根”通常是最接近的 .git文件夹。
一种解决方法是设置正确的项目根目录:

const path = require("path");

module.exports = {
  // ...

  webpackFinal: async (config, { configType }) => {
    const babelLoaderRule = config.module.rules.find(
      (rule) => rule.test.toString() === /\.(mjs|tsx?|jsx?)$/.toString()
    );
    // set correct project root
    babelLoaderRule.include = [path.resolve(__dirname, "../..")];

    return config;
  }
};

什么是“正确”路径，取决于您的设置。
查看 my post更长的文章。