Storybook: Prise en charge de Webpack 4 ?

Storybook utilise webpack comme dépendance directe. Vous ne pouvez donc pas remplacer sa version de votre côté. Au lieu de cela, vous pouvez bifurquer notre référentiel et essayer de mettre à jour les packages correspondants vers la version bêta. Si tout se passe bien, nous pourrons faire la mise à jour dès qu'elle sera stable

Quelqu'un a-t-il déjà fait ça ?

Je vais le faire, et ce sera un changement radical dans le livre de contes. Le fait est que les configurations de webpack personnalisées peuvent contenir des plugins, et les plugins ciblés pour le webpack 4 ne sont la plupart du temps (sinon toujours) pas rétrocompatibles avec le webpack 3

Super, merci beaucoup !

Actuellement, il est cassé car même si storybook nécessite explicitement webpack==3.11.0 et obtient une copie privée de Webpack 3 dans son sous-répertoire node_modules , il nécessite également dotenv-webpack .

Maintenant, dotenv-webpack répertorie une dépendance de pairs de webpack==^1 || ^2 || ^3 || ^4 , ce qui fait que npm considère que c'est une bonne idée de l'installer dans le node_modules principal à côté de Webpack 4 au lieu de suivant à Webpack 3 sous @storybook/react/node_modules .

Désormais, dès que le livre de contes charge dotenv-webpack , il provoque à son tour l'invocation de Webpack 4.

Je crois que ce qui précède est causé par un bogue dans npm : https://github.com/npm/npm/issues/19944

Liste de contrôle des éléments qui bloquent la migration de notre côté en ce moment déplacé vers https://github.com/storybooks/storybook/pull/3148

J'obtiens l'erreur ci-dessous lors de l'exécution de Storybook avec un projet utilisant Webpack 4 ;

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

TypeError: Cannot read property 'compilation' of undefined

Cela nous empêche de continuer avec Webpack 4

Vous pouvez vous abonner aux mises à jour https://github.com/storybooks/storybook/pull/3148

@TomFoyster J'ai eu le même problème, en le contournant temporairement en utilisant yarn au lieu de npm install . Semble résoudre le problème dans mon cas.

Publié en tant que v4.0.0-alpha.0

@Hypnosphi après la mise à jour vers v4.0.0-alpha.0 , ma compilation de livres de contes se bloque et se bloque sur le plugin compat , ne dépassant jamais 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

Avant de passer à la version alpha, je rencontrais le problème de @TomFoyster .

Je peux toujours le faire compiler maintenant en utilisant yarn au lieu de npm , mais la dernière version ne semble pas avoir résolu le problème.

v4.0.0-alpha.0 était cassé, veuillez utiliser une version alpha ultérieure (par exemple v4.0.0-alpha.3 )

Faites rm -rf node_modules puis utilisez yarn install . Cela fonctionne avec storybook v3.4.1 et webpack v4.6.0

spécifiquement, le fil résout le problème en installant la dépendance du livre de contes séparément.

J'ai aussi essayé v4.0.0-alpha.3 mais @storybook/[email protected] ne semble pas fonctionner avec.

Quelle erreur obtenez-vous @ankibalyan ? Cet addon semble fonctionner correctement dans nos exemples officiels

La solution de @danmakenoise fonctionne pour moi, elle semble convenir au fil au lieu de npm.

Pour votre information, si quelqu'un d'autre essaie d'installer avec npm au lieu de yarn , v4.0.0-alpha.3 semble fonctionner maintenant 👍

Obtenir la même erreur que TomFoyster sur 4.6.0 et les espaces de travail de fil

@AlastairTaft quelle version du livre de contes est-ce dans votre cas ?

Oups désolé, je ne suis pas sur les livres d'histoires, c'était le seul résultat de Google pour l'erreur.

Mise à jour : pour mon cas, j'ai rencontré l'erreur de TomFoyster lors de l'exécution webpack dans la console. Au lieu de cela, exécuter npx webpack le contourne.

Assez idiot que yarn soit une dépendance pour cela.

EDIT : npm i -g @storybook/cli@alpha corrige ce problème 👍

