javascript Webpack：TypeError：无法读取未定义的属性“属性”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52724312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack: TypeError: Cannot read property 'properties' of undefined
提问by Leon Gaban
Here is the branch and repo in question: https://github.com/Futuratum/moon.holdings/tree/dev
这是有问题的分支和回购：https: //github.com/Futuratum/moon.holdings/tree/dev
/Users/leongaban/projects/Futuratum/moon.holdings/node_modules/webpack-cli/bin/config-yargs.js:89 describe: optionsSchema.definitions.output.properties.path.description,
/Users/leongaban/projects/Futuratum/moon.holdings/node_modules/webpack-cli/bin/config-yargs.js:89 描述：optionsSchema.definitions.output.properties.path.description，
Not sure why I'm getting this error, but I upgraded from Webpack 3 to 4.
不知道为什么我会收到这个错误，但我从 Webpack 3 升级到了 4。
webpack
网络包
/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
const moonholdings = path.resolve(__dirname, 'moonholdings');
const app = path.resolve(__dirname, 'app');
const nodeModules = path.resolve(__dirname, 'node_modules');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/app/index.html'),
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'moonholdings.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfigOptions = [{
from: 'app/static',
to: 'static/'
}];
const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);
const PATHS = {
app,
build: moonholdings
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: ['babel-polyfill', PATHS.app],
performance: {
hints: false,
maxAssetSize: 1000000
},
output: {
path: PATHS.build,
publicPath: '/',
filename: 'index_bundle.js'
},
resolve: {
modules: [app, nodeModules]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
}
};
const developmentConfig = {
devtool: 'inline-source-map',
devServer: {
contentBase: moonholdings
},
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: false,
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
export default Object.assign(
{}, base,
isProduction === true ? productionConfig : developmentConfig
);
package.json
包.json
{
"name": "moon.holdings",
"version": "1.0.0",
"description": "Cryptocurrency asset portfolio",
"main": "index.js",
"repository": "https://github.com/Futuratum/moon.holdings.git",
"author": "Leon Gaban <[email protected]>",
"license": "MIT",
"scripts": {
"start": "webpack && webpack-dev-server",
"webpack": "webpack-dev-server",
"dev": "webpack-dev-server",
"build": "webpack -p",
"production": "webpack -p",
"test": "yarn run test-eslint; yarn run test-jest:update",
"test-eslint": "eslint app",
"test-eslint:fix": "eslint --fix app",
"test-sasslint": "./node_modules/.bin/sass-lint 'app/**/*.scss' -v -q",
"test-jest": "jest",
"test-jest:watch": "jest --watch",
"test-jest:coverage": "jest --coverage",
"test-jest:update": "jest --updateSnapshot"
},
"setupFiles": [
"<rootDir>/config/polyfills.js",
"<rootDir>/src/setupTests.js"
],
"now": {
"name": "moonholdings",
"alias": "moon.holdings"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules",
"app"
],
"setupTestFrameworkScriptFile": "./app/utils/testConfigure.js"
},
"dependencies": {
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.10",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-node": "^0.3.2",
"eslint-plugin-dependencies": "^2.4.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"flexboxgrid": "^6.3.1",
"git-hooks": "^1.1.10",
"history": "^4.7.2",
"html-webpack-plugin": "^3.0.6",
"jest": "^22.4.2",
"lodash": "^4.17.10",
"node-sass": "^4.7.2",
"path-to-regexp": "^2.2.0",
"ramda": "^0.25.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^4.0.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-sortable-hoc": "^0.6.8",
"react-test-renderer": "^16.3.2",
"redux": "^3.7.2",
"redux-mock-store": "^1.5.1",
"redux-thunk": "^2.2.0",
"rest": "^2.0.0",
"sass-lint": "^1.12.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.2",
"svg-inline-loader": "^0.8.0",
"svg-loader": "^0.0.2",
"url-loader": "^1.0.1",
"webpack": "^4.20.2",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "2.11.1"
}
}
采纳答案by Karen Grigoryan
Try to install latest LTS version of Node and test again. Works perfectly fine for me with latest LTS node and npm.
尝试安装最新的 LTS 版本的 Node 并再次测试。使用最新的 LTS 节点和 npm 对我来说效果很好。
回答by Bikram Thapa
If it is happening after you have updated npm packages , then remove and reinstall webpack webpack-clinpm remove webpack webpack-clinpm install --save-dev webpack webpack-cli
I would suggest you to upgrade/update node before doing anything.
如果它发生在你更新 npm 包之后，那么删除并重新安装 webpack webpack-clinpm remove webpack webpack-clinpm install --save-dev webpack webpack-cli
我建议你在做任何事情之前升级/更新节点。
回答by Harshal Patil
There are two things you need to do:
您需要做两件事：
- Remove [email protected] and [email protected] dependency and specifically install [email protected] and [email protected] version. Webpack 4.20.x release has error.
- Also do not use
extract-text-webpack-plugin.
- 删除 [email protected] 和 [email protected] 依赖，专门安装 [email protected] 和 [email protected] 版本。Webpack 4.20.x 版本有错误。
- 也不要使用
extract-text-webpack-plugin.
extract-text-webpack-pluginshould not be used with Webpack 4 to extract CSS. It doesn't work. Instead of this, try using: mini-css-extract-plugin.
extract-text-webpack-plugin不应与 Webpack 4 一起使用来提取 CSS。它不起作用。相反，请尝试使用：mini-css-extract-plugin。
After these changes, webpack should compile your code and generate necessary bundle.
在这些更改之后，webpack 应该编译您的代码并生成必要的包。
Note: When I cloned mentioned repository on my system, I had to make changes to board.jsfile. I made change to this import statement: import CoinMarketCap from 'components/Partials/Coinmarketcap/link';This doesn't work on Linux system as paths are case sensitive.
注意：当我在我的系统上克隆提到的存储库时，我必须对board.js文件进行更改。我对此导入语句进行了更改：import CoinMarketCap from 'components/Partials/Coinmarketcap/link';这在 Linux 系统上不起作用，因为路径区分大小写。
回答by Vijayraj
It's ^symbol in "webpack-cli": "^2.0.10" dependency which resulting to minor/patch version getting upgraded to latest [email protected], which has following change.
它是"webpack-cli": "^2.0.10" 中的^符号，导致次要/补丁版本升级到最新的 [email protected]，它有以下变化。
Change in webpack resulting in the issue: (change output to outputOptions) REF: https://github.com/webpack/webpack-cli/pull/605
导致问题的 webpack 更改：（将输出更改为 outputOptions）参考：https: //github.com/webpack/webpack-cli/pull/605
Solution: (installing [email protected])
解决方法：（安装[email protected]）
npm uninstall webpack-cli
npm 卸载 webpack-cli
npm install --save-dev [email protected]
npm install --save-dev [email protected]
REF:Solution
参考：解决方案
回答by Om Prakash Kumar
migrating to latest version solved the error for me: webpack-cli^3.3.11
迁移到最新版本为我解决了错误：webpack-cli^3.3.11
