Storybook: エラー：エクスポートが定義されていません

ターミナルでexport 'MatrixEffect' was not found in '../dist/index'を取得しています。 ただし、モジュールはプレーンノードランタイムでインポートできます（ofcは使用できませんが、少なくともインポートできることはわかっています）。

公式のドキュメントがまだないため、これが役立つ場合があります： https ：//github.com/storybooks/storybook/issues/3270

これはまだ機能していません...

lernaプロジェクトでyarnワークスペースをオンにした後、ストーリーブックで同じエラーメッセージが表示される問題が発生しました。 これはパッケージの読み込みの問題が原因であると思われます。 さらに調査します。

同じ問題があるようです。

私が問題を正しく理解している場合、.jsから.tsファイルを解決することに問題がありますか？ （ただし、コンポーネントをdistからインポートする理由はわかりません）

拡張ストーリーブックwebpack.configのresolve.extensionsに.ts / .tsxを追加する必要があるかもしれません。

@ igor-dvいいえ、JSを使用しています。 とにかく、変数識別子（ variableからVariable ）を変更すると、どういうわけか機能します。

TypeScriptを使用せずにこのエラーが発生します。バニラJSだけです。

.storybookフォルダーのwebpack.config.jsからbabelローダーを削除しましたが、正常に動作するようになりました。 私はTypescriptを使いません。

