Storybook: Webpack 4-Unterstützung?

Storybook verwendet Webpack als direkte Abhängigkeit. Sie können also die Version auf Ihrer Seite nicht ersetzen. Stattdessen können Sie unser Repo forken und versuchen, die entsprechenden Pakete auf die Beta-Version zu aktualisieren. Wenn alles gut läuft, können wir das Upgrade durchführen, sobald es stabil ist

Macht das schon jemand?

Ich werde das tun, und es wird eine bahnbrechende Veränderung im Märchenbuch sein. Die Sache ist, dass benutzerdefinierte Webpack-Konfigurationen Plugins enthalten können, und Plugins, die für Webpack 4 vorgesehen sind, sind meistens (wenn nicht immer) nicht abwärtskompatibel mit Webpack 3

Großartig, vielen Dank!

Derzeit ist es defekt, da Storybook zwar ausdrücklich webpack==3.11.0 benötigt und eine private Kopie von Webpack 3 in seinem Unterverzeichnis node_modules erhält, aber auch dotenv-webpack benötigt.

Jetzt listet dotenv-webpack eine Peer-Abhängigkeit von webpack==^1 || ^2 || ^3 || ^4 , was npm dazu bringt, es für eine gute Idee zu halten, es im Haupt- node_modules neben Webpack 4 statt neben Next zu installieren zu Webpack 3 unter @storybook/react/node_modules .

Sobald Storybook jetzt dotenv-webpack lädt, bewirkt es wiederum, dass Webpack 4 aufgerufen wird.

Ich glaube, dass das Obige durch einen Fehler in npm verursacht wird: https://github.com/npm/npm/issues/19944

Die Checkliste der Dinge, die die Migration auf unserer Seite derzeit blockieren, wurde nach https://github.com/storybooks/storybook/pull/3148 verschoben

Ich erhalte den folgenden Fehler, wenn ich Storybook mit einem Projekt mit Webpack 4 ausführe;

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

TypeError: Cannot read property 'compilation' of undefined

Dies hindert uns daran, mit Webpack 4 fortzufahren

Sie können https://github.com/storybooks/storybook/pull/3148 Updates abonnieren

@TomFoyster Ich hatte das gleiche Problem und habe es vorübergehend mit yarn anstelle von npm install umgangen. Scheint es in meinem Fall zu beheben.

Veröffentlicht als v4.0.0-alpha.0

@Hypnosphi nach dem Update auf v4.0.0-alpha.0 bleibt meine Storybook-Zusammenstellung stehen und hängt am Plugin compat , wobei sie nie über 95 % hinausgeht:

⚡️ 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

Vor dem Upgrade auf den Alpha-Build stieß ich auf das Problem von @TomFoyster .

Ich kann es jetzt immer noch kompilieren, indem ich yarn anstelle von npm verwende, aber der neueste Build scheint das Problem nicht behoben zu haben.

v4.0.0-alpha.0 war defekt, bitte verwenden Sie ein neueres Alpha (z. B. v4.0.0-alpha.3 )

Führen Sie rm -rf node_modules und verwenden Sie dann yarn install . Es funktioniert mit storybook v3.4.1 und webpack v4.6.0

speziell Garn löst das Problem, indem es die Storybook-Abhängigkeit separat installiert.

Ich habe auch v4.0.0-alpha.3 ausprobiert, aber @storybook/[email protected] scheint damit nicht zu funktionieren.

Welchen Fehler bekommst du @ankibalyan ? Dieses Addon scheint in unseren offiziellen Beispielen OK zu funktionieren

Die Lösung von @danmakenoise funktioniert für mich, es scheint mit Garn anstelle von npm in Ordnung zu sein.

FYI, wenn jemand versucht, mit npm statt yarn zu installieren, v4.0.0-alpha.3 scheint jetzt zu funktionieren 👍

Es wird der gleiche Fehler wie bei TomFoyster auf 4.6.0 und Garn-Arbeitsbereichen angezeigt

@AlastairTaft um welche Storybook-Version handelt es sich in deinem Fall?

Hoppla, tut mir leid, ich bin nicht bei Story Books, das war der einzige Google-Treffer für den Fehler.

Update: In meinem Fall habe ich TomFoysters Fehler beim Ausführen webpack in der Konsole getroffen. Stattdessen wird es durch Ausführen npx webpack umgangen.

Ziemlich albern, dass yarn dafür eine Abhängigkeit ist.

BEARBEITEN: npm i -g @storybook/cli@alpha behebt dieses Problem 👍

