Storybook: Webpack 4 支持？

Storybook 使用 webpack 作为直接依赖。 所以你不能在你身边替换它的版本。 相反，您可以 fork 我们的 repo 并尝试将相应的软件包更新到 beta 版本。 如果一切顺利，我们将能够在稳定后立即进行升级

有人在做这个吗？

我会这样做，这将是故事书中的重大变化。 问题是自定义 webpack 配置可能包含插件，并且针对 webpack 4 的插件大多数时候（如果不是总是）不向后兼容 webpack 3

太好了，非常感谢！

目前它已被破坏，因为即使 storybook 明确需要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下的 Webpack 3。

现在，只要故事书加载dotenv-webpack ，它就会依次导致 Webpack 4 被调用。

我相信以上是由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

这阻止了我们继续使用 Webpack 4

您可以订阅https://github.com/storybooks/storybook/pull/3148更新

@TomFoyster我遇到了同样的问题，暂时使用yarn而不是npm install来解决它。 在我的情况下似乎可以解决它。

发布为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

在升级到 alpha 版本之前，我遇到了@TomFoyster的问题。

我现在仍然可以通过使用yarn而不是npm来编译它，但是最新的构建似乎没有解决这个问题。

v4.0.0-alpha.0已损坏，请使用更高版本的 alpha（例如v4.0.0-alpha.3 ）

做rm -rf node_modules然后使用yarn install 。 它与storybook v3.4.1和webpack v4.6.0一起使用

具体来说，纱线通过单独安装故事书依赖项来解决问题。

我也试过v4.0.0-alpha.3但@storybook/[email protected]似乎没有使用它。

你得到@ankibalyan哪个错误？ 这个插件在我们的官方示例中似乎可以正常工作

@danmakenoise的解决方案对我有用，用 yarn 而不是 npm 似乎很好。

仅供参考，如果其他人尝试使用npm而不是yarn进行安装， v4.0.0-alpha.3现在似乎可以工作👍

在 4.6.0 和 yarn 工作区上得到与 TomFoyster 相同的错误

@AlastairTaft在您的情况下是哪个故事书版本？

糟糕，对不起，我不在故事书上，这是谷歌唯一针对该错误的命中。

更新：就我而言，我在控制台中运行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/react 现在是否因为 @storybook/core 而被弃用？ @花粉8

当尝试在 Storybook 的 Webpack 配置中使用webpack.DefinePlugin()时，我们遇到了@TomFoyster在https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 中提到的相同问题，但遇到了升级到v4.0.0-alpha.14时我们无法解决的一堆新问题。

有点丑陋的解决方案是在.storybook/webpack.config.js中要求 Storybook 的 Webpack 3 依赖项，而不是我们的 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 -- 你能举一个完整的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包，并在尝试启动服务器时看到大量其他问题。 比较有趣的一个：

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-CLI 3 项目？

@davek1979 npm install @storybook/vue@alpha成功了！

昨天我重新验证了 Yarn 修复，然后清除了我的 node_modules 文件夹并尝试npm install 。 DefinePlugin 上的错误返回。 我再次清除了我的 node_modules 文件夹，并将版本更改为 @storybook/ react@alpha然后重做npm install 。 这就是诀窍。 似乎对我有用的 alpha 版本是 v4.0.0-alpha.16

@anujparikh @pollen8直接要求我们的默认配置已被弃用，您应该在使用它时看到弃用消息。 正确的方法是使用第三个参数： 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工作正常。 我的项目正在使用纱线的工作区，似乎故事书已安装在根节点模块中。 删除该文件夹并重新安装所有软件包后，它就可以工作了。

使用"webpack": "^4.17.2"升级到"@storybook/react": "^4.0.0-alpha.21"后，我能够正常工作

我也遇到了 DefinePlugin 问题。 我已经尝试了上面推荐的 alpha 修复，但没有运气。 我正在按照本教程开箱即用： https ://www.valentinog.com/blog/react-webpack-babel/，它与所有列出的依赖项的最新版本一起工作正常。

getstorybook工作正常，但npm run storybook抛出了许多其他人似乎以一种或另一种形式遇到的异常。

[email protected]故事书 C:\work\reactProject\
开始故事书-p 6006

信息@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)
在要求（内部/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 错误！ 代码生命周期
npm 错误！ 错误号 1
npm 错误！ [email protected]故事书： start-storybook -p 6006
npm 错误！ 退出状态 1
npm 错误！
npm 错误！ [email protected]故事书脚本失败。
npm 错误！ 这可能不是 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) 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

@relaxed-tomato 你解决了吗？ 我有同样的问题。 谢谢

我使用以下（最新）版本创建了一个工作版本：

"@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 core & loader 版本：

"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

也得到了错误。 如上所述手动安装 webpack 4.20.2 现在可以解决问题。