![](/img/trans.png)
[英]Module build failed: TypeError: Cannot read property 'context' of undefined - Webpack
[英]React Storybook with Webpack Error - Module build failed: TypeError: Cannot read property 'thisCompilation' of undefined
我嘗試使用Webpack@4.17.2
和mini-css-extract-plugin
啟動storybook
時遇到此錯誤。 我使用mini-css-extract-plugin
而不是extract-text-webpack-plugin
因為它不支持Webpack > 4.xx
任何想法如何解決此問題而不降級到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)
打包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"
}
}
故事書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']
}
]
}
};
我認為SamVK在評論中提到了簡短的答案。 正如Storybook問題所指出的,需要做一些工作來使Storybook Webpack 4兼容。 有一些解決方法,但是您的里程可能會有所不同。
截至2018年12月,您最好的選擇是確保您使用的是最新版本的Webpack 4.x,Storybook 4.x,並確保根據其他情況包括正確版本的babel核心和babel加載器包括在內。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.