Die Bestätigung, dass die Verwendung @storybook/cli@alpha und @storybook/react@alpha (bei Verwendung von React) hilft, die Probleme beim Laden von Storybook zu beheben.

@Hypnosphi Ich versuche, v4.0.0-alpha.3 mit dem Webpack ^4.8.1 zu verwenden.
Ich erhalte den unten genannten Fehler
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
Irgendwelche Hinweise?

@anujparikh Ich könnte mich irren, aber ich glaube, es wird jetzt durch ersetzt

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

Ist @storybook/react jetzt wegen @storybook/core veraltet? @pollen8

Wir sind auf dasselbe Problem gestoßen, das @TomFoyster in https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 erwähnt, als wir versuchten, webpack.DefinePlugin() in der Webpack-Konfiguration für Storybook zu verwenden, stießen aber auf a Reihe neuer Probleme, die wir beim Upgrade auf v4.0.0-alpha.14 nicht lösen konnten.

Die etwas hässliche Lösung bestand darin, die Webpack 3-Abhängigkeit von Storybook in .storybook/webpack.config.js anstelle unserer Webpack 4-Abhängigkeit zu erfordern:

// .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 -- Können Sie bitte ein Beispiel einer vollständigen webpack.config.js -Datei zeigen? Ich bin mir nicht sicher, wie Ihre Zeile in meine Konfiguration passen würde:

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 Sicher!

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: {
    // ...
  },
};

Sie sollten dies jedoch nur benötigen, wenn Sie ein Plugin aus der Webpack-Bibliothek verwenden müssen. Wir brauchten es, um das DefinePlugin zu verwenden.

Ich stoße bei DefinePlugin auf das gleiche Problem, aber meine Datei .storybook/webpack.config.js bleibt frei von Verweisen auf DefinePlugin, diese Verweise befinden sich nur in der Datei webpack.config.js meines Hauptprojekts. Ich bin mir nicht sicher, warum Storybook auf die Hauptdatei zugreifen würde, wenn es eine eigene im Ordner .storybook hat.

Ich habe versucht, auf das @storybook/ react@alpha -Paket zu aktualisieren, und beim Versuch, den Server zu starten, sehe ich eine riesige Liste anderer Probleme. Einer der interessanteren:

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)

Ich habe überprüft, dass durch das Wechseln desselben Projekts zu Yarn alles ohne Probleme funktioniert.

Wie würde man vorgehen, um diesen Fix auf ein Vue-CLI 3-Projekt anzuwenden?

@davek1979 npm install @storybook/vue@alpha macht den Trick!

Gestern habe ich den Yarn-Fix erneut verifiziert, dann meinen node_modules-Ordner gelöscht und npm install versucht. Der Fehler auf DefinePlugin zurückgegeben. Ich habe meinen Ordner node_modules erneut gelöscht und die Version in @storybook/ react@alpha geändert und dann npm install neu erstellt. Das macht den Trick. Die Alpha-Version, die für mich zu funktionieren schien, war v4.0.0-alpha.16

@anujparikh @pollen8 , das unsere Standardkonfiguration direkt erfordert, ist veraltet, Sie sollten eine Verfallsmeldung sehen, wenn Sie sie verwenden. Der richtige Weg ist die Verwendung des dritten Arguments: https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster nein, @storybook/core ist eine interne Bibliothek, die von Storybooks für verschiedene Frameworks geteilt wird. Sie sollten trotzdem @storybook/react verwenden

@hanshenrik

stieß auf eine Reihe neuer Probleme, die wir beim Upgrade auf v4.0.0-alpha.14 nicht lösen konnten

Können Sie es bitte noch einmal mit 4.0.0-alpha.20 versuchen und die Probleme mitteilen, auf die Sie stoßen, falls vorhanden?

Versucht mit 4.0.0-alpha.20 und webpack4.10.2 , DefinePlugin funktioniert nicht.

@nerdmax kannst du bitte ein Reproduktionsbeispiel geben? Wir verwenden dieses Plugin selbst und es funktioniert für uns

@Hypnosphi Danke für deine Antwort. Es tut mir so leid, ich habe gerade nachgesehen, es funktioniert gut mit 4.0.0-alpha.20 . Mein Projekt verwendet die Arbeitsbereiche von Garn und es scheint, als ob das Storybook im Root-Knotenmodul installiert wurde. Nachdem Sie diesen Ordner gelöscht und alle Pakete neu installiert haben, funktioniert es.

Ich konnte dies nach dem Upgrade auf "@storybook/react": "^4.0.0-alpha.21" mit "webpack": "^4.17.2" zum Laufen bringen

