代码之家  ›  专栏  ›  技术社区  ›  Leon Gaban

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

  •  4
  • Leon Gaban  · 技术社区  · 6 年前

    https://github.com/Futuratum/moon.holdings/tree/dev

    /Users/leongaban/projects/Futuratum/moon.holdings/node\u modules/webpack cli/bin/config yargs.js:89

    我不知道为什么会出现这个错误,但是我从网页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
    );
    

    包.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"
      }
    }
    
    4 回复  |  直到 6 年前
        1
  •  5
  •   Karen Grigoryan    6 年前

    尝试安装节点的最新LTS版本并再次测试。使用最新的LTS节点和npm对我来说非常好。

        2
  •  26
  •   Inti    5 年前


    npm remove webpack webpack-cli
    npm install --save-dev webpack webpack-cli
    我建议您在做任何事情之前升级/更新node。

        3
  •  9
  •   Harshal Patil    6 年前

    1. 删除webpack@4.20.2 以及webpack-cli@2.0.10 依赖关系和特定安装webpack@4.19.0 以及webpack-cli@3.0.4 版本。网页包 4.20.x release has error .
    2. extract-text-webpack-plugin .

    提取文本网页包插件 不应与Webpack 4一起使用以提取CSS。它不起作用。请尝试使用: mini-css-extract-plugin

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

    board.js 文件。我更改了此导入语句: import CoinMarketCap from 'components/Partials/Coinmarketcap/link'; 这在Linux系统上不起作用,因为路径区分大小写。

        4
  •  8
  •   Vijayraj    6 年前

    它是 ^ “webpack cli”中的符号“^2.0.10”依赖关系导致次要/修补程序版本升级到最新版本webpack-cli@2.x.x,它有以下更改。

    导致问题的网页包更改:(将输出更改为输出选项) 裁判: https://github.com/webpack/webpack-cli/pull/605

    npm卸载webpack cli

    npm安装--保存开发webpack-cli@3.1.1

    裁判: Solution

        5
  •  0
  •   Om Prakash Kumar    5 年前

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