Storybook: 오류: 내보내기가 정의되지 않았습니다.

터미널에서 export 'MatrixEffect' was not found in '../dist/index' 를 받고 있습니다. 그러나 일반 노드 런타임에서 모듈을 가져올 수 있습니다(사용할 수는 없지만 적어도 가져올 수 있다는 것은 알고 있습니다).

아직 공식 문서가 없기 때문에 도움이 될 수 있습니다. https://github.com/storybooks/storybook/issues/3270

이것은 여전히 ​​작동하지 않습니다 ...

lerna 프로젝트에서 원사 작업 공간을 켠 후 스토리북에서 동일한 오류 메시지와 함께 문제가 발생했습니다. 나는 이것이 패키지 로딩 문제로 인한 것이라고 생각합니다. 추가 조사 중입니다.

같은 문제가 있는 것 같습니다.

문제를 제대로 이해했다면 .js에서 .ts 파일을 해결하는 데 문제가 있습니까? (하지만 dist 에서 구성 요소를 가져오는 이유를 이해하지 못합니다.)

확장 스토리북 webpack.config의 resolve.extensions 에 .ts / .tsx 를 추가해야 할까요?

@igor-dv 아니요, JS를 사용합니다. 어쨌든, 변수 식별자( variable to Variable )를 변경하면 어떻게든 작동합니다.

TypeScript를 사용하지 않고 바닐라 JS만 사용하는 이 오류가 발생합니다.

.storybook webpack.config.js 에서 babel loader를 제거했는데 이제 제대로 작동합니다. 나는 Typescript를 사용하지 않습니다.

