Storybook: ¿Soporte de paquete web 4?

Storybook usa webpack como dependencia directa. Por lo tanto, no puede reemplazar su versión de su lado. En su lugar, puede bifurcar nuestro repositorio e intentar actualizar los paquetes correspondientes a la versión beta. Si las cosas van bien, podremos hacer la actualización tan pronto como se estabilice.

¿Alguien está haciendo esto todavía?

Lo haré, y será un cambio radical en el libro de cuentos. La cuestión es que las configuraciones personalizadas del paquete web pueden contener complementos, y los complementos destinados al paquete web 4 la mayoría de las veces (si no siempre) no son compatibles con el paquete web 3.

¡Genial, muchas gracias!

Actualmente está roto, ya que aunque Storybook requiere explícitamente webpack==3.11.0 y obtiene una copia privada de Webpack 3 en su subdirectorio node_modules , también requiere dotenv-webpack .

Ahora dotenv-webpack enumera una dependencia de pares de webpack==^1 || ^2 || ^3 || ^4 lo que hace que npm considere una buena idea instalarlo en el node_modules principal al lado del Webpack 4 en lugar del siguiente a Webpack 3 bajo @storybook/react/node_modules .

Ahora, tan pronto como el libro de cuentos carga dotenv-webpack , a su vez hace que se invoque Webpack 4.

Creo que lo anterior se debe a un error en npm : https://github.com/npm/npm/issues/19944

La lista de verificación de cosas que bloquean la migración de nuestro lado ahora se trasladó a https://github.com/storybooks/storybook/pull/3148

Recibo el siguiente error cuando ejecuto Storybook con un proyecto que usa Webpack 4;

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

TypeError: Cannot read property 'compilation' of undefined

Esto nos impide continuar con Webpack 4

Puede suscribirse a https://github.com/storybooks/storybook/pull/3148 actualizaciones

@TomFoyster Tuve el mismo problema, trabajando temporalmente con yarn en lugar de npm install . Parece solucionarlo en mi caso.

Publicado como v4.0.0-alpha.0

@Hypnosphi después de actualizar a v4.0.0-alpha.0 , la compilación de mi libro de cuentos se detiene y se bloquea en el complemento compat , sin pasar nunca del 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

Antes de actualizar a la versión alfa, me encontré con el problema de @TomFoyster .

Todavía puedo hacer que se compile ahora usando yarn en lugar de npm , pero la versión más reciente no parece haber solucionado el problema.

v4.0.0-alpha.0 estaba roto, use un alfa posterior (por ejemplo v4.0.0-alpha.3 )

Haz rm -rf node_modules y luego usa yarn install . Funciona con storybook v3.4.1 y webpack v4.6.0

específicamente yarn resuelve el problema al instalar la dependencia del libro de cuentos por separado.

También probé v4.0.0-alpha.3 pero parece que @storybook/[email protected] no funciona.

¿Qué error obtiene @ankibalyan ? Este complemento parece funcionar bien en nuestros ejemplos oficiales

La solución de @danmakenoise funciona para mí, parece estar bien con yarn en lugar de npm.

Para su información, si alguien más está intentando instalar con npm en lugar de yarn , v4.0.0-alpha.3 parece funcionar ahora 👍

Obteniendo el mismo error que TomFoyster en 4.6.0 y espacios de trabajo de hilo

@AlastairTaft , ¿qué versión de libro de cuentos es en su caso?

Vaya, lo siento, no estoy en los libros de historias, este fue el único error de Google.

Actualización: en mi caso, me encontraba con el error de TomFoyster al ejecutar webpack en la consola. En cambio, ejecutar npx webpack lo soluciona.

Bastante tonto que yarn sea ​​una dependencia para esto.

EDITAR: npm i -g @storybook/cli@alpha soluciona este problema 👍

Confirmar que usar @storybook/cli@alpha y @storybook/react@alpha (si usa React) ayuda a solucionar los problemas de carga del libro de cuentos.

@Hypnosphi Estoy tratando de usar v4.0.0-alpha.3 con el paquete web ^4.8.1 .
Recibo el error mencionado a continuación
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
¿Algún consejo?

@anujparikh Podría estar equivocado, pero creo que ahora se reemplaza con

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

¿Está obsoleto @storybook/react debido a @storybook/core ahora? @pollen8

Encontramos el mismo problema que @TomFoyster menciona en https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 al intentar usar webpack.DefinePlugin() en la configuración de Webpack para Storybook, pero nos encontramos con un un montón de problemas nuevos que no pudimos resolver al actualizar a v4.0.0-alpha.14 .

La solución algo fea fue requerir la dependencia Webpack 3 de Storybook en .storybook/webpack.config.js en lugar de nuestra dependencia 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 -- ¿Puede mostrar un ejemplo de un archivo webpack.config.js completo? No estoy seguro de cómo encajaría su línea en mi configuración:

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

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

Sin embargo, solo debería necesitar esto si necesita usar un complemento de la biblioteca del paquete web. Lo necesitábamos para usar el DefinePlugin .

Me encuentro con el mismo problema con DefinePlugin, pero mi archivo .storybook/webpack.config.js sigue sin ninguna referencia a DefinePlugin, esas referencias solo se encuentran en el webpack.config.js de mi proyecto principal. No estoy seguro de por qué Storybook accedería al archivo principal cuando tiene el suyo propio dentro de la carpeta .storybook.

Intenté actualizar al paquete @storybook/ react@alpha y veo una lista enorme de otros problemas al intentar iniciar el servidor. Uno de los más interesantes:

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)

He verificado que cambiar el mismo proyecto a Yarn permite que todo funcione sin problemas.

¿Cómo se aplicaría esta solución a un proyecto Vue-CLI 3?

