Storybook: Dukungan Webpack 4?

Buku cerita menggunakan webpack sebagai ketergantungan langsung. Jadi Anda tidak dapat mengganti versinya di pihak Anda. Sebagai gantinya, Anda dapat melakukan fork repo kami dan mencoba memperbarui paket yang sesuai ke versi beta. Jika semuanya berjalan dengan baik, kami akan dapat melakukan peningkatan segera setelah stabil

Ada yang sudah melakukan ini?

Saya akan melakukan itu, dan itu akan menjadi perubahan besar dalam buku cerita. Masalahnya adalah konfigurasi webpack khusus mungkin berisi plugin, dan plugin yang ditargetkan untuk webpack 4 sering kali (jika tidak selalu) tidak kompatibel dengan webpack 3

Bagus, terima kasih banyak!

Saat ini rusak karena meskipun buku cerita secara eksplisit membutuhkan webpack==3.11.0 dan mendapatkan salinan pribadi Webpack 3 di subdirektori node_modules , itu juga membutuhkan dotenv-webpack .

Sekarang dotenv-webpack daftar ketergantungan rekan webpack==^1 || ^2 || ^3 || ^4 yang membuat npm pertimbangkan itu ide yang baik untuk menginstalnya di node_modules utama di sebelah Webpack 4 daripada berikutnya ke Webpack 3 di bawah @storybook/react/node_modules .

Sekarang segera setelah buku cerita memuat dotenv-webpack secara bergantian menyebabkan Webpack 4 dipanggil.

Saya percaya hal di atas disebabkan oleh bug di npm : https://github.com/npm/npm/issues/19944

Daftar periksa hal-hal yang memblokir migrasi di pihak kami sekarang dipindahkan ke https://github.com/storybooks/storybook/pull/3148

Saya mendapatkan kesalahan di bawah ini saat menjalankan Buku Cerita dengan proyek menggunakan Webpack 4;

