首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Webpack: TypeError:无法读取未定义属性的属性

Webpack: TypeError:无法读取未定义属性的属性
EN

Stack Overflow用户
提问于 2018-10-09 15:14:02
回答 6查看 50K关注 0票数 24

下面是有问题的分支和回购: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。

webpack

代码语言:javascript
运行
复制
/* 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

代码语言:javascript
运行
复制
{
  "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"
  }
}
EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2018-10-16 18:23:22

尝试安装最新的LTS版本的Node并再次测试。工作非常好,我与最新的LTS节点和npm。

票数 8
EN

Stack Overflow用户

发布于 2019-01-11 18:45:01

如果是在更新npm软件包之后发生的,那么拆卸并重新安装webpack webpack-cli。

npm remove webpack webpack-cli

npm install --save-dev webpack webpack-cli

我建议您在做任何事情之前升级/更新节点。

票数 35
EN

Stack Overflow用户

发布于 2018-10-13 16:50:22

你需要做两件事:

  1. 移除webpack@4.20.2和webpack-cli@2.0.10依赖项,并专门安装3.0.4@4.19.0和3.0.4@3.0.4版本。Webpack 4.20.x发布有错误.
  2. 也不要使用extract-text-webpack-plugin

extract-text-webpack-plugin不应与Webpack 4一起使用来提取CSS。它不起作用。而不是这样,尝试使用:迷你-css-提取-插件

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

注意:当我提到在我的系统上克隆存储库时,我不得不对board.js文件进行更改。我修改了这个导入语句:import CoinMarketCap from 'components/Partials/Coinmarketcap/link'; --它在Linux系统上不工作,因为路径是区分大小写的。

票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52724312

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档