Ich habe auch das Problem mit dem DefinePlugin-Problem. Ich habe die oben empfohlenen Alpha-Fixes ohne Erfolg ausprobiert. Ich folge diesem Tutorial sofort: https://www.valentinog.com/blog/react-webpack-babel/ , was mit den neuesten Versionen aller aufgelisteten Abhängigkeiten gut funktioniert.

getstorybook funktioniert einwandfrei, aber npm run storybook löst die Ausnahme aus, auf die viele andere in der einen oder anderen Form gestoßen zu sein scheinen.

[email protected] Storybook C:\work\reactProject\
start-storybook -p 6006

info @storybook/react v3.4.11
die Info
exec: fatal: Kein Git-Repository (oder eines der übergeordneten Verzeichnisse): .git

exec: fatal: Kein Git-Repository (oder eines der übergeordneten Verzeichnisse): .git

info => Benutzerdefinierte .babelrc wird geladen
info => Laden der benutzerdefinierten Webpack-Konfiguration (Erweiterungsmodus).
C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
compiler.hooks.compilation.tap(
^

TypeError: Eigenschaft 'compilation' von undefined kann nicht gelesen werden
unter DefinePlugin.apply (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
bei Compiler.apply (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
bei webpack (C:\work\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
bei exports.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
bei buildDev (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
bei Objekt.(C:\work\reactProjectnode_modules\@storybook\react\dist\server\index.js:23:22)
bei Module._compile (module.js:652:30)
bei Object.Module._extensions..js (module.js:663:10)
bei Module.load (module.js:565:32)
bei tryModuleLoad (module.js:505:12)
bei Function.Module._load (module.js:497:3)
bei Module.require (module.js:596:17)
bei require (internal/module.js:11:18)
bei Objekt.(C:\work\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
bei Module._compile (module.js:652:30)
bei Object.Module._extensions..js (module.js:663:10)
npm ERR! Code ELIFECYCLE
npm ERR! Fehler 1
npm ERR! [email protected] Storybook: start-storybook -p 6006
npm ERR! Ausgangszustand 1
npm ERR!
npm ERR! Fehler beim Skript für das Buch „[email protected]“ .
npm ERR! Dies ist wahrscheinlich kein Problem mit npm. Oben befindet sich wahrscheinlich eine zusätzliche Protokollausgabe.

Ich würde Storybook gerne ausprobieren, aber es sieht so aus, als ob ich in diesem Fall durch die Verwendung des HTML-Webpack-Plugins vereitelt werde.

Ich konnte dies nach dem Upgrade auf "@storybook/react": "^4.0.0-alpha.21" mit "webpack": "^4.17.2" zum Laufen bringen

@ridhoq - kannst du deine config.js und webpack.config.js für das Bilderbuch teilen. Ich habe die gleichen Versionen und erhalte immer noch die folgende Fehlermeldung:

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)

Verwenden Sie auch npm oder Garn?

Sicher - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. Ich weiß nicht, wie hilfreich das für Sie sein wird, da wir möglicherweise unterschiedliche Build-Anforderungen haben. Ich verwende npm für dieses Projekt

Ich hatte das gleiche Problem nach dem Upgrade create-react-app auf 2.0.3 und dieses Problem wurde durch das Upgrade von @storybook/react auf ^4.0.0-alpha.21 behoben.

Ich habe eine funktionierende Version mit den folgenden (neuesten) Versionen erstellt:

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

Ich habe auch ein Addon hinzugefügt, hoffe, dieses Beispiel wird jemandem helfen.

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

@relaxed-tomato hast du das gelöst? Ich habe das gleiche Problem. Danke

Ich habe eine funktionierende Version mit den folgenden (neuesten) Versionen erstellt:

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

Ich habe auch ein Addon hinzugefügt, hoffe, dieses Beispiel wird jemandem helfen.

Danke, das hat bei mir gewirkt. Aber ich musste auch babel-core und babel-loader installieren.

Ich habe eine funktionierende Version mit den folgenden (neuesten) Versionen erstellt:

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

Ich habe auch ein Addon hinzugefügt, hoffe, dieses Beispiel wird jemandem helfen.

Danke, das hat bei mir gewirkt. Aber ich musste auch babel-core und babel-loader installieren.

Hier gilt das gleiche. Ich musste folgende Versionen von babel core & loader verwenden:

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

Ich bin versehentlich auf dieses Problem gestoßen, als ich auf das neueste Webpack aktualisiert habe. Version 4.20.2 funktioniert einwandfrei.

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

Habe den Fehler auch. Die manuelle Installation von Webpack 4.20.2 wie oben erwähnt reicht vorerst aus.