reactjs - 故事书：“JSON 中第 27 位的意外标记 r”

Question

Storybook 曾经崩溃，因为我使用了 webpack 中定义的别名。因此，我修改了 Storybook 的 main.js 配置以手动添加它们。启动构建时，Storybook 崩溃并出现以下错误：

JSON 中第 27 位的意外标记 r

这是配置：

const path = require("path");

module.exports = {
  stories: ["../**/stories.tsx"],
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        alias: {
          api: path.resolve(__dirname, "src/api/"),
          assets: path.resolve(__dirname, "src/assets/"),
          components: path.resolve(__dirname, "src/components/"),
          containers: path.resolve(__dirname, "src/containers/"),
          i18n: path.resolve(__dirname, "src/i18n/"),
          models: path.resolve(__dirname, "src/models/"),
          pages: path.resolve(__dirname, "src/pages/"),
          src: path.resolve(__dirname, "src/"),
          stores: path.resolve(__dirname, "src/stores/"),
          utils: path.resolve(__dirname, "src/utils/"),
        },
      },
      module: {
        ...config.module,
        rules: [
          {
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            use: { loader: "babel-loader" },
          },
          { test: /\.css$/, use: ["style-loader", "css-loader"] },
          { test: /\.(png|jpg|gif)$/, use: ["file-loader"] },
          {
            test: /\.svg$/,
            use: [
              {
                loader: "babel-loader",
              },
              {
                loader: "react-svg-loader",
                options: {
                  jsx: true,
                },
              },
            ],
          },
        ],
      },
    };
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
};

我的应用程序结构如下所示：

• 客户
  • 故事书
    • main.js
    • 预览.js
  • 源代码
    • 成分
    • 页面
  • webpack.config.js

如何解决这个问题？

标签： reactjswebpackstorybook