Storybook: Kesalahan: ekspor tidak ditentukan

Saya mendapatkan export 'MatrixEffect' was not found in '../dist/index' di terminal. Tetapi saya dapat mengimpor modul hanya dalam runtime simpul biasa (tidak dapat menggunakannya, tetapi setidaknya saya tahu itu dapat diimpor).

ini mungkin membantu karena kami belum memiliki dokumen resmi: https://github.com/storybooks/storybook/issues/3270

Ini masih belum berhasil...

Saya baru saja mengalami masalah dengan pesan kesalahan yang sama di buku cerita setelah menyalakan ruang kerja benang di proyek lerna. Saya menduga ini disebabkan oleh masalah pemuatan paket. Menyelidiki lebih lanjut.

Sepertinya saya memiliki masalah yang sama.

Jika saya memahami masalahnya dengan benar, ada masalah dengan penyelesaian file .ts dari file .js? (Meskipun, saya tidak mengerti mengapa Anda mengimpor komponen Anda dari dist )

Mungkin Anda harus menambahkan .ts / .tsx ke resolve.extensions di webpack.config buku cerita yang diperluas?

@igor-dv Tidak, saya menggunakan JS. Bagaimanapun, mengubah pengidentifikasi variabel ( variable menjadi Variable ) berfungsi, entah bagaimana.

Saya mendapatkan kesalahan ini tanpa menggunakan TypeScript, hanya vanilla JS

Saya menghapus babel loader dari webpack.config.js di folder .storybook dan sekarang berfungsi dengan baik. Saya tidak menggunakan TypeScript sekalipun.

