Storybook: Ошибка: экспорт не определен

Я получаю export 'MatrixEffect' was not found in '../dist/index' в терминале. Но я могу импортировать модуль в простой среде выполнения узла (не могу использовать его, но, по крайней мере, я знаю, что его можно импортировать).

это может помочь, так как у нас пока нет официальных документов: https://github.com/storybooks/storybook/issues/3270

Это все еще не работает...

Я только что столкнулся с проблемой с тем же сообщением об ошибке в сборнике рассказов после включения рабочих областей пряжи в проекте lerna. Я подозреваю, что это вызвано проблемами с загрузкой пакетов. Продолжаем расследование.

Похоже у меня идентичная проблема.

Если я правильно понимаю проблему, есть проблема с разрешением файлов .ts из .js? (Хотя я не понимаю, почему вы импортируете свой компонент из dist )

Может быть, вам следует добавить .ts / .tsx к resolve.extensions в вашем расширенном сборнике рассказов webpack.config?

@igor-dv Нет, я использую JS. Во всяком случае, изменение идентификатора переменной ( variable на Variable ) как-то работает.

Я получаю эту ошибку без использования TypeScript, просто ванильный JS

Я удалил загрузчик babel из webpack.config.js в папке .storybook , и теперь он работает нормально. Я не использую Typescript, хотя.