¡@ davek1979 npm install @storybook/vue@alpha hace el truco!

Ayer volví a verificar la corrección de Yarn, luego borré mi carpeta node_modules y probé npm install . Devolvió el error en DefinePlugin. Borré mi carpeta node_modules nuevamente y cambié la versión a @storybook/ react@alpha y luego rehice npm install . Eso hace el truco. La versión de la alfa que parecía funcionar para mí era v4.0.0-alpha.16

@anujparikh @pollen8 que requiere nuestra configuración predeterminada directamente está en desuso, debería ver un mensaje de desuso al usarlo. La forma correcta es usar el tercer argumento: https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster no, @storybook/core es una biblioteca interna compartida por libros de cuentos para diferentes marcos. Aún debe usar @storybook/react

@hanshenrik

nos encontramos con un montón de problemas nuevos que no pudimos resolver al actualizar a v4.0.0-alpha.14

¿Puedes intentarlo de nuevo con 4.0.0-alpha.20 y compartir los problemas que encuentres, si los hay?

Probé con 4.0.0-alpha.20 y webpack4.10.2 , DefinePlugin no funciona.

@nerdmax , ¿puede proporcionar algún ejemplo de reproducción? Usamos este complemento nosotros mismos y funciona para nosotros.

@Hypnosphi Gracias por su respuesta. Lo siento mucho, acabo de comprobar que funciona bien con 4.0.0-alpha.20 . Mi proyecto usa los espacios de trabajo de yarn y parece que el libro de cuentos se instaló en el nodo_módulo raíz. Después de eliminar esa carpeta y reinstalar todos los paquetes, funciona.

Pude hacer que esto funcionara después de actualizar a "@storybook/react": "^4.0.0-alpha.21" con "webpack": "^4.17.2"

También tengo un problema con el problema de DefinePlugin. Probé las correcciones alfa recomendadas anteriormente sin suerte. Estoy siguiendo este tutorial listo para usar: https://www.valentinog.com/blog/react-webpack-babel/ , que con las últimas versiones de todas las dependencias enumeradas funciona bien.

getstorybook funciona bien, pero npm run storybook arroja la excepción que muchos otros parecen haber encontrado de una forma u otra.

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

info @storybook/react v3.4.11
información
exec: fatal: no es un repositorio de git (ni ninguno de los directorios principales): .git

exec: fatal: no es un repositorio de git (ni ninguno de los directorios principales): .git

info => Cargando .babelrc personalizado
info => Cargando la configuración personalizada del paquete web (modo de extensión).
C:\trabajo\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
compilador.ganchos.compilación.tap(
^

TypeError: no se puede leer la propiedad 'compilación' de undefined
en DefinePlugin.apply (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
en Compiler.apply (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
en el paquete web (C:\trabajo\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
en export.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
en buildDev (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
en Objeto.(C:\trabajo\reactProjectnode_modules\@storybook\react\dist\server\index.js:23:22)
en Módulo._compilar (módulo.js:652:30)
en Object.Module._extensions..js (module.js:663:10)
en Module.load (module.js:565:32)
en tryModuleLoad (module.js:505:12)
en Function.Module._load (module.js:497:3)
en Module.require (module.js:596:17)
a requerimiento (interno/module.js:11:18)
en Objeto.(C:\trabajo\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
en Módulo._compilar (módulo.js:652:30)
en Object.Module._extensions..js (module.js:663:10)
npm ¡ERROR! código ELIFECICLO
npm ¡ERROR! error 1
npm ¡ERROR! libro de cuentos [email protected] : start-storybook -p 6006
npm ¡ERROR! Estado de salida 1
npm ¡ERROR!
npm ¡ERROR! Error en la secuencia de comandos del libro de cuentos [email protected] .
npm ¡ERROR! Esto probablemente no sea un problema con npm. Es probable que haya una salida de registro adicional arriba.

Me encantaría probar Storybook, pero parece que estoy frustrado al usar el complemento html-webpack en este caso.

Pude hacer que esto funcionara después de actualizar a "@storybook/react": "^4.0.0-alpha.21" con "webpack": "^4.17.2"

@ridhoq : ¿puedes compartir tus config.js y webpack.config.js para el libro de cuentos? Tengo las mismas versiones y sigo recibiendo el siguiente error:

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)

Además, ¿estás usando npm o yarn?

Claro: https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. No sé qué tan útil será esto para usted, ya que es posible que tengamos diferentes requisitos de construcción. Estoy usando npm para este proyecto

Tuve el mismo problema después de actualizar create-react-app a 2.0.3 y este problema se resolvió actualizando @storybook/react a ^4.0.0-alpha.21 .

Creé una versión de trabajo con las siguientes (últimas) versiones:

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

También agregué algunos complementos, espero que este ejemplo ayude a alguien.

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

@relaxed-tomato resolviste esto? Tengo el mismo problema. Gracias

Creé una versión de trabajo con las siguientes (últimas) versiones:

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

También agregué algunos complementos, espero que este ejemplo ayude a alguien.

Gracias, eso hizo el truco para mí. Pero también tuve que instalar babel-core y babel-loader .

Creé una versión de trabajo con las siguientes (últimas) versiones:

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

También agregué algunos complementos, espero que este ejemplo ayude a alguien.

Gracias, eso hizo el truco para mí. Pero también tuve que instalar babel-core y babel-loader .

Aquí igual. Tuve que usar las siguientes versiones de babel core y loader:

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

Accidentalmente me encontré con este problema cuando actualicé al paquete web más nuevo. La versión 4.20.2 funciona bien.

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

Tengo el error también. La instalación manual de webpack 4.20.2 como se mencionó anteriormente es el truco por ahora.