Confirmer que l'utilisation @storybook/cli@alpha et @storybook/react@alpha (si vous utilisez React) aide à résoudre les problèmes de chargement du livre d'histoires.

@Hypnosphi J'essaie d'utiliser v4.0.0-alpha.3 avec webpack ^4.8.1 .
Je reçois l'erreur mentionnée ci-dessous
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
Des pointeurs?

@anujparikh Je peux me tromper, mais je crois qu'il est maintenant remplacé par

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

Est-ce que @storybook/react est obsolète à cause de @storybook/core maintenant ? @pollen8

Nous avons rencontré le même problème que @TomFoyster mentionne dans https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 en essayant d'utiliser webpack.DefinePlugin() dans la configuration Webpack pour Storybook, mais nous avons rencontré un un tas de nouveaux problèmes que nous n'avons pas pu résoudre lors de la mise à niveau vers v4.0.0-alpha.14 .

La solution un peu laide était d'exiger la dépendance Webpack 3 de Storybook dans .storybook/webpack.config.js au lieu de notre dépendance Webpack 4 :

// .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 -- Pouvez-vous s'il vous plaît montrer un exemple de fichier webpack.config.js complet ? Je ne sais pas comment votre ligne s'intégrerait dans ma configuration:

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 Bien sûr !

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

Cependant, vous ne devriez en avoir besoin que si vous devez utiliser un plugin de la bibliothèque Webpack. Nous en avions besoin pour utiliser le DefinePlugin .

Je rencontre le même problème autour de DefinePlugin, mais mon fichier .storybook/webpack.config.js reste dépourvu de toute référence à DefinePlugin, ces références ne se trouvent que dans le webpack.config.js de mon projet principal. Je ne sais pas pourquoi Storybook accéderait au fichier principal alors qu'il a le sien dans le dossier .storybook.

J'ai essayé de mettre à niveau vers le package @storybook/ react@alpha et je vois une liste massive d'autres problèmes lors de la tentative de démarrage du serveur. L'un des plus intéressants :

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)

J'ai vérifié que l'échange du même projet vers Yarn permet à tout de fonctionner sans problème.

Comment s'y prendre pour appliquer ce correctif à un projet Vue-CLI 3 ?

@davek1979 npm install @storybook/vue@alpha fait l'affaire !

Hier, j'ai revérifié le correctif Yarn, puis j'ai effacé mon dossier node_modules et j'ai essayé npm install . L'erreur sur DefinePlugin est retournée. J'ai à nouveau effacé mon dossier node_modules et changé la version en @storybook/ react@alpha puis refait npm install . Cela fait l'affaire. La version de l'alpha qui semblait fonctionner pour moi était v4.0.0-alpha.16

@anujparikh @pollen8 nécessitant directement notre configuration par défaut est obsolète, vous devriez voir un message d'obsolescence lors de son utilisation. La bonne façon est d'utiliser le troisième argument : https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster non, @storybook/core est une bibliothèque interne partagée par des livres de contes pour différents frameworks. Vous devriez toujours utiliser @storybook/react

@hanshenrik

rencontré un tas de nouveaux problèmes que nous n'avons pas pu résoudre lors de la mise à niveau vers la v4.0.0-alpha.14

Pouvez-vous s'il vous plaît réessayer avec 4.0.0-alpha.20 et partager les problèmes que vous rencontrez le cas échéant ?

Essayé avec 4.0.0-alpha.20 et webpack4.10.2 , DefinePlugin ne fonctionne pas.

@nerdmax pouvez-vous s'il vous plaît fournir un exemple de reproduction ? Nous utilisons ce plugin nous-mêmes et cela fonctionne pour nous

@Hypnosphi Merci pour votre réponse. Je suis vraiment désolé, je viens de vérifier, ça marche bien avec 4.0.0-alpha.20 . Mon projet utilise les espaces de travail de yarn et il semble que le livre de contes ait été installé dans le node_module racine. Après avoir supprimé ce dossier et réinstallé tous les packages, cela fonctionne.

J'ai pu faire fonctionner cela après la mise à niveau vers "@storybook/react": "^4.0.0-alpha.21" avec "webpack": "^4.17.2"

