Webpack：TypeError：无法读取未定义的属性“属性”

Posted

技术标签:

【中文标题】Webpack：TypeError：无法读取未定义的属性“属性”【英文标题】：Webpack: TypeError: Cannot read property 'properties' of undefined 【发布时间】：2019-03-14 10:13:19 【问题描述】：

这里是有问题的分支和回购：https://github.com/Futuratum/moon.holdings/tree/dev

/Users/leongaban/projects/Futuratum/moon.holdings/node_modules/webpack-cli/bin/config-yargs.js:89 描述：optionsSchema.definitions.output.properties.path.description，

不知道为什么会出现此错误，但我已从 Webpack 3 升级到 4。

网络包

/* 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"

【问题讨论】：

它对我来说很好，你能澄清哪个脚本给出了错误吗？您使用什么节点和 npm 版本？一般来说，重现错误之前的步骤是什么？我尝试了开发和构建。工作得很好。 @KarenGrigoryan node: v10.8.0 npm 6.4.1 等你下载了 repo，它构建并运行良好？哪个分支？ 没错，分支就是dev。我 98% 确定它是节点。尝试安装最新的 LTS 版本的 node v8.12.0 并再次检查 @KarenGrigoryan 我的本地仓库出了点问题。我把它扔了，重新拉了主人，它又跑了。我也确实使用 NVM 切换到 Node 8.11。想发表你的答案？我认为我的本地存储库中出现了一些问题。 我添加了答案，谢谢。 【参考方案1】：

如果在你更新 npm 包之后发生这种情况，那么删除并重新安装 webpack webpack-clinpm remove webpack webpack-clinpm install --save-dev webpack webpack-cli 我建议您在做任何事情之前升级/更新节点。

【讨论】：

【参考方案2】：

它是 "webpack-cli" 中的 ^ 符号："^2.0.10" 依赖导致次要/补丁版本升级到最新的 webpack-cli@2.xx，它有以下变化.

导致问题的 webpack 更改：（将输出更改为 outputOptions） 参考：https://github.com/webpack/webpack-cli/pull/605

解决方法：（安装 webpack-cli@3.x.x）

npm 卸载 webpack-cli

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

REF:Solution

【讨论】：

在 MacOS Catalina 10.15.5 上运行，过程对我有用： npm uninstall webpack npm uninstall webpack-cli npm uninstall webpack-dev-server npm install webpack npm install webpack-cli npm install webpack-dev-服务器【参考方案3】：

你需要做两件事：

    移除 webpack@4.20.2 和 webpack-cli@2.0.10 依赖，专门安装 webpack@4.19.0 和 webpack-cli@3.0.4 版本。 Webpack 4.20.x release has error. 也不要使用extract-text-webpack-plugin。

extract-text-webpack-plugin 不应该与 Webpack 4 一起使用来提取 CSS。它不起作用。而不是这个，尝试使用：mini-css-extract-plugin。

在这些更改之后，webpack 应该编译你的代码并生成必要的包。

注意：当我在我的系统上克隆提到的存储库时，我必须对 board.js 文件进行更改。我对此导入语句进行了更改：import CoinMarketCap from 'components/Partials/Coinmarketcap/link'; 这在 Linux 系统上不起作用，因为路径区分大小写。

【讨论】：

它确实有效，但不建议这样做。但它完全有效。在我们的项目中，我们使用最新的 webpack 构建，带有 0 个问题的提取文本插件 @KarenGrigoryan，extract-text-webpack-plugin 在 Webpack 4 中将不起作用。在 extract 插件中使用 allChunks 属性会导致整个构建中断，而不仅仅是警告。 那么有一些特定于您的构建的东西。我告诉你，无论有没有 allChunks，我们都没有遇到任何问题：真的。我只是仔细检查了它是否仍在工作。检查你的构建，尝试 extract-text-webpack-plugin@next version 我完成了第 1 步，但是 yarn install 产生了这个错误：error upath@1.0.4: The engine "node" is incompatible with this module. Expected version "&gt;=4 &lt;=9". 并且中断，停止安装包。 没有为我解决。我正在使用 Webpack 4.3.0 并尝试恢复到 4.19.0【参考方案4】：

尝试安装最新的 LTS 版本的 Node 并再次测试。使用最新的 LTS 节点和 npm 非常适合我。

【讨论】：

【参考方案5】：

迁移到最新版本为我解决了错误：webpack-cli^3.3.11

【讨论】：

升级到 3.3.12 会抛出“TypeError: Cannot read property 'tapAsync' of undefined”错误

以上是关于Webpack：TypeError：无法读取未定义的属性“属性”的主要内容，如果未能解决你的问题，请参考以下文章

模块构建失败：TypeError：无法读取未定义的属性“上下文” - Webpack

Angular 13 Webpack 异常：TypeError：无法读取未定义的属性（读取“NODE_DEBUG”）

Rails 6.1.0 [webpack-cli] TypeError：无法读取未定义的属性“插件”

Webpack 4 css模块TypeError：无法读取未定义的属性“上下文”

TypeError：无法读取未定义的属性“javascript”+ terser webpack 插件+ react js

TypeError：添加 webpack-subresource-integrity 时无法读取未定义的属性“tap”