Storybook: Suporte ao Webpack 4?

Storybook usa webpack como dependência direta. Então você não pode substituir sua versão do seu lado. Em vez disso, você pode bifurcar nosso repositório e tentar atualizar os pacotes correspondentes para a versão beta. Se as coisas correrem bem, poderemos fazer a atualização assim que ficar estável

Alguém fazendo isso ainda?

Eu farei isso, e será uma mudança radical no livro de histórias. O problema é que as configurações personalizadas do webpack podem conter plugins, e os plugins direcionados para o webpack 4 são na maioria das vezes (se não sempre) não compatíveis com o webpack 3

Ótimo, muito obrigado!

Atualmente, ele está quebrado, pois embora o storybook exija explicitamente webpack==3.11.0 e obtenha uma cópia privada do Webpack 3 em seu subdiretório node_modules , ele também requer dotenv-webpack .

Agora dotenv-webpack lista uma dependência de pares de webpack==^1 || ^2 || ^3 || ^4 que faz com que npm considere uma boa ideia instalá-lo no node_modules principal ao lado do Webpack 4 em vez de próximo para Webpack 3 em @storybook/react/node_modules .

Agora, assim que o livro de histórias carrega dotenv-webpack , ele faz com que o Webpack 4 seja invocado.

Eu acredito que o acima é causado por um bug em npm : https://github.com/npm/npm/issues/19944

A lista de verificação de coisas que bloqueiam a migração do nosso lado agora mudou para https://github.com/storybooks/storybook/pull/3148

Estou recebendo o erro abaixo ao executar o Storybook com um projeto usando o Webpack 4;

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

TypeError: Cannot read property 'compilation' of undefined

Isso está nos impedindo de prosseguir com o Webpack 4

Você pode se inscrever em https://github.com/storybooks/storybook/pull/3148 atualizações

@TomFoyster Eu tive o mesmo problema, temporariamente contornando-o usando yarn em vez de npm install . Parece resolver no meu caso.

Lançado como v4.0.0-alpha.0

@Hypnosphi depois de atualizar para v4.0.0-alpha.0 , minha compilação de livros de histórias trava e trava no plugin compat , nunca passando de 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 atualizar para a versão alfa, eu estava enfrentando o problema do @TomFoyster .

Ainda consigo compilar agora usando yarn em vez de npm , mas a compilação mais recente não parece ter corrigido o problema.

v4.0.0-alpha.0 foi corrompido, use um alfa posterior (por exemplo v4.0.0-alpha.3 )

Faça rm -rf node_modules e depois use yarn install . Está funcionando com storybook v3.4.1 e webpack v4.6.0

especificamente o yarn resolve o problema instalando a dependência do storybook separadamente.

Eu também tentei v4.0.0-alpha.3 mas @storybook/[email protected] não parece estar funcionando com ele.

Qual erro você recebe @ankibalyan ? Este addon parece funcionar bem em nossos exemplos oficiais

A solução do @danmakenoise funciona para mim, parece estar bem com yarn em vez de npm.

FYI se alguém está tentando instalar com npm em vez de yarn , v4.0.0-alpha.3 parece funcionar agora 👍

Obtendo o mesmo erro que o TomFoyster no 4.6.0 e nos espaços de trabalho do yarn

@AlastairTaft qual versão do livro de histórias é no seu caso?

Ops, desculpe, não estou nos livros de histórias, este foi o único resultado do erro no Google.

Atualização: No meu caso, eu estava acertando o erro do TomFoyster ao executar webpack no console. Em vez disso, correr npx webpack contorna isso.

Muito bobo que yarn seja uma dependência para isso.

EDIT: npm i -g @storybook/cli@alpha corrige este problema 👍

Confirmar que usar @storybook/cli@alpha e @storybook/react@alpha (se estiver usando React) ajuda a corrigir os problemas de carregamento do livro de histórias.

@Hypnosphi Estou tentando usar v4.0.0-alpha.3 com webpack ^4.8.1 .
Estou recebendo o erro abaixo mencionado
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
Alguma indicação?

@anujparikh Posso estar errado, mas acredito que agora foi substituído por

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

O @storybook/react está obsoleto por causa do @storybook/core agora? @pollen8

Encontramos o mesmo problema que o @TomFoyster menciona em https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 ao tentar usar webpack.DefinePlugin() na configuração do Webpack para Storybook, mas encontramos um monte de novos problemas que não conseguimos resolver ao atualizar para v4.0.0-alpha.14 .

A solução um tanto feia foi exigir a dependência do Webpack 3 do Storybook em .storybook/webpack.config.js em vez de nossa dependência do 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 -- Você pode mostrar um exemplo de um arquivo webpack.config.js completo? Não tenho certeza de como sua linha se encaixaria na minha configuração:

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

Você só deve precisar disso se precisar usar um plug-in da biblioteca do webpack. Precisávamos dele para usar o DefinePlugin .

Estou enfrentando o mesmo problema em torno do DefinePlugin, mas meu arquivo .storybook/webpack.config.js permanece desprovido de qualquer referência ao DefinePlugin, essas referências estão localizadas apenas no webpack.config.js do meu projeto principal. Não tenho certeza por que o Storybook estaria acessando o arquivo principal quando ele tem seu próprio dentro da pasta .storybook.

Eu tentei atualizar para o pacote @storybook/ react@alpha e estou vendo uma lista enorme de outros problemas ao tentar iniciar o servidor. Um dos mais interessantes:

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)

Verifiquei que trocar o mesmo projeto para o Yarn permite que tudo funcione sem problemas.

Como aplicar essa correção a um projeto Vue-CLI 3?

