Storybook: 错误：未定义导出

我在终端收到export 'MatrixEffect' was not found in '../dist/index' 。 但是我可以在一个普通的节点运行时导入模块（不能使用它，但至少我知道它可以被导入）。

这可能会有所帮助，因为我们还没有官方文档： https ://github.com/storybooks/storybook/issues/3270

这仍然无法正常工作...

在 lerna 项目中打开纱线工作区后，我在故事书中遇到了相同错误消息的问题。 我怀疑这是由包加载问题引起的。 进一步调查。

听起来我有同样的问题。

如果我理解正确的问题，从 .js 解析 .ts 文件有问题吗？ （不过，我不明白您为什么要从dist导入组件）

也许您应该将.ts / .tsx添加到扩展故事书 webpack.config 中的resolve.extensions中？

@igor-dv 不，我使用 JS。 无论如何，以某种方式将变量标识符（ variable更改Variable ）是可行的。

我在不使用 TypeScript 的情况下遇到了这个错误，只是 vanilla JS

我从 $ .storybook文件夹中的 $ webpack.config.js中删除了 babel 加载程序，它现在可以正常工作了。 不过我不使用打字稿。

我遇到了这个问题，在浏览器中我得到exports is not defined但在终端中我得到 `"export 'default' (imported as '[ComponentName]') was not found in '@[namespace]/[包裹名字]'”

• 使用 lerna
• 故事书 3.4.7
• 对于我的组件来说一切都很好，没有内部依赖
• 如果我尝试导入一个依赖于project/packages中另一个包的模块，则会出现错误
• 我正在运行我的构建脚本，所以它试图引入包的 common-js 版本。

如果我将内部依赖项的 package.json 主配置更改为非构建源，一切正常

所以故事书的 webpack 配置和将 cjs 导入 es 模块代码有问题，或者什么...

我的修复

所以我意识到我不小心删除了指向我构建的 ES 模块版本的 package.json “模块”字段，将其重新添加会使一切恢复正常。 似乎故事书应该可以拉出cjs版本，但我的问题解决了🤷🏽‍♂️

在带有 babel 7.0.0 的 v4.0.0-alpha.20 中，这仍然发生在我身上

@tony 这里也一样。 不过，我正在使用 Flow。

@ryanflorence我有完全相同的 lerna 设置和故事书的导出问题。
我有一个包，它公开了 UI 元素的构建版本。
抱歉，但当你说"module" field that pointed to the ES module version of my builds, adding that back in makes everything work again.时，你能提供更多细节吗？

这个问题可以通过在.babelrc文件中添加正确的插件来解决，因为tsconfig文件被配置为生成commonjs兼容模块，我们需要使用正确的插件

{
    "env": {
        "test": {
            "plugins": ["instanbul"]
        }
    },
    "plugins": ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-modules-commonjs"]
}

这就是我的.babelrc文件中的内容，一切正常，我的tsconfig文件具有完全相同的选项和值。

"@babel/core" "^7.1.0"
"@storybook/react" ^4.0.0-alpha.2"
"react" "^16.4.0"

注意：此解决方案适用于另一种模块https://babeljs.io/docs/en/next/plugins#modules

对我来说，问题是由于最近在 4.0.0.alpha 中包含 babel-loader 的更改引起的。 默认服务器 webpack 配置可以包括你的 commonjs 编译（包，工作区）： https://github.com/storybooks/storybook/blob/b2b73596f9dd97b4ba8c03340bd36f868e836772/lib/core/src/server/config/webpack.config.dev.js# L78
https://github.com/storybooks/storybook/blob/b2b73596f9dd97b4ba8c03340bd36f868e836772/lib/core/src/server/config/utils.js#L3

对我来说，一个修复方法是使用自定义 webpack.dev.js 覆盖默认插件声明：

https://github.com/psychobolt/react-rollup-boilerplate/blob/d9cb9179cb7c00baab486646c504110bf7e2f50a/.storybook/webpack.config.js#L7

// exclude 'babel-loader' so we can override it later
...defaultConfig.module.rules.filter(rule => !(
    (rule.use && rule.use.length && rule.use.find(({ loader }) => loader === 'babel-loader'))
)),

https://github.com/psychobolt/react-rollup-boilerplate/blob/d9cb9179cb7c00baab486646c504110bf7e2f50a/.storybook/webpack.config.js#L11

{
  test: /\.jsx?$/,
  include: require('path').resolve('./'),
  exclude: /(node_modules|dist)/, // exclude any commonjs files
  loader: 'babel-loader',
},

省略include也可以解决问题，并且对我没有副作用。

我想我明白发生了什么。

@psychobolt所说的是 100% 正确的。

我认为我们可以为 monorepo 用户做得更好，使我们的默认 webpack 配置不会发生上述情况。

我认为删除include: includePaths,会做到这一点，但问题是性能成本是多少..

谁有关于如何最好地解决这个问题的好建议？

我们也偶然发现了这个问题，并且花了更多半天的时间与配置进行战斗才能弄清楚它可能是什么。 😢

@cilice你是怎么解决这个问题的？

@0nn0遵循 https://github.com/storybooks/storybook/issues/3346#issuecomment-425516669 这个建议 :)

我对 stotybook-4.1.4、Lerna 项目、React 16.7.0、普通 JS 有同样的问题。 适用于 storybook-4.0.12

我在 4.1.4 上遇到了同样的错误，我回到 4.0.10 并且工作正常（没有打字稿）babel-webapck

使用修改后的配置从 babel-loader 中排除编译输出将避免 Lerna 或具有最新故事书包的 monorepo 项目的此问题。

@psychobolt你能提供一个示例配置吗？ 谢谢。

见https://github.com/storybooks/storybook/issues/3346#issuecomment -425516669

不确定这是否对其他人有帮助，但我们通过运行以下命令解决了这个问题：

npm i react-scripts -D

@skeet我想知道为什么故事书有这个信息

info => Using base config because react-scripts is not installed.
info => Using default webpack setup based on "create-react-app".
info => Using base config because react-scripts is not installed.

所以，在安装 react-scripts 之后，它现在说

info => Loading create-react-app config.
info => Using default webpack setup based on "create-react-app".
info => Loading create-react-app config.

我们也遇到过几次exports is not defined问题，我们之前已经按照其他人的建议通过覆盖 Babel 配置来解决它。

但是，我最近开始再次研究这个问题，我注意到默认 JS 规则的exclude属性被解析为绝对路径（下面是生成的 Webpack 配置的console.log() ）：

{
  test: /\.(mjs|jsx?)$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: '.cache/storybook',
        presets: [
          [
            '@babel/preset-env',
            { shippedProposals: true, useBuiltIns: 'usage' }
          ],
          '@babel/preset-react',
          '@babel/preset-flow'
        ],
        plugins: [
          'babel-plugin-macros',
          '@babel/plugin-proposal-class-properties',
          [
            'babel-plugin-react-docgen',
            { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' }
          ]
        ]
      }
    }
  ],
  include: ['/Users/matt.hinchliffe/Project/'],
  exclude: ['/Users/matt.hinchliffe/Project/node_modules']
}

我曾假设exclude属性应该是一个正则表达式，所以我觉得它看起来很奇怪！ 我意识到，由于我们项目的结构，我们实际上有很多node_modules文件夹，所以我尝试将此行更新为 RegExp（ /node_modules/ ） - 它修复了它！

这避免了转译已经转译的模块 - 特别是避免 $#$ preset-env #$ 的useBuiltins选项注入core-js polyfills（删除useBuiltins选项或设置针对不需要任何 polyfill 的运行时的环境也有助于避免这个问题。）

因此，有几个不同的问题在起作用，导致了这个问题：

1. node_modules文件夹中的依赖项可能会被 Babel 无意转译
2. useBuiltins选项可以以模块类型的错误格式将core-js polyfills 注入到您的代码中（请参阅 https://github.com/babel/babel/issues/7463 和 https:// github.com/babel/babel/issues/9187）
3. 如果软件包被符号链接（例如在 monorepo 中），那么您必须格外小心以避免第 1 点！

不幸的是，扩展现有的排除选项并不容易，但这是可能的！

我为这个问题创建了一个简化的测试用例，并提供了如何避免它的信息。 如有必要，我将向 Babel 提出问题。

https://github.com/i-like-robots/broken-webpack-bundle-test-case

我们正在使用故事书 + lerna + typescript。 为我们解决的问题是将 @i-like-robots 与@psychobolt 混合：

module.exports = (baseConfig, env, config) => {
    config.module.rules = config.module.rules.filter(rule => !(
        (rule.use && rule.use.length && rule.use.find(({ loader }) => loader === 'babel-loader'))
    ));
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
            sourceType: 'unambiguous',
            presets: [['react-app', { flow: false, typescript: true }]],
        },

    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

我们有同样的问题，什么时候去修复它？

在全新安装时出现此错误。 不知道是什么原因造成的（可能与create-react-app的设置和这个之间的.babelrc冲突？）。

我设法通过将以下行添加到.babelrc文件来解决此问题：

"sourceType": "unambiguous"

有关此选项的更多信息： https ://babeljs.io/docs/en/options#sourcetype
相信此选项仅适用于 Babel 7 及更高版本。

只是在没有完全理解人们的问题是什么的情况下开车过去（道歉！）——这是我的 webpack 配置中的一个片段，它可以解决这个问题，也许以更简单的方式：

  const babelLoader = storybookBaseConfig.module.rules[0];
  babelLoader.exclude.push(
    path.resolve('./lib/components/node_modules'),
    /* etc */
  );

@tmeasday您能否详细说明您的建议——即在哪里放置该代码？

Storybook 很棒，但是这个错误是断断续续的和可怕的。 我似乎找不到为什么会开始发生此错误的押韵或原因。 我会在组件上大惊小怪，然后繁荣，一切都刚刚开始工作，没有进行任何真正的改变。 但是我现在已经被困了一个小时试图让它工作，我只是不知道为什么它会被破坏。

请调查这个似乎影响到很多人的问题，并且是个大问题。

我通过创建一个包含以下内容的.storybook/weback.config.js文件解决了这个问题：

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    config.module.rules[0].use[0].options.sourceType = "unambiguous";

    return config;
};

似乎它确实归结为sourceType babel 问题。 我尝试添加一个.babelrc文件（如@0nn0 所建议的那样），但这似乎替换了整个 babel 配置而不是修改它，从而导致了进一步的问题。

@JasonTheAdams我上面写的代码片段将放在.storybook/webpack.config.js中。 我认为这与您所做的类似。

这是我认为正在发生的事情：

问题是子项目中node_modules中的文件（例如./lib/components/node_modules ）正在由 babel 编译。 它们是已经发送到 NPM 并且不需要编译的文件。 在某些情况下，这会导致令人困惑的问题，可能与 babel 解析文件的方式有关。

我的方法只是告诉babel-loader不要编译任何node_modules文件夹中的任何文件。 默认情况下它会忽略./node_modules所以它会编译子项目的node_modules里面的东西。 所以我在exclude列表中添加了一些路径。

您的方法是配置babel-loader以使用 babel 的sourceType检测来告诉如何解析文件。 这基本上适用于 babel 错误解析文件。 但是 babel 仍然在不需要编译的文件上运行，所以不知道是不是你想要的？

我不是专家，所以对我的话持保留态度，但这是我自己解决过类似问题的理解。

在应用@skeet的建议（https://github.com/storybooks/storybook/issues/3346#issuecomment-459308703）后，当我开始将一个包引用为其他几个包的依赖项（不是对等或开发）时，问题又回来了.

将module字段放入依赖项的package.json中，就像在@ryanflorence的修复 (https://github.com/storybooks/storybook/issues/3346#issuecomment-415982589) 中所做的那样。

   main: "dist/index.js",
+  module: "dist/index.js",

@tmeasday 明白了。 我开始思考这个问题。 棘手的是，在我的情况下，我实际上_do_希望它编译子node_modules ，因为那是我自己开发组件的地方，将它视为一个单独的包。

我认为@skeet的建议，正如@jcousins-ynap 所回应，可能是这里最好的解决方案。 我们不希望 Storybook 假设如何处理子包（即忽略它们的 node_modules）。 如果有人不想编译子模块 node_modules，他们可能一开始就不会安装包依赖项。

这似乎都归结为 babel + webpack 识别 CommonJS 与 ES6 模块的能力，这似乎并不完美。 将"module":字段添加到子包的package.json显式通知 babel 该包使用 ES6 模块，这是处理此问题的最安全方法。

感谢您对此的关注！

也想在这里插话。 使用 Storybook 5、Babel 7.4（带有 core-js 3）、TypeScript 3.4 和 monorepo。 这些建议中的大多数都没有 100% 奏效，但我意识到有些东西确实奏效了。 monorepos 的本质是一个包从另一个包导入“构建”文件，而不是源文件，这在 NPM 注册表/节点模块层中是正确的，但在开发中，这很烦人。 为了解决这个问题，我定义了将lib/转发到src/的 Webpack 别名，并且一切正常，特别是因为现在所有代码都是 ESNext/ESM！

这是黑客：

glob.sync(path.join(__dirname, '../packages/*/package.json')).forEach(filePath => {
  const { name } = require(filePath);

  config.resolve.alias[`${name}$`] = `${name}/src`;
  config.resolve.alias[`${name}/lib`] = `${name}/src`;
});

为了让 Babel + TS 工作，我选择改变现有的 babel-loader 而不是添加新的，因为我的本地 Babel 配置不是 100% 与 Storybook 兼容，但他们自己的配置是。

const babelConfig = config.module.rules[0];

// Replace Flow with TypeScript
babelConfig.test = /\.(j|t)sx?$/;
babelConfig.exclude.push(/node_modules/);
babelConfig.use[0].options.sourceType = 'unambiguous';
babelConfig.use[0].options.presets[2] = require.resolve('@babel/preset-typescript');
babelConfig.use.unshift({ loader: require.resolve('react-docgen-typescript-loader') });

config.resolve.extensions.push('.ts', '.tsx');

有同样的问题，也是由于删除module字段。
将@babel/plugin-transform-modules-commonjs添加到 babel 插件有帮助，如此评论中所述： https ://github.com/storybooks/storybook/issues/3346#issuecomment -423719241

@elado工作！

也完全被这个所阻碍。 在过去的 ~2 天里，尝试了这个线程的所有建议以及我自己的一些建议，但都没有成功。 没有一个成功😢

最终，我只剩下：

WARNING in ./packages/one/src/index.jsx 2:289-293
"export 'default' (imported as 'Two') was not found in '@my-monorepo/two'
 @ ./packages/one/src/index.stories.jsx
 @ ./packages sync \.stories\.jsx$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js

...当开始故事书和...

index.js:49 ReferenceError: exports is not defined
    at react-is.development.js:18
    at Module../packages/one/node_modules/react-is/cjs/react-is.development.js (react-is.development.js:226)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/react-is/index.js (index.js:6)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../packages/one/node_modules/prop-types/index.js (index.js:9)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)

...查看故事书 ui (http://localhost:9001) 时。 我的故事没有加载。

fwiw，这是我的设置：

├── .storybook/
│   ├── addons.js
│   ├── config.js
│   └── webpack.config.js
│
├── packages/
│   ├── one
│   │   ├── src/
│   │   │   ├── index.jsx
│   │   │   ├── index.stories.jsx
│   │   │   └── index.test.jsx
│   │   ├── dist/
│   │   │   ├── index.js
│   │   │   ├── index.stories.js
│   │   │   └── index.test.js
│   │   └── package.json
│   │
│   └── two
│       ├── src/
│       │   ├── index.jsx
│       │   ├── index.stories.jsx
│       │   └── index.test.jsx
│       ├── dist/
│       │   ├── index.js
│       │   ├── index.stories.js
│       │   └── index.test.js
│       └── package.json
│
├── .babelrc
├── .eslintrc.js
├── jest.config.js
├── lerna.json
├── npm-shrinkwrap.json
└── package.json

import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';
import '@storybook/addon-storysource/register';

import { configure } from '@storybook/react';

const req = require.context('../packages', true, /.stories.jsx$/);

function loadStories(){
    req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

module.exports = {
    module: {
        rules: [
            {
                test: /\.stories\.jsx?$/,
                loaders: [require.resolve('@storybook/addon-storysource/loader')],
                enforce: 'pre'
            }
        ]
    }
};

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-transform-modules-commonjs"
    ]
}

{
  "name": "my-monorepo",
  "description": "monorepo containing POC react ui component library",
  "version": "1.0.0",
  "author": "me",
  "scripts": {
    "postinstall": "npm run bootstrap",
    "bootstrap": "lerna bootstrap",
    "storybook": "npm run build && start-storybook --port 9001 --config-dir .storybook --ci",
    "test": "npm run lint && npm run test:unit",
    "test:unit": "npm run build && NODE_ENV=development BABEL_ENV=test jest --no-watchman",
    "test:unit:watch": "npm run test:unit -- --watch",
    "test:unit:snapshot": "npm run test:unit -- --updateSnapshot",
    "lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
    "lint:fix": "npm run lint -- --fix",
    "build": "npm run clean && lerna run build",
    "clean": "lerna run clean",
    "clean:modules": "lerna clean --yes",
    "release": "npm run build && lerna publish",
    "start": "npm run storybook"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-backgrounds": "^5.1.9",
    "@storybook/addon-knobs": "^5.1.9",
    "@storybook/addon-storysource": "^5.1.9",
    "@storybook/react": "^5.1.9",
    "babel-jest": "^22.4.1",
    "babel-loader": "^8.0.6",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^4.18.2",
    "eslint-config-particle": "^2.2.1",
    "eslint-plugin-react": "^7.14.2",
    "jest": "^22.4.2",
    "jest-styled-components": "^6.3.3",
    "lerna": "^3.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.3.2"
  }
}

{
  "name": "@my-monorepo/one",
  "description": "react component one",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15",
    "styled-components": ">=3"
  },
  "dependencies": {
    "@my-monorepo/two": "^1.1.0",
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

{
  "name": "@my-monorepo/two",
  "description": "react component two",
  "version": "1.1.0",
  "author": "me",
  "main": "dist/index.js",
  "scripts": {
    "test": "cd ../../ && npm test",
    "build": "babel ./src --out-dir ./dist --ignore test.jsx,stories.jsx --config-file ../../.babelrc",
    "clean": "rm -rf ./dist"
  },
  "peerDependencies": {
    "react": ">=15"
  },
  "dependencies": {
    "create-react-class": "^15.6.3",
    "prop-types": "^15.7.2"
  }
}

组件的./src目录中的所有内容都使用 ESM 样式的导入/导出。 @my-monorepo/one取决于@my-monorepo/two 。 在安装时，lerna _links_ 依赖项（通过lerna bootstrap ）。 所有包都是使用 babel 构建的 - 顶级npm run build命令生成单独的./dist目录及其内容。 npm start首先构建组件，然后启动故事书。

在 v3 下，所有这些都工作得很好——尽管必须先构建组件总是感觉有点尴尬。 我得到_为什么_虽然 - package.json包括"main: "dist/index.js"所以如果没有那个地方故事书会报告@my-monorepo/two在尝试构建时找不到（因为@my-monorepon/one取决于在上面）。 但除此之外，我对设置很满意。

我注意到一件事：当我将"module": "src/index.jsx"添加到组件的package.json文件中时，它摆脱了 webpack 警告，但客户端ReferenceError: exports is not defined仍然存在。 我发现有人报告同样的错误但没有解决方案。

我现在将坚持使用storybook v3，但我会密切关注这个线程并愉快地尝试任何建议:pray::+1:

@busticated听起来你可能有一个可以分享的复制回购我可以看看？

@ndelangen感谢您查看 :pray: 不幸的是，我的 repo 不是公共 atm。 我试图分享上面的相关细节，但与此同时，如果有帮助的话，我可以尝试建立一个工作示例。 不过可能需要一点时间。 否则，很乐意尝试建议等。

@busticated我很乐意看看 monorepo-repro-repo 🙈

很可能是：

• 有些文件通过 babel 解析两次
• 某些文件通过彼此不兼容的加载器进行解析
• 一些文件是使用错误的 babel/ts 配置编译的
• 其他一些monorepo恶作剧

不幸的是， ReferenceError: exports is not defined没有告诉我们任何其他信息，有些事情不是它应该的样子。

@ndelangen好的，这是 repro repo 😂

https://github.com/busticated/storybook-monorepo-repo

你应该能够简单地：

1. git clone
2. npm i && npm start

...并查看故事书尝试在浏览器中加载。 打开开发工具的控制台，你会看到exports错误。

几点注意事项：

• 运行npm run build以测试预发布构建
• 它应该可以跨节点/ npm 版本工作 +/- 一些锁定文件噪音（fwiw，我使用node@8和npm@5与日常工作对齐）
• 最后两次提交将"module": "src/index.jsx"字段添加到packages/*/packge.json文件。 如果你恢复这些，你会看到原来的export 'default' (imported as 'Two') was not found webpack 警告。

我会尽快看看

我正在使用 Lerna，内部包由 Webpack 捆绑输出libraryTarget: 'commonjs2' 。 基于@JasonTheAdams评论的方法对我有用。 我还用 babelrc { "sourceType": "unambiguous" }测试了@0nn0解决方案，它也可以工作，但是它需要在包根目录中有.babelrc 。

一些基本设置 - 也许它会帮助某人😉（Storybook：5.1.10，Lerna：3.16.4，Webpack：4.39.1，Babel：7.5.5）

文件：_lerna_repo/.storybook/webpack.config.js_ - 默认不存在

module.exports = async ({ config }) => {
  const [ mjsjsx ] = config.module.rules;
  const [ babelLoader ] = mjsjsx.use;

  babelLoader.options.sourceType = 'unambiguous'

  return config;
};

文件：_lerna_repo/stories/index.stories.js_

import defaultExport, { namedExport } from '../packages/examplePackage' // works locally
// import defaultExport, { namedExport } from '<strong i="17">@examplePackage</strong>' // works installed
...

文件：_lerna_repo/packages/examplePackage/package.json_

"name": "@examplePackage",
"version": "0.0.1",
"main": "./dist/index.js"
...

文件：_lerna_repo/packages/examplePackage/dist/index.js_ - 由 Webpack 生成

module.exports=function(e){var n={};function...

@ndelangen以上有任何更新吗？

尝试“导入”CommonJS 样式的模块时出现“未定义导出”错误。 按照其他人的建议将 Babel sourceType 选项设置为“明确”就可以了。

这并不是 Storybook 的真正问题，而是卡在两个模块规范中间的结果。

似乎已在 5.2 版中修复

大家好，请问真的修了吗？

我正在使用5.2.1并在新创建的Lerna monorepo中遇到此问题。

在我的情况下发生这种情况： https ://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230

我修改Storybook Webpack config node_modules从Babel编译中排除 "Lerna" packages中的 node_modules。 但我认为问题仍然存在。

我根据@idbartosz的评论关闭了。 您认为它仍然损坏@Lighttree吗？

很抱歉造成混乱，我的答案基于 Lerna 配置，其中所需的包被提升到根目录并作为开发依赖项安装在那里。 所以我没有遇到解析他们的问题node_modules 。

似乎某些用户有一个用例，他们在树中安装了更深的软件包，例如/lib/components/node_modules https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230 和 babel-loader 试图解析它们。

默认情况下，故事书不包括根node_modules ，但也许值得排除所有这些。

https://github.com/storybookjs/storybook/blob/f7367b18ec7d6e077fba5b99da89233b63c4f280/lib/core/src/server/config/utils.js#L5 -L6

https://github.com/storybookjs/storybook/blob/f7367b18ec7d6e077fba5b99da89233b63c4f280/lib/core/src/server/common/babel-loader.js#L1 -L13

@shilman我也面临这个错误， react-motion在lerna mono-repo 存储库中。
@idbartosz解决方案是否解决了这个问题？

@sayjeyhi是的，应该。 这实际上不是Storybook问题。 发生这种情况只是因为当您在monorepo中工作时，您不仅在项目根目录中拥有node_modules ，而且在*/packages中也有，默认情况下不排除它。 （我实际上不确定它不应该，因为它的monorepo组织特定。如果您在 Lerna packages文件夹中将 $ Storybook创建为package #$ 文件夹，您就赢了没有这个问题）

所以就我而言，我只是在.storybook/webpack.config.js中做到了这一点：

const path = require('path');
const glob = require('glob');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    // Make whatever fine-grained changes you need
    const babelLoader = config.module.rules[0];

    /**
     * Exclude pacakge's `node_modules` from Storybook babel processing.
     */
    glob.sync('./packages/*/node_modules').forEach(match => {
        babelLoader.exclude.push(path.resolve(match));
    });

    // Return the altered config
    return config;
};

有没有人真正展示了他们提出的解决方法来修复我创建的示例复制？

https://github.com/storybookjs/storybook/issues/3346#issuecomment -514324312

似乎这会明确回答这个问题。

我可以看到这里有monorepo项目的大多数人都在使用lerna ，我有一个monorepo项目使用yarn workspaces而不是lerna并且在最新版本的storybook + typescript上一切正常，并且没有奇怪的webpack配置，它应该与 babel 一样正常工作。

如果你表现出一些兴趣，我可以创建一个monorepo和一个工作storybook ，我可以在@busticated的文件中看到，一些脚本以错误的顺序运行并且一些依赖项在不正确的package.json ，我并不是说这会导致问题，但它可能会。

@pixelate

我可以在@busticated的文件中看到，一些脚本以错误的顺序运行，一些依赖项位于不正确的 package.json 中

你可以说得更详细点吗？

另外，请记住，我有一个运行故事书v3的示例 repo 的 _working_ 版本，如此处所述https://github.com/storybookjs/storybook/issues/3346#issuecomment -513397002

@pixeleate你介意分享你的工作回购吗？

我可以看到这里有monorepo项目的大多数人都在使用lerna ，我有一个monorepo项目使用yarn workspaces而不是lerna并且在最新版本的storybook + typescript上一切正常，并且没有奇怪的webpack配置，它应该与 babel 一样正常工作。

如果你表现出一些兴趣，我可以创建一个monorepo和一个工作storybook ，我可以在@busticated的文件上看到，是一些脚本以错误的顺序运行，而 some@ 依赖项是在不正确的package.json中，我并不是说这会导致问题，但它可能会。

babelConfig.exclude.push(/node_modules/);在运行start-storybook时为我解决了这个问题，但是在运行build-storybook的输出时我得到了相同的exports is not defined错误。

编辑：通过删除storybook-addon-jsx解决。

@busticated我打开了一个带有修复程序的 PR：
https://github.com/busticated/storybook-monorepo-repo/pull/1

有一些不正确的进口是我认为的主要问题。

@jacobrask我想在故事书的核心中改变它。 但我担心如果我们在小版本中更改它会造成严重破坏。

@shilman我认为我们应该改变它，但它应该是一个主要版本的凹凸

@ndelangen

我打开了一个带有修复程序的 PR

谢谢！

有一些不正确的进口是我认为的主要问题

嗯。 是的。 没有设置eslint对我来说是正确的😂🤦‍♂

综上所述，似乎一旦您考虑了错误的变量名称并更新@storybook/addon-backgrounds使用情况-就像我在master ( 1 , 2 , 3 , 4 ) 上所做的那样-唯一突出的变化是使用纱线。

我对么？

编辑：这是一个清理分支，仅包含yarn所需的更改👉 https://github.com/busticated/storybook-monorepo-repo/commit/4fb2cac0f05b65a5983f121b92a7c2d7438d8857

yarn 工作空间会将所有依赖项提升到根目录，这将解决大量问题。

在我的 PR 中： https ://github.com/storybookjs/storybook/pull/8822 我对故事书进行了更改，以默认支持排除 MULTIPLE node_modules 文件夹。

正如那里详述的那样，我非常害怕在次要版本中推出该更改，@shilman 也是如此。 我们决定最好将其保留到 6.0。

yarn 工作空间会将所有依赖项提升到根目录，这将解决大量问题。

假设你使用纱线😉

对故事书进行更改以默认支持排除 MULTIPLE node_modules 文件夹

这是根本原因吗？ 在本地应用更改似乎无法解决我的问题。

我在浏览器的控制台中得到以下信息：

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

...我猜这有点不同..？ 还有一个你经常看到的错误，但总是有不同的解决方案🤦‍♂ _/me 对 babel 和 webpack 的大方向皱眉_

我非常害怕在次要版本中推出这种更改，@shilman 也是如此。 我们决定最好将其保留到 6.0。

哦，是的，我听到了——这些东西都不容易。 非常感谢您在这里和其他地方所做的工作 - 故事书（甚至是 v3）是一个非常有用的工具 :pray::clap::clap::clap::+1:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

这很可能是由 Webpack 使用其 ESM 包装器包装 CommonJS 模块引起的。 如果 Webpack 在模块中看到import的任何用法，它将使用 ESM 包装器。 它通常由以下任一原因引起：

1. 在源代码中混合和匹配 ESM 和 CJS
2. Babel 将 ESM 助手注入 CJS 模块

为了避免第二种情况，您需要将 Babel 的sourceType设置为"unambiguous"以强制它首先检查模块类型。

https://github.com/i-like-robots/broken-webpack-bundle-test-case

更新：我的原始评论隐藏在上面，但这是我们用来解决多个 monorepo 项目中这些问题的基本配置：

const excludePaths = [/node_modules/, /dist/]

module.exports = ({ config }) => {
  // Use real file paths for symlinked dependencies do avoid including them multiple times
  config.resolve.symlinks = true

  // HACK: extend existing JS rule to ensure all dependencies are correctly ignored
  // https://github.com/storybooks/storybook/issues/3346#issuecomment-459439438
  const jsRule = config.module.rules.find((rule) => rule.test.test('.jsx'))
  jsRule.exclude = excludePaths

  // HACK: Instruct Babel to check module type before injecting Core JS polyfills
  // https://github.com/i-like-robots/broken-webpack-bundle-test-case
  const babelConfig = jsRule.use.find(({ loader }) => loader === 'babel-loader')
  babelConfig.options.sourceType = 'unambiguous'

  // HACK: Ensure we only bundle one instance of React
  config.resolve.alias.react = require.resolve('react')

  return config
}

@i-like-robots 使用sourceType = 'unambiguous'有什么缺点？

感谢您发布解决方法！

我将使用它来改进对 monorepo 的支持： https ://github.com/storybookjs/storybook/pull/8822

（6.0.0 功能）

也许不相关，但由于我的自定义babel.config.js ，我遇到了这个exports is not defined问题，阅读https://storybook.js.org/docs/configurations/custom-babel-config/解决了我的特殊问题问题。

@qrosmeli感谢您的提示。 你救了我的一天！ 🚀

哈扎！！ 我刚刚发布了https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0 ，其中包含引用此问题的 PR #8822。 今天升级来试试吧！

你可以在@next NPM 标签上找到这个预发布版本。

关闭这个问题。 如果您认为还有更多工作要做，请重新打开。

[更新] - 我们必须从这条规则中排除 node_modules 否则它会破坏构建

我已经通过在故事书 main.js 文件中添加此规则来解决它

let rules = [{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: /dist/, //Include dist folder as well to parse using babel loader in order to resolve exports not defined error
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      ["@babel/preset-env", {
        modules: "commonjs"
      }]
    ]
  }
}]

除此之外，您可能还需要禁用 dist 文件夹的 eslint 验证，因此，您可以使用以下脚本

  webpackFinal: config => {

    //Find eslint loader rule from webpack config
    let eslintRule = config.module.rules.find(rule => {
      if (rule && rule.use) {
        return rule.use.some(use => use.loader.match('eslint-loader'))
      }
    });

    //Exclude validations of dist folder contents
    eslintRule.exclude = /dist/;

    return {
      ...config,
      module: {
        rules: [
          ...rules,
          eslintRule,
          ...config.module.rules
        ]
      }
    }
  }

谢谢@ashvin777 ，就像一个魅力：wink：

嘿@aperkaz ，我已更新规则以排除node_modules ，我发现故事书在开发模式下正常启动，但由于此更改而中断生产模式。 所以我不得不排除node_modules才能修复。 您可以从我上面更新的评论中获取最新信息。

我遇到了完全相同的问题，对我来说，解决方案是在 babel.config.js 上从使用transform-es2015-modules-commonjs切换到@babel/plugin-transform-modules-commonjs babel.config.js 。

前

module.exports = {
    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
    plugins: [
        'transform-es2015-modules-commonjs',
        '@babel/plugin-proposal-class-properties'
    ]
};

后

module.exports = {
    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
    plugins: [
        '@babel/plugin-transform-modules-commonjs',
        '@babel/plugin-proposal-class-properties'
    ]
};

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

我在这个问题上花了一天的时间，我已经有了sourceType: 'unambigous' 。

就我而言，它没有链接到要忽略的node_modules文件夹，因为它是旁边的相对文件。

对我有用的解决方法是强制modules: 'cjs'为@babel/preset-env选项。

我也有这个问题@storybook/react@next ，我的最终解决方案是手动添加 babel 插件@babel/plugin-transform-modules-commonjs ，而 @babel/preset-env 上的@babel/preset-env debug: true选项我看到它已经被使用了......我不明白，但它有效。

编辑：这不是一个解决方案，因为它失去了使用 webpack 的 ESM 模块的好处。 我只需要为故事书构建强制转换为 cjs。

:tada: 我的.storybook/.babelrc ::tada:

{
  "extends": "../.babelrc",
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"
  ]
}