Storybook: Webpack 4のサポート？

Storybookは、直接の依存関係としてwebpackを使用します。 そのため、自分の側でそのバージョンを置き換えることはできません。 代わりに、リポジトリをフォークして、対応するパッケージをベータ版に更新してみてください。 うまくいけば、安定したらすぐにアップグレードできるようになります

まだこれをしている人はいますか？

私はそれをします、そしてそれはストーリーブックの壊滅的な変化になるでしょう。 重要なのは、カスタムWebpack構成にプラグインが含まれている可能性があり、Webpack 4を対象とするプラグインは、ほとんどの場合（常にではないにしても）、Webpack3との下位互換性がないことです。

素晴らしい、どうもありがとう！

ストーリーブックが明示的にwebpack==3.11.0を必要とし、そのnode_modulesサブディレクトリにWebpack 3のプライベートコピーを取得しているにもかかわらず、現在は壊れています。また、 dotenv-webpackも必要です。

これで、 dotenv-webpackはwebpack==^1 || ^2 || ^3 || ^4のピア依存関係をリストします。これにより、 npmは、次ではなくWebpack 4の隣のメインnode_modulesにインストールすることをお勧めします。 @storybook/react/node_modulesの下のWebpack3へ。

これで、ストーリーブックがdotenv-webpackをロードするとすぐに、Webpack4が呼び出されます。

上記はnpmのバグが原因だと思います： https ：//github.com/npm/npm/issues/19944

現在、私たちの側で移行をブロックしているもののチェックリストは、 https：//github.com/storybooks/storybook/pull/3148に移動しました

Webpack 4を使用するプロジェクトでStorybookを実行すると、以下のエラーが発生します。

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

TypeError: Cannot read property 'compilation' of undefined

これにより、Webpack4を続行できなくなります。

https://github.com/storybooks/storybook/pull/3148の更新をサブスクライブできます

@TomFoyster同じ問題が発生しましたが、一時的にnpm install yarnを使用して回避しました。 私の場合は修正するようです。

v4.0.0-alpha.0としてリリース

@Hypnosphiは、 v4.0.0-alpha.0に更新した後、ストーリーブックのコンパイルが停止し、 compatプラグインでハングし、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

アルファビルドにアップグレードする前に、 @ TomFoysterの問題に遭遇していました。

npm yarnを使用しても、今でもコンパイルできますが、最新のビルドでは問題が修正されていないようです。

v4.0.0-alpha.0が壊れています。後のアルファを使用してください（例： v4.0.0-alpha.3 ）

rm -rf node_modulesを実行してから、 yarn installを使用します。 storybook v3.4.1とwebpack v4.6.0動作します

具体的には、yarnはストーリーブックの依存関係を個別にインストールすることで問題を解決します。

v4.0.0-alpha.3も試しましたが、 @storybook/[email protected]が機能していないようです。

@ankibalyanでどのエラーが発生しますか？ このアドオンは、公式の例では問題なく機能しているようです

@danmakenoiseのソリューションは私にとってはうまくいきます、npmの代わりにyarnで問題ないようです。

参考までに、他の誰かがyarn npmを使用してインストールしようとしている場合、 v4.0.0-alpha.3は現在機能しているようです👍

4.6.0およびyarnワークスペースでTomFoysterと同じエラーが発生する

@AlastairTaftあなたの場合、どのストーリーブックバージョンですか？

申し訳ありませんが、私はストーリーブックを使用していません。これは、エラーが発生した唯一のGoogleヒットでした。

更新：私の場合、コンソールでwebpackを実行しているときに、TomFoysterのエラーが発生していました。 代わりに、 npx webpackを実行すると回避できます。

yarnがこれに対する依存関係であることは非常にばかげています。

編集： npm i -g @storybook/cli@alphaこの問題を修正します👍

@storybook/cli@alphaと@storybook/react@alpha （Reactを使用している場合）を使用すると、ストーリーブックの読み込みの問題が修正されることを確認します。

@Hypnosphi v4.0.0-alpha.3をwebpack ^4.8.1で使用しようとしています。
下記のエラーが発生します
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
ポインタはありますか？

@anujparikh間違っているかもしれませんが、今は次のように置き換えられていると思います

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

@ storybook / coreが原因で、@ storybook / reactは非推奨になりましたか？ @ pollen8

StorybookのWebpack構成でwebpack.DefinePlugin()を使用しようとすると、@ TomFoysterがhttps://github.com/storybooks/storybook/issues/3044#issuecomment -371071093で言及しているのと同じ問題が発生しましたが、 v4.0.0-alpha.14にアップグレードしたときに解決できなかった新しい問題の束。

やや醜い解決策は、Webpack 4の依存関係ではなく、 .storybook/webpack.config.jsにStorybookのWebpack3の依存関係を要求することでした。

// .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-完全なwebpack.config.jsファイルの例を教えてください。 私はあなたのラインが私の設定にどのように適合するかわかりません：

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もちろんです！

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

ただし、これが必要になるのは、webpackライブラリのプラグインを使用する必要がある場合のみです。 DefinePluginを使用するために必要でした。

私はDefinePluginに関して同じ問題に直面していますが、私の.storybook / webpack.config.jsファイルにはDefinePluginへの参照がなく、それらの参照は私のメインプロジェクトのwebpack.config.jsにのみあります。 Storybookが.storybookフォルダー内にメインファイルを持っているのに、なぜメインファイルにアクセスするのかわかりません。

@ storybook / react @ alphaパッケージにアップグレードしようとしましたが、サーバーを起動しようとすると、他の問題の膨大なリストが表示されます。 より興味深いものの1つ：

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)

同じプロジェクトをYarnに交換すると、すべてが問題なく機能することを確認しました。

