Nx Storybook (Webpack 5) \"exports is not defined\" 和无限加载答案

【问题标题】：Nx Storybook (Webpack 5) "exports is not defined" and infinite loadingNx Storybook (Webpack 5) \"exports is not defined\" 和无限加载
【发布时间】：2022-10-24 04:01:18
【问题描述】：

我已将 Nx 包升级到最新版本 14.7.5，它破坏了我仍在使用 Webpack 4 的 Storybook 构建。所以我认为将它更新到 Webpack 5 可能会解决问题，并且在迁移后它成功构建，但是 Storybook 卡住了在主页上无限显示加载动画（XHR 调用 /progress 永不返回），在控制台中出现 Uncaught ReferenceError: exports is not defined 错误。此错误来自我在 JS 中生成的文件之一（其余文件在 TypeScript 中）。我不确定错误是否导致无限加载，但这是我唯一的线索。

当我静态构建 Storybook 时，它也会在编译过程中显示此警告：

 export 'AssetService' (reexported as 'AssetService') was not found in './protos/Asset_pb_service' (module has no exports)

它来自与控制台中的错误相同的文件，因此它可能已连接（尽管文件具有导出）。

我的主要故事书配置：

module.exports = {
  core: {
    builder: 'webpack5',
  },
  typescript: { reactDocgen: false },
  stories: [],
  addons: [
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: true,
        viewport: false,
      },
    },
    '@nrwl/react/plugins/storybook',
    'storybook-dark-mode'
  ],
};

主应用的 Storybook 配置：

// This loads the configuration above
const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../*.stories.mdx',
    '../../../libs/**/*.stories.mdx',
    '../../../libs/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

故事书包版本：

    "@storybook/addon-docs": "6.5.12",
    "@storybook/addon-essentials": "6.5.12",
    "@storybook/builder-webpack5": "6.5.12",
    "@storybook/core-server": "6.5.12",
    "@storybook/manager-webpack5": "6.5.12",
    "@storybook/react": "6.5.12",

任何帮助，将不胜感激。

【问题讨论】：

标签： webpack storybook nrwl-nx

【解决方案1】：

这是由preview.js 引起的，它用一些提供者包装了每个故事，并且间接导入了导致错误的 JS 文件。看起来这个preview.js 的编译方式与故事不同，因为在将有问题的提供者移动到需要它们的故事之后，Storybook 又开始工作了。

编辑：实际上，将有问题的提供者移至故事后，问题并没有消失，只是故事现在不起作用，但总比整个故事书不起作用要好。

【讨论】：