브라우저에서 exports is not defined 를 얻었지만 터미널에서 `"export 'default'('[ComponentName]'로 가져옴)를 '@[namespace]/[에서 찾을 수 없습니다. 패키지 이름]'"

• 르나 사용하기
• 스토리북 3.4.7
• 내부 종속성이 없는 구성 요소에 대해 모든 것이 정상입니다.
• project/packages 의 다른 패키지에 종속된 모듈을 가져오려고 하면 오류가 표시됩니다.
• 내 빌드 스크립트를 실행 중이므로 패키지의 common-js 버전을 가져오려고 합니다.

내부 종속성의 package.json 기본 구성을 빌드되지 않은 소스로 변경하면 모든 것이 작동합니다.

그래서 스토리북의 webpack 설정에 문제가 있고 cjs를 es 모듈 코드로 가져오는 것, 아니면 뭔가 ...

내 수정

그래서 나는 실수로 내 빌드의 ES 모듈 버전을 가리키는 package.json "module" 필드를 삭제했음을 깨달았습니다. 다시 추가하면 모든 것이 다시 작동합니다. 여전히 스토리북은 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-알파.2"
"react" "^16.4.0"

참고: 이 솔루션은 다른 종류의 모듈에서 작동합니다. https://babeljs.io/docs/en/next/plugins#modules

나에게 이 문제는 4.0.0.alpha에 babel-loader를 포함하도록 최근 변경된 사항으로 인해 발생합니다. 기본 서버 웹팩 구성에는 commonjs 컴파일(패키지, 작업 공간)이 포함될 수 있습니다.
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, plain 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 문제를 몇 번 겪었고 이전에 다른 사람들이 제안한 바벨 구성을 재정의하여 이 문제를 해결했습니다.

그러나 최근에 이것을 다시 조사하기 시작했고 기본 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 옵션이 preset-env 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. 패키지가 심볼릭 링크되는 경우(예: 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;
};

우리는 ru가 그것을 고칠 때 같은 문제가 있습니까?

새로 설치할 때 이 오류가 발생합니다. 원인이 무엇인지에 대한 단서가 없습니다( 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 에 들어갈 것입니다. 하신 일과 비슷하다고 생각합니다.

내가 생각하는 일은 다음과 같습니다.

문제 는 하위 프로젝트(예: ./lib/components/node_modules ) 내의 node_modules 파일이 babel에 의해 컴파일되고 있다는 것입니다. 이미 NPM으로 배송된 파일이며 컴파일할 필요가 없습니다. 어떤 경우에는 babel이 파일을 구문 분석하는 방법과 관련하여 혼란스러운 문제가 발생할 수 있습니다.

내 접근 방식은 node_modules 폴더 내의 파일을 컴파일하지 않도록 babel-loader 에 지시하는 것입니다. 기본적으로 ./node_modules 를 무시하므로 하위 프로젝트의 node_modules 내부 를 컴파일합니다. 그래서 exclude 목록에 몇 가지 경로를 추가합니다.

당신의 접근 방식은 babel의 sourceType 감지를 사용하여 파일을 구문 분석하는 방법을 알려주도록 babel-loader 를 구성하는 것입니다. 이것은 기본적으로 babel의 잘못된 구문 분석 파일을 해결합니다. 그러나 babel은 여전히 ​​컴파일할 필요가 없는 파일에서 실행 중이므로 원하는 것인지 모르겠습니다.

나는 전문가가 아니므로 내 말을 한 알의 소금으로 받아들이지 만 비슷한 문제를 스스로 해결 한 것으로 이해합니다.

@skeet 의 제안(https://github.com/storybooks/storybook/issues/3346#issuecomment-459308703)을 적용한 후 한 패키지를 몇 가지 다른 패키지의 종속성(피어 또는 개발자가 아님)으로 참조하기 시작했을 때 문제가 반환되었습니다. .

@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가 컴파일되는 것을 원하지 않았다면 처음부터 패키지 종속성을 설치하지 않았을 것입니다.

이것은 모두 babel + webpack이 CommonJS와 ES6 모듈을 인식하는 능력에 달려 있는 것 같습니다. 완벽하지 않은 것 같습니다. "module": 필드를 하위 패키지의 package.json 에 추가하면 패키지가 이에 접근하는 가장 안전한 방법인 ES6 모듈을 사용한다는 것을 babel에 명시적으로 알립니다.

관심을 가져주셔서 감사합니다!

여기에서 차임하고 싶습니다. 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 구성은 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 _links_ 종속성( lerna bootstrap 을 통해). 모든 패키지는 babel을 사용하여 빌드됩니다. 최상위 npm run build 명령은 개별 ./dist 디렉토리와 그 내용을 생성합니다. npm start 는 먼저 구성 요소를 빌드한 다음 스토리북을 시작합니다.

v3에서는 이 모든 것이 잘 작동했지만 구성 요소를 먼저 빌드해야 하는 것이 항상 약간 어색하게 느껴졌습니다. 그래도 _이유는 - package.json 가 "main: "dist/index.js" 를 포함하므로 스토리북이 없으면 빌드를 시도할 때 @my-monorepo/two 를 찾을 수 없다고 보고할 것입니다( @my-monorepon/one 에 따라 다름 그 위에). 그러나 그렇지 않으면 설정에 만족했습니다.

내가 알아 차린 한 가지 : 구성 요소의 package.json 파일에 "module": "src/index.jsx" 를 추가했을 때 webpack 경고는 제거되었지만 클라이언트 측 ReferenceError: exports is not defined 은 남아 있었습니다. 동일한 오류를 보고했지만 해결 방법이 없는 사람을 찾았습니다.

지금은 스토리북 v3를 계속 사용하겠지만 이 스레드를 계속 주시하고 기꺼이 제안을 시도할 것입니다 :pray::+1:

@busticated 는 내가 볼 수 있는 공유할 수 있는 복제 저장소가 있는 것처럼 들립니다.

@ndelangen 살펴봐 주셔서 감사합니다 :기도: 불행히도 내 저장소는 공개 atm이 아닙니다. 위의 관련 세부 정보를 공유하려고 했지만 그 동안 도움이 되는 경우 작업 예제를 작성하려고 할 수 있습니다. 조금 걸릴 수 있습니다. 그렇지 않으면 제안 등을 시도하게 되어 기쁩니다.

@busticated 나는 monorepo-repro-repo를 살펴보는 것을 기쁘게 생각합니다 🙈

다음과 같을 가능성이 있습니다.

• 일부 파일은 babel을 통해 두 번 구문 분석됩니다.
• 일부 파일은 서로 호환되지 않는 로더를 통해 구문 분석됩니다.
• 일부 파일은 잘못된 babel/ts 구성을 사용하여 컴파일됩니다.
• 다른 모노레포 속임수

불행히도 ReferenceError: exports is not defined 는 우리에게 다른 것을 알려주지 않습니다. 무언가가 원래대로가 아닙니다.

@ndelangen ok, 여기 재현 레포가 있습니다 😂

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

간단하게 다음을 수행할 수 있어야 합니다.

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

...그리고 브라우저에서 로드하려는 스토리북을 보십시오. 개발 도구 콘솔을 열면 exports 오류가 표시됩니다.

몇 가지 메모:

• npm run build 를 실행하여 사전 게시 빌드를 테스트합니다.
• 노드/ npm@5 버전에서 작동해야 합니다 node@8 +/- 일부 잠금 파일 노이즈
• 마지막 두 커밋은 "module": "src/index.jsx" 필드를 packages/*/packge.json 파일에 추가합니다. 되돌리면 원래 export 'default' (imported as 'Two') was not found webpack 경고가 표시됩니다.

최대한 빨리 보도록 할게요

저는 Lerna를 사용하고 있으며 내부 패키지는 libraryTarget: 'commonjs2' 출력과 함께 Webpack에 의해 번들로 제공됩니다. @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 옵션을 "unambiguous"로 설정하면 트릭을 수행했습니다.

이것은 실제로 Storybook의 문제가 아니며 두 가지 모듈 사양의 중간에 갇힌 결과입니다.

버전 5.2에서 수정된 것 같습니다.

안녕하세요 여러분, 실제로 수정되었습니까?

5.2.1 를 사용하고 있으며 새로 생성된 Lerna monorepo 에 이 문제가 있습니다.

제 경우에는 다음과 같습니다. https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230

Babel 컴파일에서 "Lerna" packages 의 node_modules Storybook Webpack config 를 수정했습니다. 하지만 문제는 여전히 있다고 생각합니다.

@idbartosz 님 의 댓글에 따라 문을 닫았습니다. @Lighttree 가 여전히 고장난 것 같습니까?

혼란을 드려 죄송합니다. 필요한 패키지가 루트로 호이스트되어 거기에 dev 종속성으로 설치되는 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 in lerna mono-repo 저장소에서 이 오류에 직면하고 있습니다.
@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에서도 잘 작동해야 합니다.

약간의 관심을 보이면 monorepo 를 storybook 로 만들 수 있습니다. @busticated 의 파일에서 일부 스크립트가 잘못된 순서로 실행되고 일부 종속성이 잘못된 package.json , 이것이 문제를 일으키는 것은 아니지만 문제가 될 수 있습니다.

@pixelate

@busticated 의 파일에서 일부 스크립트가 잘못된 순서로 실행되고 일부 종속성이 잘못된 package.json에 있음을 볼 수 있습니다.

더 자세하게 얘기해 주 시겠어요?

또한 https://github.com/storybookjs/storybook/issues/3346#issuecomment -513397002에 언급된 대로 스토리북 v3 을 실행하는 예제 리포지토리의 _working_ 버전이 있음을 명심하십시오.

@pixelateate 작업 리포지토리를 공유하시겠습니까?

monorepo 프로젝트가 있는 대부분의 모든 사람들이 lerna 를 사용하고 있음을 알 수 있습니다. lerna 대신 yarn workspaces 를 사용하는 monorepo 프로젝트가 있습니다. lerna 및 모든 것이 최신 버전의 storybook + typescript 에서 잘 작동하고 이상한 webpack 구성 없이 babel에서도 잘 작동해야 합니다.

관심을 보이면 monorepo 를 storybook 로 만들 수 있습니다. @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 를 설정하지 않은 것이 옳습니다 😂🤦‍♂

즉, 일단 잘못된 변수 이름을 설명하고 @storybook/addon-backgrounds 사용법을 업데이트한 것 같습니다. master ( 1 , 2 , 3 , 4 )에 대해 수행한 것처럼 - 유일하게 눈에 띄는 변경 사항은 실을 사용합니다.

나 맞아?

편집: 여기에 yarn 에 필요한 변경 사항만 포함된 정리된 분기가 있습니다. 👉 https://github.com/busticated/storybook-monorepo-repo/commit/4fb2cac0f05b65a5983f121b92a7c2d7438d8857

원사 작업 공간은 루트에 대한 모든 종속성을 끌어올려 수많은 문제를 해결할 것입니다.

내 PR에서 https://github.com/storybookjs/storybook/pull/8822 기본적으로 MULTIPLE node_modules 폴더 제외를 지원하도록 스토리북을 변경합니다.

거기에 자세히 설명되어 있듯이 저는 마이너 릴리스에서 해당 변경 사항을 롤링하는 것이 매우 두렵고 @shilman도 마찬가지입니다. 6.0까지 유지하는 것이 좋습니다.

원사 작업 공간은 루트에 대한 모든 종속성을 끌어올려 수많은 문제를 해결할 것입니다.

원사를 사용한다고 가정하면 😉

기본적으로 MULTIPLE node_modules 폴더 제외를 지원하도록 스토리북 변경

그것이 근본 원인인가? 변경 사항을 로컬로 적용해도 문제가 해결되지 않는 것 같습니다.

내 브라우저의 콘솔에 다음이 표시됩니다.

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

...어느게 좀 다른 것 같은데..? 항상 볼 수 있지만 항상 다른 솔루션이 있는 또 다른 오류 🤦‍♂ _/babel과 webpack의 일반적인 방향에 대해 눈살을 찌푸립니다_ 😬

나는 마이너 릴리스에서 그 변경 사항을 롤아웃하는 것이 매우 두렵고 @shilman도 마찬가지입니다. 6.0까지 유지하는 것이 좋습니다.

오 예, 당신의 말을 듣습니다. 이 모든 것은 결코 쉬운 일이 아닙니다. 여기와 다른 곳에서 당신이 하는 모든 일에 대해 대단히 감사합니다 - Storybook(심지어 v3)은 놀랍도록 유용한 도구입니다 :pray::clap::clap::clap::+1:

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

이것은 Webpack이 CommonJS 모듈을 ESM 래퍼로 래핑하기 때문에 발생했을 가능성이 큽니다. Webpack은 모듈에서 import 가 사용된 경우 ESM 래퍼를 사용합니다. 일반적으로 다음 중 하나로 인해 발생합니다.

1. 소스 코드에서 ESM 및 CJS 혼합 및 일치
2. ESM 도우미를 CJS 모듈에 주입하는 Babel

두 번째 경우를 피하려면 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 기능)

관련이 없을 수도 있지만 https://storybook.js.org/docs/configurations/custom-babel-config/ 를 읽고 내 사용자 정의 babel.config.js 때문에 이 exports is not defined 문제가 발생했습니다. 문제.

@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 플러그인 @babel/plugin-transform-modules-commonjs 을 추가하는 반면 @babel/preset-env 에는 debug: true 옵션을 사용하는 것입니다. 나는 그것이 이미 사용된 것을 본다... 나는 이해하지 못하지만 작동한다.

편집: 이것은 webpack과 함께 ESM 모듈의 이점을 상실하기 때문에 솔루션이 아닙니다. 스토리북 빌드에 대해서만 강제로 cjs로 변환해야 합니다.

:tada: 내 .storybook/.babelrc : :tada:

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