[英]React Storybook with Webpack Error - Module build failed: TypeError: Cannot read property 'thisCompilation' of undefined
I am getting this error while trying to start the storybook
with Webpack@4.17.2
and mini-css-extract-plugin
. 我尝试使用
Webpack@4.17.2
和mini-css-extract-plugin
启动storybook
时遇到此错误。 I am using mini-css-extract-plugin
instead of extract-text-webpack-plugin
since it is not supporting Webpack > 4.xx
我使用
mini-css-extract-plugin
而不是extract-text-webpack-plugin
因为它不支持Webpack > 4.xx
Any Ideas how to resolve this issue without downgrading to webpack < 4.xx Error: 任何想法如何解决此问题而不降级到webpack <4.xx错误:
ERROR in ./src/styles/styles.less
Module build failed: TypeError: Cannot read property 'thisCompilation' of undefined
at NodeTemplatePlugin.apply (C:\Users\sbr\Documents\Github\my-app\node_modules\webpack\lib\node\NodeTemplatePlugin.js:19:18)
at Object.pitch (C:\Users\sbr\Documents\Github\my-app\node_modules\mini-css-extract-plugin\dist\loader.js:79:51)
package json contents: 打包json内容:
{
"name": "my-app",
"version": "1.0.0",
"description": "my app",
"main": "app.js",
"repository": "https://github.com",
"author": "sbr",
"license": "MIT",
"private": false,
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"moment": "^2.22.2",
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"@storybook/addon-actions": "^3.4.10",
"@storybook/addon-links": "^3.4.10",
"@storybook/addons": "^3.4.10",
"@storybook/react": "^3.4.10",
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.2",
"path": "^0.12.7",
"style-loader": "^0.23.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
Storybook webpack.config contents: 故事书webpack.config内容:
const ExtractTextPlugin = require('mini-css-extract-plugin');
const extractTextPlugin = new ExtractTextPlugin('src/styles/styles.less');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}, {
test: /\.jsx?$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.less$/,
use: [ExtractTextPlugin.loader, 'css-loader','less-loader']
}
]
}
};
I think the short answer was touched on by SamVK in the comments. 我认为SamVK在评论中提到了简短的答案。 As the Storybook issue states, there was work to be done to make storybook Webpack 4 compatible.
正如Storybook问题所指出的,需要做一些工作来使Storybook Webpack 4兼容。 There are some workarounds, but your mileage may vary.
有一些解决方法,但是您的里程可能会有所不同。
Your best bet as of Dec 2018 is to make sure you're on the latest version of Webpack 4.x, Storybook 4.x and make sure you include the correct version of babel core and babel loader based on the other things you've included. 截至2018年12月,您最好的选择是确保您使用的是最新版本的Webpack 4.x,Storybook 4.x,并确保根据其他情况包括正确版本的babel核心和babel加载器包括在内。
https://github.com/storybooks/storybook/issues/3044 https://github.com/storybooks/storybook/issues/3044
https://github.com/storybooks/storybook/pull/3148 https://github.com/storybooks/storybook/pull/3148
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.