node_modules/webpack/lib/DefinePlugin.js:42
        compiler.hooks.compilation.tap(
                       ^

TypeError: Cannot read property 'compilation' of undefined

Ini mencegah kami melanjutkan dengan Webpack 4

Anda dapat berlangganan https://github.com/storybooks/storybook/pull/3148 pembaruan

@TomFoyster Saya memiliki masalah yang sama, untuk sementara mengatasinya dengan menggunakan yarn alih-alih npm install . Tampaknya memperbaikinya dalam kasus saya.

Dirilis sebagai v4.0.0-alpha.0

@Hypnosphi setelah memperbarui ke v4.0.0-alpha.0 , kompilasi buku cerita saya terhenti dan macet di plugin compat , tidak pernah melewati 95%:

⚡️ frontend@feature/data-integration ~ npm run storybook

> [email protected] storybook /Users/will/projects/frontend
> start-storybook -p 6006 -s ./assets

info @storybook/react v4.0.0-alpha.0
info
info => Loading static files from: /Users/will/projects/frontend/assets .
info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
 10% building modules 2/2 modules 0 activeℹ ｢wdm｣: wait until bundle finished:
(node:85321) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 95% emitting unnamed compat plugin

Sebelum memutakhirkan ke versi alfa, saya mengalami masalah @TomFoyster .

Saya masih bisa mengompilasinya sekarang dengan menggunakan yarn alih-alih npm , tetapi versi terbaru tampaknya tidak menyelesaikan masalah.

v4.0.0-alpha.0 rusak, harap gunakan alfa yang lebih baru (mis v4.0.0-alpha.3 )

Lakukan rm -rf node_modules dan kemudian gunakan yarn install . Ini bekerja dengan storybook v3.4.1 dan webpack v4.6.0

khusus benang memecahkan masalah dengan menginstal ketergantungan buku cerita secara terpisah.

Saya juga mencoba v4.0.0-alpha.3 tetapi @storybook/[email protected] sepertinya tidak berhasil.

Kesalahan mana yang Anda dapatkan @ankibalyan ? Addon ini tampaknya berfungsi dengan baik dalam contoh resmi kami

Solusi @danmakenoise bekerja untuk saya, tampaknya baik-baik saja dengan benang alih-alih npm.

FYI jika ada orang lain yang mencoba menginstal dengan npm alih-alih yarn , v4.0.0-alpha.3 tampaknya berfungsi sekarang 👍

Mendapatkan kesalahan yang sama seperti TomFoyster pada 4.6.0 dan ruang kerja benang

@AlastairTaft versi buku cerita mana dalam kasus Anda?

Ups maaf, saya tidak menggunakan buku Cerita, ini adalah satu-satunya hit Google untuk kesalahan tersebut.

Pembaruan: Untuk kasus saya, saya mendapatkan kesalahan TomFoyster saat menjalankan webpack di konsol. Sebaliknya, menjalankan npx webpack menyiasatinya.

Cukup konyol bahwa yarn adalah ketergantungan untuk ini.

EDIT: npm i -g @storybook/cli@alpha memperbaiki masalah ini 👍

Mengonfirmasi bahwa menggunakan @storybook/cli@alpha dan @storybook/react@alpha (jika menggunakan React) membantu memperbaiki masalah memuat buku cerita.

@Hypnosphi Saya mencoba menggunakan v4.0.0-alpha.3 dengan webpack ^4.8.1 .
Saya mendapatkan kesalahan yang disebutkan di bawah ini
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
Ada petunjuk?

@anujparikh saya bisa saja salah, tapi saya yakin sekarang diganti dengan

const { createDefaultWebpackConfig } 
 = require('@storybook/core/dist/server/config/defaults/webpack.config.js');

Apakah @storybook/react tidak digunakan lagi karena @storybook/core sekarang? @pollen8

Kami mengalami masalah yang sama yang @TomFoyster sebutkan di https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 ketika mencoba menggunakan webpack.DefinePlugin() di konfigurasi Webpack untuk Buku Cerita, tetapi mengalami banyak masalah baru yang tidak dapat kami selesaikan saat meningkatkan ke v4.0.0-alpha.14 .

Solusi yang agak buruk adalah meminta ketergantungan Webpack 3 Storybook di .storybook/webpack.config.js alih-alih ketergantungan Webpack 4 kami:

// .storybook/webpack.config.js

const webpack = require('webpack');
// ^ Causes the TypeError: Cannot read property 'compilation' of undefined

const webpack = require('../node_modules/@storybook/core/node_modules/webpack');
// ^ Works (for us...)

@hanshenrik -- Bisakah Anda menunjukkan contoh file webpack.config.js yang lengkap? Saya tidak yakin bagaimana baris Anda cocok dengan konfigurasi saya:

const path = require("path");

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test:  /\.(ts|tsx)$/,
    use: [
      require.resolve("awesome-typescript-loader"),
      require.resolve("react-docgen-typescript-loader"),
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "style-loader", "css-loader", "sass-loader"
    ]
  });

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

  return config;
};

@adyz Tentu!

const path = require('path');
const webpack = require('../node_modules/@storybook/core/node_modules/webpack');

module.exports = {
  module: {
    rules: [
      // ...
    ],
  },

  plugins: [
    new webpack.DefinePlugin({ // <-- Uses DefinePlugin from the imported webpack library
      HELLO: 'world',
    }),
  ],

  resolve: {
    // ...
  },
};

Anda hanya perlu ini jika Anda perlu menggunakan plugin dari perpustakaan webpack. Kami membutuhkannya untuk menggunakan DefinePlugin .

Saya mengalami masalah yang sama seputar DefinePlugin, tetapi file .storybook/webpack.config.js saya tetap tidak memiliki referensi ke DefinePlugin, referensi tersebut hanya terletak di webpack.config.js proyek utama saya. Saya tidak yakin mengapa Storybook akan mengakses file utama ketika memilikinya sendiri di dalam folder .storybook.

