Webpack: TypeError: Cannot read property 'properties' of undefined

问题:

Here is the branch and repo in question: 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,

Not sure why I'm getting this error, but I upgraded from Webpack 3 to 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

{   "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 <leongaban@gmail.com>",   "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"   } } 

回答1:

Try to install latest LTS version of Node and test again. Works perfectly fine for me with latest LTS node and npm.

回答2:

There are two things you need to do:

1. Remove webpack@4.20.2 and webpack-cli@2.0.10 dependency and specifically install webpack@4.19.0 and webpack-cli@3.0.4 version. Webpack 4.20.x release has error.
2. Also do not use extract-text-webpack-plugin.

extract-text-webpack-plugin should not be used with Webpack 4 to extract CSS. It doesn't work. Instead of this, try using: mini-css-extract-plugin.

After these changes, webpack should compile your code and generate necessary bundle.

Note: When I cloned mentioned repository on my system, I had to make changes to board.js file. 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.

回答3:

If it is happening after you have updated npm packages , then remove and reinstall webpack webpack-cli
npm remove webpack webpack-cli
npm install webpack webpack-cli
** My suggestio is you also upgrade/update node before doing anything.

回答4:

It's ^ symbol in "webpack-cli": "^2.0.10" dependency which resulting to minor/patch version getting upgraded to latest webpack-cli@2.x.x, which has following change.

Change in webpack resulting in the issue: (change output to outputOptions) REF: https://github.com/webpack/webpack-cli/pull/605

Solution: (installing webpack-cli@3.x.x)

npm uninstall webpack-cli

npm install --save-dev webpack-cli@3.1.1

REF:Solution

文章来源: Webpack: TypeError: Cannot read property 'properties' of undefined