@davek1979 npm install @storybook/vue@alpha faz o truque!

Ontem eu reverifiquei a correção do Yarn, limpei minha pasta node_modules e tentei npm install . O erro no DefinePlugin foi retornado. Limpei minha pasta node_modules novamente e mudei a versão para @storybook/ react@alpha e refiz npm install . Isso faz o truque. A versão do alfa que parecia funcionar para mim era a v4.0.0-alpha.16

@anujparikh @ pollen8 exigindo que nossa configuração padrão diretamente esteja obsoleta, você deverá ver uma mensagem de descontinuação ao usá-la. A maneira correta é usar o terceiro argumento: https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster não, @storybook/core é uma biblioteca interna compartilhada por livros de histórias para diferentes frameworks. Você ainda deve usar @storybook/react

@hanshenrik

encontramos vários novos problemas que não conseguimos resolver ao atualizar para a v4.0.0-alpha.14

Você pode tentar novamente com 4.0.0-alpha.20 e compartilhar os problemas encontrados, se houver?

Tentei com 4.0.0-alpha.20 e webpack4.10.2 , DefinePlugin não funciona.

@nerdmax você pode fornecer algum exemplo de reprodução? Nós mesmos usamos este plugin e funciona para nós

@Hypnosphi Obrigado pela sua resposta. Desculpe, acabei de verificar, está funcionando bem com 4.0.0-alpha.20 . Meu projeto está usando os espaços de trabalho do yarn e parece que o livro de histórias foi instalado no node_module raiz. Depois de excluir essa pasta e reinstalar todos os pacotes, funciona.

Consegui fazer isso funcionar depois de atualizar para "@storybook/react": "^4.0.0-alpha.21" com "webpack": "^4.17.2"

Estou tendo o problema com o problema DefinePlugin também. Eu tentei acima das correções alfa recomendadas sem sorte. Estou seguindo este tutorial pronto para uso: https://www.valentinog.com/blog/react-webpack-babel/ , que com as versões mais recentes de todas as dependências listadas funciona bem.

getstorybook funciona bem, mas npm run storybook lança a exceção que muitos outros parecem ter encontrado de uma forma ou de outra.

livro de histórias [email protected] C:\work\reactProject\
livro de histórias -p 6006

info @storybook/react v3.4.11
informação
exec: fatal: Não é um repositório git (ou qualquer um dos diretórios pai): .git

exec: fatal: Não é um repositório git (ou qualquer um dos diretórios pai): .git

info => Carregando .babelrc personalizado
info => Carregando configuração de webpack personalizada (modo de extensão).
C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
compilador.ganchos.compilação.tap(
^

TypeError: Não é possível ler a propriedade 'compilação' de indefinido
em DefinePlugin.apply (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
em Compiler.apply (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
em webpack (C:\work\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
em export.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
em buildDev (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
em Objeto.(C:\work\reactProjectnode_modules\@storybook\react\dist\server\index.js:23:22)
em Module._compile (module.js:652:30)
em Object.Module._extensions..js (module.js:663:10)
em Module.load (module.js:565:32)
em tryModuleLoad (module.js:505:12)
em Function.Module._load (module.js:497:3)
em Module.require (module.js:596:17)
at require (internal/module.js:11:18)
em Objeto.(C:\work\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
em Module._compile (module.js:652:30)
em Object.Module._extensions..js (module.js:663:10)
npm ERR! código ELIFECYCLE
npm ERR! erro 1
npm ERR! livro de histórias [email protected] : start-storybook -p 6006
npm ERR! Sair do estado 1
npm ERR!
npm ERR! Falha no script do livro de histórias [email protected] .
npm ERR! Isso provavelmente não é um problema com o npm. Provavelmente há saída de log adicional acima.

Eu adoraria experimentar o Storybook, mas parece que estou frustrado usando o html-webpack-plugin neste caso.

Consegui fazer isso funcionar depois de atualizar para "@storybook/react": "^4.0.0-alpha.21" com "webpack": "^4.17.2"

@ridhoq - você pode compartilhar seus config.js e webpack.config.js para o livro de histórias. Eu tenho as mesmas versões e ainda estou recebendo o erro abaixo:

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)

Além disso, você está usando npm ou yarn?

Claro - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. Não sei se isso será útil para você, pois podemos ter requisitos de compilação diferentes. Estou usando npm para este projeto

Eu tive o mesmo problema depois de atualizar create-react-app para 2.0.3 e esse problema foi resolvido atualizando @storybook/react para ^4.0.0-alpha.21 .

Eu criei uma versão de trabalho com as seguintes versões (mais recentes):

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

adicionei alguns Addon também, espero que este exemplo ajude alguém.

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

@relaxed-tomato você resolveu isso? Eu tenho o mesmo problema. obrigado

Eu criei uma versão de trabalho com as seguintes versões (mais recentes):

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

adicionei alguns Addon também, espero que este exemplo ajude alguém.

Obrigado, isso fez o truque para mim. Mas também tive que instalar babel-core e babel-loader .

Eu criei uma versão de trabalho com as seguintes versões (mais recentes):

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

adicionei alguns Addon também, espero que este exemplo ajude alguém.

Obrigado, isso fez o truque para mim. Mas também tive que instalar babel-core e babel-loader .

Mesmo aqui. Eu tive que usar as seguintes versões do babel core & loader:

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

Eu acidentalmente me deparo com esse problema quando atualizei para o webpack mais recente. A versão 4.20.2 funciona bem.

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

Deu o erro também. A instalação manual do webpack 4.20.2, como mencionado acima, funciona por enquanto.