Saya telah mencoba memutakhirkan ke paket @storybook/ react@alpha dan saya melihat daftar besar masalah lain ketika mencoba memulai server. Salah satu yang lebih menarik:

ERROR in ./node_modules/@company/styled-theme/build/index.js Module build failed (from ../node_modules/babel-loader/lib/index.js): TypeError: Plugin 2 specified in "C:\\sources\\demoapp\\node_modules\\@company\\styled-theme\\.babelrc" was expected to return a function but returned "undefined" at Function.normalisePlugin (C:\sources\demoapp\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:15)

Saya telah memverifikasi bahwa menukar proyek yang sama ke Benang memungkinkan semuanya bekerja tanpa masalah.

Bagaimana cara menerapkan perbaikan ini ke proyek Vue-CLI 3?

@davek1979 npm install @storybook/vue@alpha berhasil!

Kemarin saya memverifikasi ulang perbaikan Benang, lalu menghapus folder node_modules saya dan mencoba npm install . Kesalahan pada DefinePlugin kembali. Saya menghapus folder node_modules saya lagi, dan mengubah versi menjadi @storybook/ react@alpha lalu redid npm install . Itu berhasil. Versi alpha yang sepertinya bekerja untuk saya adalah v4.0.0-alpha.16

@anujparikh @ pollen8 yang membutuhkan konfigurasi default kami secara langsung sudah usang, Anda akan melihat pesan penghentian saat menggunakannya. Cara yang benar adalah dengan menggunakan argumen ketiga: https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster tidak, @storybook/core adalah perpustakaan internal yang dibagikan oleh buku cerita untuk kerangka kerja yang berbeda. Anda masih harus menggunakan @storybook/react

@hanshenrik

mengalami banyak masalah baru yang tidak dapat kami selesaikan saat meningkatkan ke v4.0.0-alpha.14

Bisakah Anda mencobanya lagi dengan 4.0.0-alpha.20 dan berbagi masalah yang Anda hadapi jika ada?

Mencoba dengan 4.0.0-alpha.20 dan webpack4.10.2 , DefinePlugin tidak berfungsi.

@nerdmax dapatkah Anda memberikan beberapa contoh reproduksi? Kami menggunakan plugin ini sendiri dan berfungsi untuk kami

@Hypnosphi Terima kasih atas tanggapan Anda. Maaf, saya baru saja memeriksanya, ini berfungsi dengan baik dengan 4.0.0-alpha.20 . Proyek saya menggunakan ruang kerja benang dan sepertinya buku cerita diinstal di root node_module. Setelah menghapus folder itu dan menginstal ulang semua paket, itu berfungsi.

Saya dapat menjalankan ini setelah memutakhirkan ke "@storybook/react": "^4.0.0-alpha.21" dengan "webpack": "^4.17.2"

Saya juga mengalami masalah dengan masalah DefinePlugin. Saya sudah mencoba perbaikan alfa yang direkomendasikan di atas tanpa hasil. Saya mengikuti tutorial ini di luar kotak: https://www.valentinog.com/blog/react-webpack-babel/ , yang dengan versi terbaru dari semua dependensi yang terdaftar berfungsi dengan baik.

getstorybook berfungsi dengan baik, tetapi npm run storybook melempar pengecualian yang tampaknya banyak ditemui orang lain dalam satu atau lain bentuk.

[email protected] buku cerita C:\work\reactProject\
buku cerita awal -p 6006

info @storybook/react v3.4.11
informasi
exec: fatal: Bukan repositori git (atau direktori induk mana pun): .git

exec: fatal: Bukan repositori git (atau direktori induk mana pun): .git