私はこれに遭遇しています。ブラウザではexports is not definedを取得しますが、ターミナルでは `" export'default '（' [ComponentName] 'としてインポート）が' @ [namespace] / [に見つかりませんでしたパッケージ名]'"

• lernaを使用する
• ストーリーブック3.4.7
• 内部依存関係がなく、コンポーネントはすべて問題ありません
• project/packages内の別のパッケージに依存するモジュールをインポートしようとすると、エラーが表示されます
• ビルドスクリプトを実行しているので、common-jsバージョンのパッケージをプルしようとしています。

内部依存関係のpackage.jsonメイン構成をビルドされていないソースに変更すると、すべてが機能します

したがって、storybookのwebpack設定とcjsのesモジュールコードへのインポートに問題があります...

私の修正

そのため、ビルドのESモジュールバージョンを指すpackage.json "module"フィールドを誤って削除し、それを追加し直すと、すべてが再び機能することに気付きました。 それでもストーリーブックはcjsバージョンをプルできるはずですが、私の問題は解決しました🤷🏽‍♂️

これは、v4.0.0-alpha.20とbabel7.0.0でまだ発生しています。

ここで同じ@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#
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どうやってこれを解決しましたか？

@ 0nn0https ：//github.com/storybooks/storybook/issues/3346#issuecomment-425516669このアドバイスに従ってください:)

stotybook-4.1.4、Lernaプロジェクト、React 16.7.0、プレーンJSでも同じ問題が発生しています。 ストーリーブックで動作-4.0.12

4.1.4でも同じエラーが発生しましたが、4.0.10に戻り、正常に動作します（typescriptなし）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プロパティはRegExpであると想定していたので、奇妙に見えると思いました。 プロジェクトの構造上、実際には多くのnode_modulesフォルダーがあることに気付いたので、この行をRegExp（ /node_modules/ ）に更新してみました。これで修正されました。

これにより、すでにトランスパイルされたモジュールのトランスパイルが回避されます。特に、$ preset-envのuseBuiltinsオプションによる$ core-jsポリフィルの挿入（ useBuiltinsオプションの削除または設定）が回避されます。ポリフィルを必要としないランタイムを対象とする環境も、この問題を回避するのに役立ちます。）

したがって、この問題を引き起こすいくつかの異なる問題が発生しています。

1. node_modulesフォルダーの依存関係は、Babelによって意図せずにトランスパイルされる可能性があります
2. useBuiltinsオプションは、モジュールタイプに対して間違った形式でcore-jsポリフィルをコードに挿入する可能性があります（https://github.com/babel/babel/issues/7463およびhttps：//を参照） github.com/babel/babel/issues/9187）
3. パッケージがシンボリックリンクされている場合（モノレポなど）、ポイント1を回避するために、さらに慎重に踏む必要があります。

残念ながら、既存の除外オプションを拡張するのは簡単ではありませんが、可能です。

この問題を回避する方法についての情報を使用して、この問題の縮小テストケースを作成しました。 必要に応じてバベルに問題を提出します。

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;
};

私たちは同じ問題を抱えています、ruがそれを修正しようとしているとき？

新規インストールでこのエラーが発生します。 これを引き起こしている原因についての手がかりはありません（おそらくcreate-react-appのセットアップとこれの間の$ .babelrcと競合していますか？）。

.babelrcファイルに次の行を追加することで問題を修正できました。

"sourceType": "unambiguous"

このオプションの詳細： https ：//babeljs.io/docs/en/options#sourcetype
このオプションは、Babel7以降でのみ使用できます。

人々の問題が何であるかを完全に理解せずにこれを運転するだけです（謝罪！）-これは、おそらくより簡単な方法で、この問題を回避する私のwebpack構成からのスニペットです：

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

@tmeasday提案について詳しく教えていただけますか？つまり、そのコードをどこに配置するか。

ストーリーブックは素晴らしいですが、このエラーは断続的でひどいものです。 このエラーが発生し始める理由について、韻や理由を見つけることができないようです。 コンポーネントをいじってからブームになります。実際に変更を加えることなく、すべてが機能し始めます。 しかし、私はこれを機能させるために1時間立ち往生していて、なぜこれが壊れているのか最も霧深い考えがありません。

多くの人に影響を与えているようで、目を見張るようなこの問題を調べてください。

以下を含む.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バベルの問題に要約されるようです。 .babelrcファイルを追加しようとしましたが（@ 0nn0で提案されているように）、変更するのではなく、babel構成全体が置き換えられたようで、さらに問題が発生しました。

@JasonTheAdams上記で書いたコードスニペットは、 .storybook/webpack.config.js入ります。 それはあなたがやったことと似ていると思います。

これが私が起こっていると思うことです：

問題は、サブプロジェクト内のnode_modules （例： ./lib/components/node_modules ）内のファイルがbabelによってコンパイルされていることです。 これらはすでにNPMに出荷されているファイルであり、コンパイルする必要はありません。 場合によっては、これにより、おそらくbabelがファイルを解析する方法に関して、紛らわしい問題が発生します。

私のアプローチは、 node_modulesフォルダー内のファイルをコンパイルしないようにbabel-loaderに指示することです。 デフォルトでは./node_modulesを無視するため、サブプロジェクトのnode_modules内でコンパイルされます。 そこで、 excludeリストにいくつかのパスを追加します。

あなたのアプローチは、ファイルを解析する方法を指示するためにbabelのsourceType検出を使用するようにbabel-loaderを構成することです。 これは基本的に、ファイルの解析ミスを回避します。 ただし、babelはコンパイルする必要のないファイルで実行されているので、それが必要かどうかわかりません。

私は専門家ではないので、一粒一粒の言葉で言いますが、それは私自身も同様の問題に取り組んできたという私の理解です。

@skeetの提案（https://github.com/storybooks/storybook/issues/3346#issuecomment-459308703）を適用した後、1つのパッケージを他のいくつかの依存関係（ピアや開発者ではない）として参照し始めたときに問題が返されました。

@ryanflorenceの修正（https://github.com/storybooks/storybook/issues/3346#issuecomment-415982589）のように、 moduleフィールドを依存関係のpackage.jsonに入れるとうまくいきました。

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

@tmeasday了解しました。 私はこの問題に頭を悩ませ始めています。 トリッキーなのは、私の状況では、子node_modulesをコンパイルすることを実際に_do_したいということです。これは、コンポーネント自体を開発し、それを別個のパッケージとして扱う場所だからです。

@ jcousins-ynapに反映されているように、@ skeetの提案がおそらくここでの最良の解決策だと思います。 Storybookに、サブパッケージの処理方法を想定させたくありません（つまり、node_modulesを無視します）。 サブモジュールnode_modulesをコンパイルしたくない場合は、そもそもパッケージの依存関係をインストールしていなかった可能性があります。

CommonJSとES6モジュールを認識するbabel + webpackの機能にすべてがかかっているようですが、これは完璧ではないようです。 "module":フィールドをサブパッケージのpackage.jsonに追加すると、パッケージがES6モジュールを使用していることを明示的に通知します。これは、これにアプローチする最も安全な方法です。

ご清聴ありがとうございました！

こちらもチャイムしたいです。 Storybook 5、Babel 7.4（core-js 3を使用）、TypeScript 3.4、およびモノレポを使用します。 これらの提案のほとんどは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構成がStorybookの構成と100％互換性がないためですが、独自の構成は互換性があります。

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プラグインに@babel/plugin-transform-modules-commonjsを追加すると役立ちました： 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は依存関係を_リンク_します（ lerna bootstrapを介して）。 すべてのパッケージはbabelを使用して構築されています-トップレベルのnpm run buildコマンドは、個々の./distディレクトリとその内容を生成します。 npm start最初にコンポーネントを構築し、次にストーリーブックを開始します。

v3では、これらすべてが問題なく機能しましたが、最初にコンポーネントをビルドする必要があるのは常に少し厄介だと感じていました。 私は_why_を取得します- package.jsonには"main: "dist/index.js"が含まれているので、それがないと、ストーリーブックはビルドしようとしたときに@my-monorepo/twoが見つからなかったと報告します（ @my-monorepon/oneは依存するため）その上に）。 それ以外の場合は、セットアップに満足しました。

私が気づいたことの1つは、コンポーネントのpackage.jsonファイルに"module": "src/index.jsx"を追加すると、webpackの警告が削除されましたが、クライアント側のReferenceError: exports is not definedは残っていました。 同じエラーを報告しているが解決策がない人を見つけました。

今のところストーリーブックv3を使い続けるつもりですが、このスレッドを監視し、提案を喜んで試してみます：pray :: + 1：

@busticatedは、共有できる複製リポジトリがあるように聞こえます。

@ndelangenご覧いただきありがとうございます：pray：残念ながら私のリポジトリは公開されていません。 私は上記の関連する詳細を共有しようとしましたが、それまでの間、それが役立つ場合は、実用的な例を作成することを試みることができます。 少し時間がかかるかもしれません。 それ以外の場合は、提案などを試してみてください。

@ busticatedmonorepo -repro-repoを見て喜んでいます🙈

それは可能性が高いです：

• 一部のファイルは、babelを介して2回解析されます
• 一部のファイルは、相互に互換性のないローダーを介して解析されます
• 一部のファイルは、間違ったbabel / ts構成を使用してコンパイルされています
• 他のいくつかのモノレポシェナニガン

残念ながら、 ReferenceError: exports is not definedはそれ以外のことは何も教えてくれません。何かが、想定どおりではありません。

@ndelangenわかりました、これが再現リポジトリです😂

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を使用して日中のジョブを調整しました）
• 最後の2つのコミットは、 "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が必要です。

いくつかの基本的なセットアップ-多分それは誰かを助けるでしょう😉（ストーリーブック：5.1.10、レルナ：3.16.4、ウェブパック：4.39.1、バベル：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スタイルのモジュールを「インポート」しようとすると、「エクスポートが定義されていません」というエラーが発生しました。 他の人が提案したように、BabelsourceTypeオプションを「明確」に設定するとうまくいきました。

これはStorybookの実際の問題ではなく、2つのモジュール仕様の途中で立ち往生している結果です。

バージョン5.2で修正されているようです

こんにちはみんな、それは実際に修正されていますか？

5.2.1を使用していますが、新しく作成されたLerna monorepoでこの問題が発生します。

私の場合、これは起こっています： https ：//github.com/storybookjs/storybook/issues/3346#issuecomment -475437230

Storybook Webpack configを変更して、「Lerna」 packagesのnode_modules ＃$をBabelコンパイルから除外しました。 しかし、問題はまだそこにあると思います。

@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私もこのエラーに直面しています。 lernaモノリポジトリにreact-motionがあります。
@idbartoszソリューションは問題を修正しましたか？

@sayjeyhiええ、そうすべきです。 これは実際にはStorybookの問題ではありません。 これは、 monorepoで作業しているときに、プロジェクトルートだけでなく*/packagesにもnode_modulesがあるために発生します。これは、デフォルトでは除外されていません。 （ 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を使用していることがわかります。私は、$ lernaではなくyarn workspacesを使用するmonorepoプロジェクトを持っています。 lernaとすべてが最新バージョンのstorybook + typescriptで正常に動作しており、奇妙なwebpack構成がなければ、babelでも正常に動作するはずです。

興味を示したら、$ storybookが機能するmonorepoを作成できます。 @ busticatedのファイルを見ると、一部のスクリプトが間違った順序で実行され、一部の依存関係が間違ったpackage.json 、それが問題を引き起こしていると言っているわけではありませんが、問題が発生している可能性があります。

@pixeleate

@busticatedのファイルを見ると、一部のスクリプトが間違った順序で実行され、一部の依存関係が正しくないpackage.jsonに含まれていることがわかります。

もっと具体的にできますか？

また、 https： //github.com/storybookjs/storybook/issues/3346#issuecomment -513397002に記載されているように、ストーリーブックv3を実行しているサンプルリポジトリの_working_バージョンがあることを覚えておいてください。

@pixeleate作業リポジトリを共有していただけませんか？

monorepoプロジェクトを使用しているほとんどの人がlernaを使用していることがわかります。私は、$ lernaではなくyarn workspacesを使用するmonorepoプロジェクトを持っています。 lernaとすべてが最新バージョンのstorybook + typescriptで正常に動作しており、奇妙なwebpack構成がなければ、babelでも正常に動作するはずです。

興味を示したら、$ storybookが機能するmonorepoを作成できます。 @ busticatedのファイルを見ると、一部のスクリプトが間違った順序で実行され、一部の@依存関係が間違った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 😂🤦‍♂を設定しないのは正しいです

とはいえ、悪い変数名を考慮して$＃$ 1 @storybook/addon-backgroundsの使用法を更新すると、$＃$ 2 master （ 1、2、3、4 ）で行ったように、唯一の未解決の変更は糸を使用します。

私は正しいですか？

編集：これは、 yarnに必要な変更のみを含むクリーンアップされたブランチです👉https：//github.com/busticated/storybook-monorepo-repo/commit/4fb2cac0f05b65a5983f121b92a7c2d7438d8857

ヤーンワークスペースは、すべての依存関係をルートに引き上げます。これにより、多くの問題が解決されます。

私のPR： https ：//github.com/storybookjs/storybook/pull/8822デフォルトで複数のnode_modulesフォルダーの除外をサポートするようにストーリーブックに変更を加えました。

そこに詳述されているように、私はマイナーリリースで変更されることをかなり恐れています。@ shilmanもそうです。 6.0まで保持する方が良いと判断しました。

ヤーンワークスペースは、すべての依存関係をルートに引き上げます。これにより、多くの問題が解決されます。

糸を使用すると仮定します😉

デフォルトで複数のnode_modulesフォルダーの除外をサポートするようにストーリーブックに変更を加えます

それが根本的な原因ですか？ ローカルで変更を適用しても、問題は解決しないようです。

ブラウザのコンソールに次のように表示されます。

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

...これは少し違うと思います..？ いつも目にするもう1つのエラーですが、常に異なる解決策があります🤦‍♂_ / meは、babelとwebpackの一般的な方向に眉をひそめます_😬

マイナーリリースで変更が行われるのはかなり怖いです。@ shilmanもそうです。 6.0まで保持する方が良いと判断しました。

そうそう、あなたの言うことを聞きます-このようなことはどれも簡単なことではありません。 ここや他の場所で行っているすべての作業に感謝します-ストーリーブック（v3でも）は驚くほど役立つツールです：pray :: clap :: clap :: clap :: + 1：

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

これは、WebpackがCommonJSモジュールをESMラッパーでラップしていることが原因である可能性があります。 モジュールでimportの使用が検出された場合、WebpackはESMラッパーを使用します。 通常、次のいずれかが原因です。

1. ソースコードでのESMとCJSの混合と照合
2. ESMヘルパーをCJSモジュールに注入するBabel

2番目のケースを回避するには、BabelのsourceTypeを"unambiguous"に設定して、最初にモジュールタイプをチェックするように強制する必要があります。

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

更新：私の元のコメントは上に隠されていますが、これは複数のモノレポプロジェクトでこれらの問題を解決するために使用している基本構成です：

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ヒントをありがとう。 あなたは私の日を救った！ 🚀

万歳!! この問題を参照するPR＃8822を含むhttps://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0をリリースしました。 今すぐアップグレードしてお試しください！

このプレリリースは@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に切り替えることでした。

前

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フォルダーにリンクされていませんでした。

私にとって有効な回避策は、 @babel/preset-envに対してオプションmodules: 'cjs'を強制することです。

@storybook/react@nextでもこの問題が発生します。最終的な解決策は、 @babel/preset-envにdebug: trueオプションを使用しながら、手動でbabelプラグイン@babel/plugin-transform-modules-commonjsを追加することでした。すでに使用されているようですが…わかりませんが動作します。

編集：これは、webpackを使用したESMモジュールの利点を失うため、解決策ではありません。 ストーリーブックのビルドに対してのみ、cjsへの変換を強制する必要があります。

：tada：私の.storybook/.babelrc ：： tada：

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