この修正をVue-CLI3プロジェクトに適用するにはどうすればよいでしょうか。

@ davek1979 npm install @storybook/vue@alphaがトリックを行います！

昨日、Yarnの修正を再確認してから、node_modulesフォルダーを消去して、 npm installを試しました。 DefinePluginのエラーが返されました。 node_modulesフォルダーを再度消去し、バージョンを@ storybook / react @ alphaに変更してから、 npm installをやり直しました。 それがトリックです。 私のために機能しているように見えたアルファのバージョンはv4.0.0-alpha.16でした

デフォルトの設定を直接必要とする@ anujparikh @ pollen8は非推奨になりました。使用すると、非推奨のメッセージが表示されます。 正しい方法は、3番目の引数を使用することです： https ：//storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocasterいいえ、 @storybook/coreは、さまざまなフレームワークのストーリーブックで共有される内部ライブラリです。 それでも@storybook/reactを使用する必要があります

@hanshenrik

v4.0.0-alpha.14にアップグレードするときに解決できなかった新しい問題がたくさん発生しました。

4.0.0-alpha.20でもう一度試して、発生した問題があれば共有してください。

4.0.0-alpha.20とwebpack4.10.2で試してみましたが、DefinePluginが機能しません。

@nerdmax複製の例を教えてください。 私たちはこのプラグインを自分たちで使用し、それは私たちのために機能します

@Hypnosphiご回答ありがとうございます。 申し訳ありませんが、確認したところ、 4.0.0-alpha.20で正常に動作しています。 私のプロジェクトはyarnのワークスペースを使用しており、ストーリーブックがルートnode_moduleにインストールされているようです。 そのフォルダを削除してすべてのパッケージを再インストールすると、機能します。

"webpack": "^4.17.2"で"@storybook/react": "^4.0.0-alpha.21"にアップグレードした後、これを機能させることができました

私はDefinePluginの問題にも問題があります。 私は運が悪かったので、上記の推奨されるアルファ修正を試しました。 私は箱から出してこのチュートリアルに従っています： https ：//www.valentinog.com/blog/react-webpack-babel/、リストされているすべての依存関係の最新バージョンで正常に動作します。

getstorybookは正常に機能しますが、 npm run storybookは、他の多くの人が何らかの形で遭遇したと思われる例外をスローします。

[email protected]ストーリーブックC：\ work \ reactProject \
start-storybook -p 6006

info @ storybook / react v3.4.11
情報
exec：致命的：gitリポジトリ（または親ディレクトリのいずれか）ではありません：.git

exec：致命的：gitリポジトリ（または親ディレクトリのいずれか）ではありません：.git

info =>カスタム.babelrcを読み込んでいます
info =>カスタムwebpack設定を読み込んでいます（拡張モード）。
C：\ work \ reactProjectnode_moduleswebpack \ lib \ DefinePlugin.js：93
compiler.hooks.compilation.tap（
^

TypeError：未定義のプロパティ 'コンパイル'を読み取ることができません
DefinePlugin.apply（C：\ work \ reactProjectnode_moduleswebpack \ lib \ DefinePlugin.js：93：18）
compiler.applyで（C：\ work \ reactProject \ node_modules \ @storybook \ corenode_modules \ tapable \ lib \ Tapable.js：375：16）
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）
オブジェクトで。（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）で
必要に応じて（internal / module.js：11：18）
オブジェクトで。（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！ コードELIFECYCLE
npm ERR！ errno 1
npm ERR！ [email protected]ストーリーブック： start-storybook -p 6006
npm ERR！ 終了ステータス1
npm ERR！
npm ERR！ [email protected]ストーリーブックスクリプトで失敗しました。
npm ERR！ これはおそらくnpmの問題ではありません。 上記の追加のログ出力がある可能性があります。

Storybookを試してみたいのですが、この場合はhtml-webpack-pluginを使用することで妨げられているようです。

"webpack": "^4.17.2"で"@storybook/react": "^4.0.0-alpha.21"にアップグレードした後、これを機能させることができました

@ ridhoq-ストーリーブックのconfig.jsとwebpack.config.jsを共有できますか。 私は同じバージョンを持っていますが、それでも以下のエラーが発生します：

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)

また、npmまたはyarnを使用していますか？

確かに-https ：//gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4。 ビルド要件が異なる可能性があるため、これがどの程度役立つかわかりません。 このプロジェクトではnpmを使用しています

create-react-appを2.0.3にアップグレードした後も同じ問題が発生しましたが、この問題は@storybook/reactを^4.0.0-alpha.21にアップグレードすることで解決しました。

次の（最新の）バージョンで動作するバージョンを作成しました。

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

アドオンも追加しました。この例が誰かに役立つことを願っています。

e ../ 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）atModule。 ./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

@ Relaxed-トマトはこれを解決しましたか？ 同じ問題があります。 ありがとう

次の（最新の）バージョンで動作するバージョンを作成しました。

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

アドオンも追加しました。この例が誰かに役立つことを願っています。

おかげで、それは私のためのトリックをしました。 しかし、 babel-coreとbabel-loaderもインストールする必要がありました。

次の（最新の）バージョンで動作するバージョンを作成しました。

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

アドオンも追加しました。この例が誰かに役立つことを願っています。

おかげで、それは私のためのトリックをしました。 しかし、 babel-coreとbabel-loaderもインストールする必要がありました。

こっちも一緒。 次のbabelコアとローダーのバージョンを使用する必要がありました。

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

最新のWebpackにアップグレードしたときに、誤ってこの問題が発生しました。 バージョン4.20.2は正常に機能します。

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

同様にエラーが発生しました。 上記のようにwebpack4.20.2を手動でインストールすると、今のところうまくいきます。