J'ai également le problème avec le problème DefinePlugin. J'ai essayé les correctifs alpha recommandés ci-dessus sans succès. Je suis ce tutoriel prêt à l'emploi : https://www.valentinog.com/blog/react-webpack-babel/ , qui fonctionne correctement avec les dernières versions de toutes les dépendances répertoriées.

getstorybook fonctionne bien, mais npm run storybook lève l'exception que beaucoup d'autres semblent avoir rencontrée sous une forme ou une autre.

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

info @storybook/réagir v3.4.11
Info
exec : fatal : pas un référentiel git (ou l'un des répertoires parents) : .git

exec : fatal : pas un référentiel git (ou l'un des répertoires parents) : .git

info => Chargement du .babelrc personnalisé
info => Chargement de la configuration webpack personnalisée (mode extension).
C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
compiler.hooks.compilation.tap(
^

TypeError : impossible de lire la propriété " compilation " d'undefined
à DefinePlugin.apply (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
sur Compiler.apply (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
sur webpack (C:\work\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
à exports.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
à buildDev (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
à Objet.(C:\work\reactProjectnode_modules\@storybook\react\dist\server\index.js:23:22)
à Module._compile (module.js:652:30)
à Object.Module._extensions..js (module.js:663:10)
à Module.load (module.js:565:32)
à tryModuleLoad (module.js:505:12)
à Function.Module._load (module.js:497:3)
à Module.require (module.js:596:17)
au besoin (interne/module.js:11:18)
à Objet.(C:\work\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
à Module._compile (module.js:652:30)
à Object.Module._extensions..js (module.js:663:10)
npm ERR ! code ELIFECYCLE
npm ERR ! erreur no 1
npm ERR ! [email protected] livre d'histoire : start-storybook -p 6006
npm ERR ! Statut de sortie 1
npm ERR !
npm ERR ! Échec du script de livre d'histoires [email protected] .
npm ERR ! Ce n'est probablement pas un problème avec npm. Il y a probablement une sortie de journalisation supplémentaire ci-dessus.

J'adorerais essayer Storybook, mais il semble que je sois contrecarré en utilisant le plugin html-webpack-plugin dans ce cas.

J'ai pu faire fonctionner cela après la mise à niveau vers "@storybook/react": "^4.0.0-alpha.21" avec "webpack": "^4.17.2"

@ridhoq - pouvez-vous partager vos config.js et webpack.config.js pour le livre de contes. J'ai les mêmes versions et je reçois toujours l'erreur ci-dessous :

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)

De plus, utilisez-vous du npm ou du fil ?

Bien sûr - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. Je ne sais pas à quel point cela vous sera utile car nous pouvons avoir des exigences de construction différentes. J'utilise npm pour ce projet

J'ai eu le même problème après la mise à niveau create-react-app vers 2.0.3 et ce problème a été résolu en mettant à niveau @storybook/react vers ^4.0.0-alpha.21 .

J'ai créé une version de travail avec les versions suivantes (dernières):

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

ajouté quelques Addon aussi, espérons que cet exemple aidera quelqu'un.

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

@relaxed-tomato avez-vous résolu ce problème ? J'ai le même problème. Merci

J'ai créé une version de travail avec les versions suivantes (dernières):

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

ajouté quelques Addon aussi, espérons que cet exemple aidera quelqu'un.

Merci, ça a fait l'affaire pour moi. Mais j'ai aussi dû installer babel-core et babel-loader .

J'ai créé une version de travail avec les versions suivantes (dernières):

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

ajouté quelques Addon aussi, espérons que cet exemple aidera quelqu'un.

Merci, ça a fait l'affaire pour moi. Mais j'ai aussi dû installer babel-core et babel-loader .

Pareil ici. J'ai dû utiliser les versions suivantes du noyau et du chargeur Babel :

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

J'ai accidentellement rencontré ce problème lors de la mise à niveau vers le dernier webpack. La version 4.20.2 fonctionne bien.

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

J'ai aussi l'erreur. L'installation manuelle de Webpack 4.20.2 comme mentionné ci-dessus fait l'affaire pour l'instant.