Saya mengalami ini, di browser saya mendapatkan exports is not defined tetapi di terminal saya mendapatkan `"export 'default' (diimpor sebagai '[ComponentName]') tidak ditemukan di '@[namespace]/[ nama paket]'"

• Menggunakan lerna
• Buku cerita 3.4.7
• Semuanya baik-baik saja untuk komponen saya tanpa ketergantungan internal
• Jika saya mencoba mengimpor modul dengan ketergantungan pada paket lain di project/packages kesalahan muncul
• Saya menjalankan skrip build saya, jadi ini mencoba menarik versi paket js umum.

Jika saya mengubah konfigurasi utama package.json ketergantungan internal ke sumber yang tidak dibuat, semuanya berfungsi

Jadi ada yang salah dengan konfigurasi webpack buku cerita dan mengimpor cjs ke dalam kode modul es, atau sesuatu ...

Perbaikan saya

Jadi saya menyadari bahwa saya tidak sengaja menghapus bidang "modul" package.json saya yang menunjuk ke versi modul ES dari build saya, menambahkannya kembali membuat semuanya berfungsi kembali. Masih sepertinya buku cerita harus dapat menarik versi cjs, tetapi masalah saya terpecahkan ️

Ini masih terjadi pada saya di v4.0.0-alpha.20 dengan babel 7.0.0

Sama di sini @tony. Saya menggunakan Flow, meskipun.

@ryanflorence Saya memiliki pengaturan lerna yang sama persis dan masalah ekspor untuk buku cerita.
Saya memiliki paket yang memperlihatkan versi UI-Elements yang dibangun.
Maaf, tetapi bisakah Anda memberikan detail lebih lanjut ketika Anda mengatakan, "module" field that pointed to the ES module version of my builds, adding that back in makes everything work again.

masalah ini dapat diperbaiki dengan menambahkan plugin yang benar di file .babelrc , karena file tsconfig dikonfigurasi untuk menghasilkan modul yang kompatibel dengan commonjs , kita perlu menggunakan plugin yang tepat

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

Inilah yang saya miliki di file .babelrc saya dan semuanya berfungsi dengan baik, saya memiliki file tsconfig saya dengan opsi dan nilai yang persis sama.

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

Catatan: Solusi ini berfungsi untuk jenis modul lain https://babeljs.io/docs/en/next/plugins#modules

Bagi saya masalah ini disebabkan oleh perubahan terbaru untuk memasukkan babel-loader di 4.0.0.alpha. Konfigurasi webpack server default dapat menyertakan kompilasi commonjs Anda (paket, ruang kerja): 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

Bagi saya, perbaikannya adalah mengganti deklarasi plugin default dengan webpack.dev.js khusus:

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',
},

Menghilangkan include juga memperbaiki masalah dan tidak memiliki efek samping bagi saya.

Saya pikir saya mengerti apa yang terjadi.

Apa yang dikatakan @psychobolt adalah 100% benar.

Saya pikir kami bisa melakukan yang lebih baik untuk pengguna monorepo, buat konfigurasi webpack default kami sehingga hal di atas tidak terjadi.

Saya pikir menghapus include: includePaths, akan berhasil, tetapi pertanyaannya adalah berapa biaya kinerjanya..

Siapa yang punya saran bagus tentang cara terbaik untuk menyelesaikan ini?

Kami juga menemukan masalah ini dan butuh lebih dari setengah hari untuk melawan konfigurasi untuk mencari tahu apa yang mungkin terjadi. 😢.

@cilice Bagaimana Anda menyelesaikan ini?

@0nn0 dengan mengikuti https://github.com/storybooks/storybook/issues/3346#issuecomment-425516669 saran ini :)

Saya mengalami masalah yang sama dengan stotybook-4.1.4, proyek Lerna, React 16.7.0, JS biasa. Bekerja dengan buku cerita-4.0.12

Saya memiliki kesalahan yang sama pada 4.1.4, saya kembali ke 4.0.10 dan berfungsi dengan baik (tanpa TypeScript) babel-webapck

Menggunakan konfigurasi yang dimodifikasi untuk mengecualikan keluaran yang dikompilasi dari babel-loader akan menghindari masalah ini untuk proyek Lerna atau monorepo dengan paket buku cerita terbaru.

@psychobolt Bisakah Anda memberikan contoh konfigurasi? Terima kasih.

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

Tidak yakin apakah ini akan membantu orang lain, tetapi kami memperbaiki masalah ini dengan menjalankan yang berikut:

npm i react-scripts -D

@skeet Saya bertanya-tanya mengapa buku cerita memiliki pesan

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.

Jadi, setelah menginstal skrip reaksi, sekarang tertulis

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

Kami juga memiliki masalah exports is not defined beberapa kali dan sebelumnya kami telah mengatasinya dengan mengesampingkan konfigurasi Babel seperti yang disarankan oleh orang lain.

Tapi, saya baru-baru ini mulai melihat ini lagi dan saya perhatikan bahwa properti pengecualian untuk aturan JS default sedang diselesaikan ke jalur absolut (di bawah ini adalah console.log() dari konfigurasi Webpack yang dihasilkan):

{
  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']
}

Saya berasumsi bahwa properti exclude seharusnya menjadi RegExp jadi saya pikir itu terlihat aneh! Saya menyadari bahwa karena struktur proyek kami, kami sebenarnya memiliki banyak folder node_modules jadi saya mencoba memperbarui baris ini ke RegExp ( /node_modules/ ) - dan itu memperbaikinya!

Ini menghindari transpiling modul yang telah ditranspilasikan - dan khususnya menghindari opsi useBuiltins dari preset-env dari menyuntikkan core-js polyfills (menghapus opsi atau pengaturan useBuiltins lingkungan untuk menargetkan runtime yang tidak memerlukan polyfill apa pun juga dapat membantu menghindari masalah ini.)

Jadi ada beberapa masalah berbeda yang berperan yang mengakibatkan masalah ini:

1. Dependensi dalam folder node_modules dapat secara tidak sengaja diubah oleh Babel
2. Opsi useBuiltins dapat menyuntikkan core-js polyfill ke dalam kode Anda dalam format yang salah untuk jenis modul (lihat https://github.com/babel/babel/issues/7463 dan https:// github.com/babel/babel/issues/9187)
3. Jika paket sedang disinkronkan (seperti dalam monorepo) maka Anda harus melangkah ekstra hati-hati untuk menghindari poin 1!

Sayangnya tidak mudah untuk memperluas opsi pengecualian yang ada , tetapi itu mungkin !

Saya telah membuat kasus uji yang dikurangi untuk masalah ini dengan informasi tentang cara menghindarinya. Saya akan mengajukan masalah dengan Babel jika perlu.

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

Kami menggunakan buku cerita + lerna + TypeScript. Apa yang dipecahkan bagi kami adalah mencampurkan @i-like-robots dengan @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;
};

Kami memiliki masalah yang sama, kapan ru akan memperbaikinya?

Mendapatkan kesalahan ini pada instalasi baru. Tidak ada petunjuk tentang apa yang menyebabkan ini (mungkin dalam konflik dengan .babelrc antara pengaturan create-react-app 's dan yang ini?).

Saya berhasil memperbaiki masalah dengan menambahkan baris berikut ke file .babelrc :

"sourceType": "unambiguous"

Info lebih lanjut tentang opsi ini: https://babeljs.io/docs/en/options#sourcetype
Percaya bahwa opsi ini hanya tersedia dengan Babel 7 dan lebih tinggi.

Hanya untuk melewati yang satu ini tanpa sepenuhnya memahami apa masalah orang (maaf!) ​​-- inilah cuplikan dari konfigurasi webpack saya yang mengatasi masalah ini, mungkin dengan cara yang lebih sederhana:

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

@tmeasday Bisakah Anda menguraikan saran Anda — yaitu di mana menempatkan kode itu?

Buku cerita luar biasa, tetapi kesalahan ini terputus-putus dan mengerikan. Sepertinya saya tidak dapat menemukan sajak atau alasan mengapa kesalahan ini akan mulai terjadi. Saya akan repot dengan komponen dan kemudian booming, semuanya mulai bekerja tanpa ada perubahan nyata yang dilakukan. Tapi saya sudah terjebak sekarang selama satu jam mencoba untuk membuat ini bekerja dan saya tidak tahu mengapa ini rusak.

Silakan lihat masalah ini yang tampaknya mempengaruhi banyak orang dan merupakan penghenti.

Saya memecahkan masalah dengan membuat file .storybook/weback.config.js yang berisi berikut ini:

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

Sepertinya itu bermuara pada masalah babel sourceType . Saya mencoba menambahkan file .babelrc (seperti yang disarankan oleh @0nn0), tetapi itu tampaknya menggantikan seluruh konfigurasi babel daripada memodifikasinya, menyebabkan masalah lebih lanjut.

@JasonTheAdams potongan kode yang saya tulis di atas akan masuk ke .storybook/webpack.config.js . Saya pikir itu mirip dengan apa yang telah Anda lakukan.

Inilah yang menurut saya sedang terjadi:

Masalahnya adalah bahwa file dalam node_modules di dalam subproyek (misalnya ./lib/components/node_modules ) sedang dikompilasi oleh babel. Mereka adalah file yang telah dikirim ke NPM dan tidak perlu dikompilasi. Dalam beberapa kasus, ini menyebabkan masalah yang membingungkan, mungkin seputar cara babel mem-parsing file.

Pendekatan saya hanya untuk memberitahu babel-loader untuk tidak mengkompilasi file apapun di dalam folder node_modules . Secara default itu akan mengabaikan ./node_modules sehingga akan mengkompilasi hal-hal di dalam node_modules subproyek. Jadi saya menambahkan beberapa jalur ke daftar exclude .

Pendekatan Anda adalah mengonfigurasi babel-loader untuk menggunakan deteksi sourceType babel untuk memberi tahu cara mengurai file. Ini pada dasarnya bekerja di sekitar file salah parsing babel. Namun babel masih berjalan pada file yang tidak perlu dikompilasi, jadi saya tidak tahu apakah itu yang Anda inginkan?

Saya bukan ahli jadi ambil kata-kata saya dengan sebutir garam, tapi itu pemahaman saya setelah mengatasi masalah serupa sendiri.

Setelah menerapkan saran @skeet ( https://github.com/storybooks/storybook/issues/3346#issuecomment-459308703 ) masalah kembali ketika saya mulai mereferensikan satu paket sebagai ketergantungan (bukan rekan atau dev) dari beberapa paket lainnya .

Menempatkan bidang module ke dalam dependensi package.json seperti pada perbaikan @ryanflorence (https://github.com/storybooks/storybook/issues/3346#issuecomment-415982589) berhasil.

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

@tmeasday Mengerti. Aku mulai membungkus kepalaku di sekitar masalah ini. Yang rumit adalah, dalam situasi saya, saya sebenarnya _do_ ingin mengkompilasi anak node_modules karena di situlah saya mengembangkan komponen itu sendiri, memperlakukannya sebagai paket terpisah.

Saya pikir saran @skeet , seperti yang digemakan oleh @jcousins-ynap, mungkin merupakan solusi terbaik di sini. Kami tidak ingin Storybook membuat asumsi tentang bagaimana sub-paket ditangani (yaitu mengabaikan node_modules mereka). Jika seseorang tidak ingin sub-modul node_modules dikompilasi, mereka kemungkinan besar tidak akan menginstal dependensi paket untuk memulai.

Tampaknya semua bermuara pada kemampuan babel + webpack untuk mengenali modul CommonJS vs ES6, yang tampaknya tidak sempurna. Menambahkan bidang "module": ke package.json sub-paket secara eksplisit menginformasikan babel bahwa paket tersebut menggunakan modul ES6, yang merupakan cara paling aman untuk mendekati ini.

Terima kasih atas perhatian Anda untuk ini!

Juga ingin berpadu di sini. Menggunakan Storybook 5, Babel 7.4 (dengan core-js 3), TypeScript 3.4 dan monorepo. Sebagian besar saran ini tidak berfungsi 100%, tetapi sesuatu yang saya sadari berhasil. Sifat monorepos adalah bahwa sebuah paket mengimpor file "buatan" dari paket lain, bukan file sumber, yang benar ketika di lapisan modul registri/node NPM, tetapi dalam pengembangan, cukup mengganggu. Untuk menyiasatinya, saya mendefinisikan alias Webpack yang meneruskan lib/ ke src/ , dan semuanya berfungsi, terutama karena semua kode sekarang ESNext/ESM!

Berikut hacknya:

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

Dan agar Babel + TS berfungsi, saya memilih untuk memutasi babel-loader yang ada daripada menambahkan yang baru, karena konfigurasi Babel lokal saya tidak 100% kompatibel dengan Storybook, tetapi konfigurasi mereka sendiri.

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');

Punya masalah yang sama, juga karena menghapus bidang module .
Menambahkan @babel/plugin-transform-modules-commonjs ke plugin babel membantu, seperti yang dijelaskan dalam komentar ini: https://github.com/storybooks/storybook/issues/3346#issuecomment -423719241

@elado bekerja!

benar-benar terhalang oleh yang satu ini juga. menghabiskan ~2 hari terakhir tidak berhasil mencoba semua saran dari utas ini dan juga beberapa saran saya sendiri. tidak ada yang berhasil

akhirnya, saya pergi dengan:

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

...saat memulai buku cerita dan...

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)

...saat melihat ui buku cerita (http://localhost:9001). cerita saya tidak dimuat.

fwiw, inilah pengaturan saya:

├── .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"
  }
}

semua yang ada di dalam direktori ./src komponen menggunakan impor/ekspor gaya ESM. @my-monorepo/one tergantung pada @my-monorepo/two . pada waktu pemasangan, lerna _links_ ketergantungan (melalui lerna bootstrap ). semua paket dibuat menggunakan babel - perintah npm run build tingkat atas menghasilkan direktori ./dist individu dan isinya. npm start pertama membangun komponen, lalu memulai buku cerita.

di bawah v3 semua ini bekerja dengan baik - meskipun selalu terasa agak canggung karena harus membangun komponen terlebih dahulu. saya mendapatkan _why_ meskipun - package.json termasuk "main: "dist/index.js" jadi tanpa itu di tempat buku cerita akan melaporkan bahwa @my-monorepo/two tidak dapat ditemukan ketika mencoba membangun (karena @my-monorepon/one tergantung di atasnya). tetapi sebaliknya, saya senang dengan pengaturannya.

satu hal yang saya perhatikan: ketika saya menambahkan "module": "src/index.jsx" ke file package.json komponen, itu menghilangkan peringatan webpack tetapi sisi klien ReferenceError: exports is not defined tetap ada. saya menemukan seseorang melaporkan kesalahan yang sama tetapi tidak ada resolusi.

saya akan tetap menggunakan buku cerita v3 untuk saat ini tetapi saya akan mengawasi utas ini dan dengan senang hati mencoba saran apa pun :pray::+1:

@busticated terdengar seperti Anda mungkin memiliki repo reproduksi yang dapat Anda bagikan, saya dapat melihatnya?

@ndelangen terima kasih telah melihat :pray: repo saya sayangnya bukan atm publik. saya mencoba membagikan detail yang relevan di atas tetapi sementara itu saya dapat mencoba membuat contoh yang berfungsi jika itu membantu. mungkin memakan waktu sedikit sekalipun. jika tidak, senang mencoba saran, dll.

@busticated Saya akan senang melihat monorepo-repro-repo

Kemungkinan besar:

• beberapa file diuraikan melalui babel dua kali
• beberapa file diuraikan melalui pemuat yang tidak kompatibel satu sama lain
• beberapa file dikompilasi menggunakan konfigurasi babel/ts yang salah
• beberapa kejahatan monorepo lainnya

Sayangnya ReferenceError: exports is not defined tidak memberi tahu kami apa pun selain itu, ada sesuatu yang tidak seperti yang seharusnya.

@ndelangen ok, ini repo repronya 😂

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

Anda harus dapat dengan sederhana:

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

...dan lihat upaya buku cerita untuk memuat di browser. buka konsol alat dev dan Anda akan melihat kesalahan exports .

beberapa catatan:

• jalankan npm run build untuk menguji build prapublikasi
• itu harus bekerja di seluruh versi node/npm +/- beberapa kebisingan file kunci (fwiw, saya menggunakan node@8 dan npm@5 untuk menyelaraskan w/ pekerjaan harian)
• dua komit terakhir menambahkan bidang "module": "src/index.jsx" ke file packages/*/packge.json . jika Anda mengembalikannya, Anda akan melihat peringatan webpack export 'default' (imported as 'Two') was not found asli.

Saya akan mencoba untuk melihat secepatnya

Saya menggunakan Lerna, paket internal dibundel oleh Webpack dengan output libraryTarget: 'commonjs2' . Pendekatan berdasarkan komentar @JasonTheAdams berfungsi untuk saya. Saya juga telah menguji solusi @0nn0 dengan babelrc { "sourceType": "unambiguous" } dan itu juga berfungsi namun memerlukan .babelrc di root paket.

Beberapa pengaturan dasar - mungkin itu akan membantu seseorang (Buku Cerita: 5.1.10, Lerna: 3.16.4, Webpack: 4.39.1, Babel: 7.5.5)

file: _lerna_repo/.storybook/webpack.config.js_ - tidak ada secara default

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

  babelLoader.options.sourceType = 'unambiguous'

  return config;
};

file: _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
...

file: _lerna_repo/packages/examplePackage/package.json_

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

file: _lerna_repo/packages/examplePackage/dist/index.js_ - dihasilkan oleh Webpack

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

@ndelangen Adakah pembaruan di atas?

Saya mendapatkan kesalahan "ekspor tidak ditentukan" ketika mencoba "mengimpor" modul gaya CommonJS. Menyetel opsi Babel sourceType ke "tidak ambigu" seperti yang disarankan oleh orang lain berhasil.

Ini sebenarnya bukan masalah dengan Storybook, melainkan akibat terjebak di tengah dua spesifikasi modul.

Tampaknya diperbaiki di versi 5.2

Hai teman-teman, apakah itu benar-benar diperbaiki?

Saya menggunakan 5.2.1 dan memiliki masalah ini di Lerna monorepo yang baru dibuat.

Dalam kasus saya ini terjadi: https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230

Saya memodifikasi Storybook Webpack config untuk mengecualikan node_modules di "Lerna" packages dari kompilasi Babel . Tapi masalahnya masih ada saya pikir.

Saya tutup berdasarkan komentar @idbartosz . Apakah Anda pikir itu masih rusak @Lighttree ?

Maaf karena membawa kebingungan, saya mendasarkan jawaban saya pada konfigurasi Lerna di mana paket yang diperlukan diangkat ke root dan diinstal di sana sebagai dependensi dev. Jadi saya tidak mengalami masalah mengurai node_modules mereka.

Tampaknya beberapa pengguna memiliki kasus penggunaan di mana mereka telah menginstal paket lebih dalam di pohon seperti /lib/components/node_modules https://github.com/storybookjs/storybook/issues/3346#issuecomment -475437230 dan babel-loader mencoba untuk mengurai mereka.

Secara default buku cerita mengecualikan root node_modules tapi mungkin layak untuk mengecualikan semuanya.

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 Saya menghadapi kesalahan ini juga, dengan react-motion di lerna repositori mono-repo.
apakah solusi @idbartosz memperbaiki masalah?

@sayjeyhi ya, seharusnya. Ini sebenarnya bukan masalah Storybook . Ini terjadi hanya karena ketika Anda bekerja di monorepo , Anda memiliki node_modules tidak hanya di root proyek Anda, tetapi juga di */packages , yang tidak dikecualikan secara default. (Saya sebenarnya tidak yakin bahwa seharusnya tidak, karena monorepo spesifik untuk organisasi. Jika Anda membuat Storybook sebagai package di folder Lerna packages Anda menang tidak memiliki masalah ini)

Jadi untuk kasus saya, saya baru saja melakukan ini di .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;
};

adakah yang benar-benar menunjukkan perbaikan yang diusulkan untuk perbaikan contoh repro yang saya buat?

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

sepertinya itu akan menjawab pertanyaan itu dengan pasti.

Saya dapat melihat bahwa kebanyakan orang di sini dengan proyek monorepo menggunakan lerna , saya memiliki proyek monorepo yang menggunakan yarn workspaces daripada lerna dan semuanya bekerja dengan baik dengan versi terbaru dari storybook + typescript , dan tanpa konfigurasi webpack yang aneh, itu akan bekerja dengan baik juga dengan babel.

Jika Anda menunjukkan minat, saya dapat membuat monorepo dengan storybook yang berfungsi, saya dapat melihat pada file @busticated , apakah beberapa skrip berjalan dalam urutan yang salah dan beberapa dependensi ada di package.json yang salah, saya tidak mengatakan itu menyebabkan masalah tetapi bisa jadi.

@pixeleate

Saya dapat melihat pada file @busticated , beberapa skrip berjalan dalam urutan yang salah dan beberapa dependensi berada di package.json yang salah

bisa lebih spesifik?

juga, perlu diingat bahwa saya memiliki versi _working_ dari contoh repo saya yang menjalankan buku cerita v3 seperti yang disebutkan di sini https://github.com/storybookjs/storybook/issues/3346#issuecomment -513397002

@pixeleate Maukah Anda membagikan repo kerja Anda?

Saya dapat melihat bahwa kebanyakan orang di sini dengan proyek monorepo menggunakan lerna , saya memiliki proyek monorepo yang menggunakan yarn workspaces daripada lerna dan semuanya bekerja dengan baik dengan versi terbaru dari storybook + typescript , dan tanpa konfigurasi webpack yang aneh, itu akan bekerja dengan baik juga dengan babel.

Jika Anda menunjukkan minat, saya dapat membuat monorepo dengan storybook yang berfungsi, saya dapat melihat pada file @busticated , apakah beberapa skrip berjalan dalam urutan yang salah dan dependensi some@ dalam package.json yang salah, saya tidak mengatakan itu menyebabkan masalah tetapi bisa jadi.

babelConfig.exclude.push(/node_modules/); memperbaiki masalah bagi saya saat menjalankan start-storybook , tetapi saya mendapatkan kesalahan exports is not defined yang sama saat menjalankan output dari build-storybook .

Sunting: Diselesaikan dengan menghapus storybook-addon-jsx .

@busticated Saya membuka PR dengan perbaikan:
https://github.com/busticated/storybook-monorepo-repo/pull/1

Ada beberapa impor yang salah yang menurut saya menjadi masalah utama.

@jacobrask Saya ingin mengubahnya di inti buku cerita. Tapi aku takut itu akan mendatangkan malapetaka jika kita mengubahnya dalam rilis kecil.

@shilman Saya pikir kita harus mengubahnya, tetapi itu harus menjadi versi utama bump

@delangen

Saya membuka PR dengan perbaikan

Terima kasih!

Ada beberapa impor yang salah yang menurut saya merupakan masalah utama

hm. ya. melayani saya dengan benar karena tidak mengatur eslint 😂🤦‍♂

itu semua dikatakan, tampaknya setelah Anda memperhitungkan nama variabel yang buruk dan memperbarui penggunaan @storybook/addon-backgrounds - seperti yang saya lakukan pada master ( 1 , 2 , 3 , 4 ) - satu-satunya perubahan yang luar biasa adalah untuk menggunakan benang.

Apakah saya benar?

edit: inilah cabang yang dibersihkan dengan hanya perubahan yang diperlukan untuk yarn https://github.com/busticated/storybook-monorepo-repo/commit/4fb2cac0f05b65a5983f121b92a7c2d7438d8857

ruang kerja benang akan mengangkat semua dependensi ke root, ini akan menyelesaikan banyak masalah.

Dalam PR saya: https://github.com/storybookjs/storybook/pull/8822 Saya membuat perubahan pada buku cerita untuk mendukung mengecualikan MULTIPLE node_modules folder secara default.

Seperti yang dijelaskan di sana, saya sangat takut meluncurkan perubahan itu dalam rilis kecil, dan begitu juga @shilman. Kami telah memutuskan lebih baik untuk menahan itu sampai 6.0.

ruang kerja benang akan mengangkat semua dependensi ke root, ini akan menyelesaikan banyak masalah.

dengan asumsi Anda menggunakan benang

buat perubahan pada buku cerita untuk mendukung mengecualikan MULTIPLE node_modules folder secara default

apakah itu penyebab utamanya? menerapkan perubahan secara lokal sepertinya tidak memperbaiki masalah saya.

saya mendapatkan yang berikut di konsol browser saya:

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

...yang agak berbeda saya kira..? kesalahan lain yang Anda lihat sepanjang waktu tetapi selalu memiliki solusi yang berbeda _/saya mengerutkan kening di arah umum babel dan webpack_

Saya sangat takut meluncurkan perubahan itu dalam rilis kecil, dan begitu juga @shilman. Kami telah memutuskan lebih baik untuk menahan itu sampai 6.0.

oh ya saya mendengar Anda - tidak ada yang mudah. terima kasih banyak untuk semua pekerjaan yang Anda lakukan di sini dan di tempat lain - buku cerita (bahkan v3) adalah alat yang sangat membantu :pray::clap::clap::clap::+1:

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

Ini kemungkinan besar disebabkan oleh Webpack yang membungkus modul CommonJS dengan pembungkus ESM-nya. Webpack akan menggunakan pembungkus ESM jika melihat penggunaan import dalam modul. Ini biasanya disebabkan oleh:

1. Mencampur dan mencocokkan ESM dan CJS dalam kode sumber Anda
2. Babel menyuntikkan pembantu ESM ke dalam modul CJS

Untuk menghindari kasus kedua, Anda harus menyetel sourceType Babel ke "unambiguous" untuk memaksanya memeriksa jenis modul terlebih dahulu.

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

Pembaruan: Komentar asli saya disembunyikan di atas tetapi ini adalah konfigurasi dasar yang telah kami gunakan untuk menyelesaikan masalah ini di beberapa proyek 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 apa kerugian menggunakan sourceType = 'unambiguous' ?

Terima kasih telah memposting solusinya!

Saya akan menggunakan ini untuk meningkatkan dukungan monorepo: https://github.com/storybookjs/storybook/pull/8822

(fitur 6.0.0)

Mungkin tidak terkait, tetapi saya mengalami masalah exports is not defined ini karena kebiasaan saya babel.config.js , membaca https://storybook.js.org/docs/configurations/custom-babel-config/ memecahkan masalah khusus saya masalah.

@qrosmeli Terima kasih atas tipnya. Anda menyelamatkan hari saya! 🚀.

Sabas!! Saya baru saja merilis https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0 yang berisi PR #8822 yang mereferensikan masalah ini. Tingkatkan hari ini untuk mencobanya!

Anda dapat menemukan prarilis ini pada tag NPM @next .

Menutup masalah ini. Silakan buka kembali jika menurut Anda masih ada yang harus dilakukan.

[DIPERBARUI] - Kita harus mengecualikan node_modules dari aturan ini jika tidak maka akan merusak build

Saya telah menyelesaikannya dengan menambahkan aturan ini di file main.js buku cerita

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"
      }]
    ]
  }
}]

Bersamaan dengan ini, Anda mungkin juga perlu menonaktifkan validasi eslint untuk folder dist Anda, jadi untuk itu, Anda dapat menggunakan skrip di bawah ini

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

Terima kasih @ashvin777 , bekerja seperti pesona :wink:

Hai @aperkaz , saya telah memperbarui aturan untuk mengecualikan node_modules , saya menemukan bahwa buku cerita diluncurkan dengan benar dalam mode dev namun rusak dalam mode produksi karena perubahan ini. Jadi saya harus mengecualikan node_modules untuk memperbaikinya. Anda dapat mengambil yang terbaru dari komentar saya yang diperbarui di atas.

Saya memiliki masalah yang sama persis, dan bagi saya solusinya adalah beralih dari menggunakan transform-es2015-modules-commonjs ke @babel/plugin-transform-modules-commonjs pada babel.config.js .

sebelum

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

setelah

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>'

Saya menghabiskan hari untuk masalah ini, saya sudah memiliki sourceType: 'unambigous' .

Bagi saya, itu tidak ditautkan ke folder node_modules untuk diabaikan karena ini adalah file relatif tepat di sebelahnya.

Solusi yang berhasil bagi saya adalah memaksa opsi modules: 'cjs' untuk @babel/preset-env .

Saya juga memiliki masalah dengan @storybook/react@next , solusi terakhir bagi saya adalah menambahkan plugin babel secara manual @babel/plugin-transform-modules-commonjs , sedangkan dengan opsi debug: true pada @babel/preset-env Saya melihat bahwa itu sudah digunakan ... Saya tidak mengerti tetapi berhasil.

EDIT: Ini bukan solusi karena kehilangan manfaat modul ESM dengan webpack. Saya perlu memaksa transformasi ke cjs hanya untuk pembuatan buku cerita.

:tada: .storybook/.babelrc saya : :tada:

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