Я сталкиваюсь с этим, в браузере я получаю exports is not defined , но в терминале я получаю `"экспорт по умолчанию' (импортированный как '[ComponentName]') не найден в '@[namespace]/[ имя пакета]'"

• Использование лерны
• Сборник рассказов 3.4.7
• Все нормально для моих компонентов без внутренних зависимостей
• Если я попытаюсь импортировать модуль с зависимостью от другого пакета в project/packages , появится ошибка
• Я запускаю свои сценарии сборки, поэтому он пытается получить версию пакета с общим js.

Если я изменю основную конфигурацию package.json внутренней зависимости на не встроенный источник, все будет работать

Значит, что-то не так с конфигурацией веб-пакета сборника рассказов и импортом cjs в код модуля es или что-то в этом роде...

Мое исправление

Итак, я понял, что случайно удалил поле «модуль» package.json, которое указывало на версию модуля ES моих сборок, добавив это обратно, чтобы все снова заработало. Все еще кажется, что сборник рассказов должен быть в состоянии вытащить версию cjs, но моя проблема решена 🤷🏽‍♂️

Это все еще происходит для меня в v4.0.0-alpha.20 с babel 7.0.0

То же самое и @tony. Но я использую Flow.

@ryanflorence У меня точно такие же настройки lerna и проблема с экспортом для сборника рассказов.
У меня есть пакет, который предоставляет встроенную версию UI-Elements.
Извините, но не могли бы вы предоставить более подробную информацию, когда вы говорите, "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 .

Для меня проблема вызвана недавними изменениями, включающими babel-loader в 4.0.0.alpha. Конфигурация веб-пакета сервера по умолчанию может включать ваши компиляции 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%.

Я думаю, что мы могли бы сделать лучше для пользователей монорепозитория, сделать нашу конфигурацию веб-пакета по умолчанию, чтобы вышеописанное не происходило.

Я думаю, что удаление include: includePaths, помогло бы, но вопрос в том, какой ценой производительности..

У кого есть хорошее предложение о том, как лучше всего решить эту проблему?

Мы также наткнулись на эту проблему, и потребовалось еще полдня борьбы с конфигами, чтобы понять, что это может быть. 😢

@cilice Как ты это решил?

@0nn0 , следуя https://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 и работает нормально (без машинописного текста) babel-webapck

Использование измененной конфигурации для исключения скомпилированного вывода из babel-loader позволит избежать этой проблемы для проектов Lerna или монорепозитория с последним пакетом сборника рассказов.

@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.

Итак, после установки реагирующих сценариев теперь он говорит

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, как это было предложено другими.

Но недавно я снова начал изучать это и заметил, что свойство exclude для правила JS по умолчанию разрешается в абсолютный путь (ниже console.log() сгенерированной конфигурации Webpack):

{
  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/ ) — и это исправлено!

Это позволяет избежать транспиляции модулей, которые уже были транспилированы, и, в частности, позволяет избежать использования опции 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. Если пакеты связаны символическими ссылками (например, в монорепозитории), вы должны действовать особенно осторожно, чтобы избежать пункта 1!

К сожалению, расширить существующую опцию исключения не очень просто, но возможно !

Я создал сокращенный тестовый пример для этой проблемы с информацией о том, как ее избежать. При необходимости я отправлю вопрос в Babel.

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

Мы используем сборники рассказов + lerna + машинопись. Для нас было решено смешать @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 ее исправит?

Получение этой ошибки при новой установке. Не знаю, что вызывает это (возможно, в конфликте с .babelrc между настройкой create-react-app и этой?).

Мне удалось исправить проблему, добавив следующую строку в файл .babelrc :

"sourceType": "unambiguous"

Дополнительная информация об этой опции: https://babeljs.io/docs/en/options#sourcetype
Поверьте, эта опция доступна только с Babel 7 и выше.

Просто чтобы проехать мимо, не полностью понимая, в чем заключаются проблемы людей (извините!) - вот фрагмент из моей конфигурации веб-пакета, который решает эту проблему, возможно, более простым способом:

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

@tmeasday Не могли бы вы уточнить ваше предложение, например, где разместить этот код?

Сборник рассказов потрясающий, но эта ошибка была прерывистой и ужасной. Кажется, я не могу найти рифму или причину, почему эта ошибка начнет происходить. Я буду возиться с компонентами, а потом бум, все просто начинает работать без каких-либо реальных изменений. Но я застрял в течение часа, пытаясь заставить это работать, и у меня просто нет ни малейшего представления, почему это не работает.

Пожалуйста, рассмотрите эту проблему, которая, кажется, затрагивает многих людей и является препятствием.

Я решил проблему, создав файл .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 анализирует файлы.

Мой подход состоит в том, чтобы просто сказать 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) проблема вернулась, когда я начал ссылаться на один пакет как на зависимость (не одноранговую или dev) нескольких других .

Помещение поля module в зависимость package.json , как в исправлении @ryanflorence (https://github.com/storybooks/storybook/issues/3346#issuecomment-415982589), сделало работу.

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

@tmeasday Понял. Я начинаю ломать голову над этим вопросом. Что сложно, так это то, что в моей ситуации я на самом деле хочу, чтобы он скомпилировал дочерний пакет 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 и монорепозиторий. Большинство этих предложений не сработало на 100%, но кое-что, как я понял, сработало. Сама природа монорепозиториев заключается в том, что пакет импортирует «встроенные» файлы из другого пакета, а не исходные файлы, что верно, когда в слое модуля реестра/узла NPM, но в процессе разработки, это довольно раздражает. Чтобы обойти это, я определил псевдонимы Webpack, которые перенаправляли lib/ на src/ , и все просто заработало, тем более что весь код теперь 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 вместо добавления нового, поскольку моя локальная конфигурация 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)

... при просмотре пользовательского интерфейса сборника рассказов (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 все это работало просто отлично, хотя всегда было немного неловко сначала собирать компоненты. я понимаю _почему_, хотя - package.json включает в себя "main: "dist/index.js" , поэтому без этого сборник рассказов сообщит, что @my-monorepo/two не может быть найден при попытке построить (поскольку @my-monorepon/one зависит в теме). но в остальном я был доволен настройкой.

я заметил одну вещь: когда я добавил "module": "src/index.jsx" в файлы компонентов package.json , он избавился от предупреждения веб-пакета, но на стороне клиента ReferenceError: exports is not defined остался. я нашел кого-то, сообщившего о той же ошибке, но без решения.

пока я собираюсь придерживаться сборника рассказов v3, но я буду следить за этой темой и с радостью попробую любые предложения :pray::+1:

@busticated звучит так, будто у вас может быть репозиторий репродукции, которым вы могли бы поделиться, на который я мог бы взглянуть?

@ndelangen спасибо, что заглянули :pray: к сожалению, мой репозиторий не является общедоступным банкоматом. я попытался поделиться соответствующими деталями выше, но тем временем я могу попытаться создать рабочий пример, если это будет полезно. может занять немного хотя. в противном случае, рад попробовать предложения и т. д.

@busticated Я был бы рад взглянуть на монорепо-репро-репо 🙈

Вполне вероятно, что:

• некоторые файлы анализируются через Babel дважды
• некоторые файлы анализируются через несовместимые друг с другом загрузчики
• некоторые файлы скомпилированы с использованием неправильной конфигурации 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 , чтобы протестировать предварительную сборку
• он должен работать в версиях node / npm +/- некоторый шум файла блокировки (между прочим, я использовал node@8 и npm@5 для согласования с дневной работой)
• последние два коммита добавляют поля $# "module": "src/index.jsx" packages/*/packge.json в файлы packages/*/packge.json. если вы вернете их, вы увидите исходное предупреждение веб-пакета export 'default' (imported as 'Two') was not found .

постараюсь поскорее глянуть

Я использую Lerna, внутренние пакеты связаны Webpack с выводом libraryTarget: 'commonjs2' . Подход, основанный на комментарии @JasonTheAdams, работает для меня. Я также протестировал решение @0nn0 с помощью babelrc { "sourceType": "unambiguous" } , и оно также работает, однако требует наличия .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 значения «однозначный», как было предложено другими, помогло.

На самом деле это не проблема Storybook, а скорее следствие застревания в середине двух спецификаций модулей.

Вроде исправлено в версии 5.2

Привет, ребята, это действительно исправлено?

Я использую 5.2.1 и имею эту проблему во вновь созданном Lerna monorepo .

В моем случае это происходит: https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230

Я изменил Storybook Webpack config , чтобы исключить node_modules в "Lerna" packages из компиляции 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 Я тоже сталкиваюсь с этой ошибкой с react-motion в монорепозитории lerna .
Решение @idbartosz решило проблему?

@sayjeyhi да, так и должно быть. На самом деле это не проблема Storybook . Это происходит только потому, что когда вы работаете в monorepo , у вас есть node_modules не только в корне вашего проекта, но и в */packages , что не исключено по умолчанию. (На самом деле я не уверен, что этого не должно быть, потому что это специфическая организация monorepo . Если вы создадите свою Storybook как package в папке Lerna packages , вы выиграете нет этой проблемы)

Итак, для моего случая я просто сделал это в .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 , я не говорю, что это вызывает проблемы, но это может быть.

@pixeleate

В файлах @busticated я вижу, что некоторые скрипты выполняются в неправильном порядке, а некоторые зависимости находятся в неправильном package.json.

Вы можете быть более конкретным?

Кроме того, имейте в виду, что у меня есть _рабочая_ версия моего примера репозитория с сборником рассказов v3 , как указано здесь https://github.com/storybookjs/storybook/issues/3346#issuecomment -513397002

@pixeleate Не могли бы вы поделиться своим рабочим репозиторием?

Я вижу, что в основном все здесь с проектом monorepo используют lerna , у меня есть проект monorepo , который использует yarn workspaces , а не lerna и все отлично работает с последней версией storybook + typescript , и без странных конфигураций webpack все должно нормально работать и с babel.

Если вы проявите некоторый интерес, я могу создать monorepo с работающим storybook , я вижу в файлах @busticated , что некоторые скрипты выполняются в неправильном порядке, а некоторые@ зависимости в неправильном package.json я не говорю, что это вызывает проблемы, но это может быть.

babelConfig.exclude.push(/node_modules/); исправляет проблему для меня при запуске start-storybook , но я получаю ту же ошибку exports is not defined при запуске вывода из build-storybook .

Редактировать: Решено удалением storybook-addon-jsx .

@busticated Я открыл PR с исправлением:
https://github.com/busticated/storybook-monorepo-repo/pull/1

Было несколько неправильных импортов, которые, я думаю, были главной проблемой.

@jacobrask Я хочу изменить это в ядре сборника рассказов. Но я боюсь, что это вызовет хаос, если мы изменим это в второстепенном релизе.

@shilman Я думаю, мы должны это изменить, но это должно быть обновление основной версии.

@нделанген

Я открыл PR с исправлением

Спасибо!

Было несколько неправильных импортов, которые, я думаю, были главной проблемой.

хм. Да. мне правильно, что я не настроил eslint 😂🤦‍♂

при всем при этом кажется, что после того, как вы учтете неправильные имена переменных и обновите использование @storybook/addon-backgrounds — как я сделал это на master ( 1 , 2 , 3 , 4 ) — единственное незавершенное изменение использовать пряжу.

я прав?

edit: вот очищенная ветка с изменениями, необходимыми для yarn

Yarn workspaces поднимет все зависимости в корень, это решит массу проблем.

В моем PR: https://github.com/storybookjs/storybook/pull/8822 я вношу изменения в сборник рассказов, чтобы по умолчанию поддерживать исключение НЕСКОЛЬКИХ папок node_modules.

Как подробно описано там, я очень боюсь выпускать это изменение в второстепенном выпуске, как и @shilman. Мы решили, что лучше подождать до 6.0.

Yarn workspaces поднимет все зависимости в корень, это решит массу проблем.

при условии, что вы используете пряжу 😉

внесите изменения в сборник рассказов для поддержки исключения НЕСКОЛЬКИХ папок node_modules по умолчанию

это первопричина? локальное применение изменений, похоже, не решает мою проблему.

я получаю следующее в консоли моего браузера:

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

...что немного отличается, я думаю..? еще одна ошибка, которую вы видите все время, но всегда имеет другое решение 🤦‍♂ _/me хмурится в общем направлении babel и webpack_ 😬

Я очень боюсь выпускать это изменение в второстепенном выпуске, как и @shilman. Мы решили, что лучше подождать до 6.0.

о да, я слышу вас - все это никогда не бывает легким. большое спасибо за всю работу, которую вы делаете здесь и в других местах - сборник рассказов (даже версия 3) - удивительно полезный инструмент :pray::clap::clap::clap::+1:

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

Скорее всего, это вызвано тем, что Webpack обертывает модуль CommonJS своей оболочкой ESM. Webpack будет использовать оболочку ESM, если увидит использование import в модуле. Обычно это вызвано:

1. Смешивание и сопоставление ESM и CJS в исходном коде
2. Babel внедряет помощники ESM в модуль CJS

Чтобы избежать второго случая, вам нужно установить 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' ?

Спасибо за публикацию обходного пути!

Я собираюсь использовать это для улучшения поддержки монорепозиториев: https://github.com/storybookjs/storybook/pull/8822 .

(функция 6.0.0)

Возможно, это не связано, но у меня была эта проблема с exports is not defined из-за моего пользовательского babel.config.js , чтение 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"
      }]
    ]
  }
}]

Наряду с этим вам также может потребоваться отключить проверку eslint для вашей папки dist, поэтому для этого вы можете использовать приведенный ниже скрипт.

  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 , чтобы исправить. Вы можете взять последние из моего обновленного комментария выше.

У меня была точно такая же проблема, и для меня решение переключилось с использования 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 , а с опцией debug: true на @babel/preset-env Я вижу, что он уже используется... Я не понимаю, но он работает.

РЕДАКТИРОВАТЬ: это не решение, потому что оно теряет преимущества модулей ESM с webpack. Мне нужно принудительно преобразовать в cjs только для сборки сборника рассказов.

:tada: Мои .storybook/.babelrc : :tada:

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