info => Memuat .babelrc custom khusus
info => Memuat konfigurasi webpack khusus (mode perpanjangan).
C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
compiler.hooks.compilation.tap(
^

TypeError: Tidak dapat membaca 'kompilasi' properti yang tidak ditentukan
di DefinePlugin.apply (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
di Compiler.apply (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
di webpack (C:\work\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
di export.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
di buildDev (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
di Obyek.(C:\work\reactProjectnode_modules\@storybook\react\dist\server\index.js:23:22)
di Module._compile (module.js:652:30)
di Object.Module._extensions..js (module.js:663:10)
di Module.load (module.js:565:32)
di tryModuleLoad (module.js:505:12)
di Function.Module._load (module.js:497:3)
di Module.require (module.js:596:17)
di membutuhkan (internal/modul.js:11:18)
di Obyek.(C:\work\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
di Module._compile (module.js:652:30)
di Object.Module._extensions..js (module.js:663:10)
npm ERR! kode ELIFECYCLE
npm ERR! salah 1
npm ERR! [email protected] buku cerita: start-storybook -p 6006
npm ERR! Keluar dari status 1
npm ERR!
npm ERR! Gagal pada skrip buku cerita [email protected] .
npm ERR! Ini mungkin bukan masalah dengan npm. Kemungkinan ada output logging tambahan di atas.

Saya ingin mencoba Buku Cerita, tetapi sepertinya saya digagalkan dengan menggunakan html-webpack-plugin dalam contoh ini.

Saya dapat menjalankan ini setelah memutakhirkan ke "@storybook/react": "^4.0.0-alpha.21" dengan "webpack": "^4.17.2"

@ridhoq - dapatkah Anda membagikan config.js dan webpack.config.js Anda untuk buku cerita. Saya memiliki versi yang sama, dan saya masih menerima kesalahan di bawah ini:

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)

Juga, apakah Anda menggunakan npm atau benang?

Tentu - https://Gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. Saya tidak tahu seberapa membantu ini bagi Anda karena kami mungkin memiliki persyaratan build yang berbeda. Saya menggunakan npm untuk proyek ini

Saya memiliki masalah yang sama setelah memutakhirkan create-react-app ke 2.0.3 dan masalah ini diselesaikan dengan memutakhirkan @storybook/react ke ^4.0.0-alpha.21 .

Saya membuat versi yang berfungsi dengan versi (terbaru) berikut:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

menambahkan beberapa Addon juga, semoga contoh ini akan membantu seseorang.

e../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15) di __webpack_require__ (bootstrap:724) di fn (bootstrap:101) di Module../ node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1) di __webpack_require__ (bootstrap:724) di fn (bootstrap:101) di Module. ./node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1) di __webpack_require__ (bootstrap:724) di fn (bootstrap:101) di Object../node_modules/@storybook/components

@relaxed-tomato apakah Anda menyelesaikan ini? Saya memiliki masalah yang sama. Terima kasih

Saya membuat versi yang berfungsi dengan versi (terbaru) berikut:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

menambahkan beberapa Addon juga, semoga contoh ini akan membantu seseorang.

Terima kasih, itu berhasil untuk saya. Tetapi saya juga harus menginstal babel-core dan babel-loader .

Saya membuat versi yang berfungsi dengan versi (terbaru) berikut:

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

menambahkan beberapa Addon juga, semoga contoh ini akan membantu seseorang.

Terima kasih, itu berhasil untuk saya. Tetapi saya juga harus menginstal babel-core dan babel-loader .

Sama disini. Saya harus menggunakan versi babel core & loader berikut:

"babel-core": "^6.26.3",
"babel-loader": "^7.0.4",

Saya tidak sengaja mengalami masalah ini ketika saya memutakhirkan ke webpack terbaru. Versi 4.20.2 berfungsi dengan baik.

"@babel/cli": "7.1.2", // babel 7
"webpack": "4.20.2", // webpack 4
"@storybook/react": "^3.4.11", // storybook 3

Punya kesalahan juga. Menginstal webpack 4.20.2 secara manual seperti yang disebutkan di atas berhasil untuk saat ini.