web-dev-qa-db-fra.com

Webpack: TypeError: Impossible de lire la propriété «propriétés» d'undefined

Voici la succursale et le référentiel en question: https://github.com/Futuratum/moon.holdings/tree/dev

/Users/leongaban/projects/Futuratum/moon.holdings/node_modules/webpack-cli/bin/config-yargs.js:89 décrivent: optionsSchema.definitions.output.properties.path.description,

Je ne sais pas pourquoi j'obtiens cette erreur, mais j'ai effectué une mise à niveau de Webpack 3 vers 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 <[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"
  }
}
javascriptwebpack
7
Leon Gaban

Essayez d'installer la dernière version LTS de Node et testez à nouveau. Fonctionne parfaitement pour moi avec le dernier nœud LTS et npm.

2
Karen Grigoryan

Il y a deux choses que vous devez faire:

  1. Supprimez la dépendance [email protected] et [email protected] et installez spécifiquement la version [email protected] et [email protected]. Webpack la version 4.20.x a une erreur .
  2. N'utilisez pas non plus extract-text-webpack-plugin.

extract-text-webpack-plugin ne doit pas être utilisé avec Webpack 4 pour extraire CSS. Ça ne marche pas. Au lieu de cela, essayez d'utiliser: mini-css-extract-plugin .

Après ces modifications, webpack devrait compiler votre code et générer le bundle nécessaire.

Remarque: lorsque j'ai cloné le référentiel mentionné sur mon système, j'ai dû apporter des modifications à board.js fichier. J'ai apporté des modifications à cette déclaration d'importation: import CoinMarketCap from 'components/Partials/Coinmarketcap/link'; Cela ne fonctionne pas sur le système Linux car les chemins sont sensibles à la casse.

8
Harshal Patil

Si cela se produit après avoir mis à jour les packages npm, supprimez et réinstallez webpack webpack-cli
npm remove webpack webpack-cli
npm install webpack webpack-cli
** Mon suggestion est de mettre à niveau/mettre à jour le nœud avant de faire quoi que ce soit.

8
Bikram Thapa

C'est le symbole ^ dans "webpack-cli": dépendance "^ 2.0.10" qui entraîne la mise à niveau de la version mineure/du correctif vers la dernière version de webpack-cli @ 2.xx, qui a le changement suivant.

Changement de webpack entraînant le problème: (change la sortie en outputOptions) REF: https://github.com/webpack/webpack-cli/pull/605

Solution: (installation de [email protected])

npm désinstaller webpack-cli

npm install --save-dev [email protected]

REF: Solution

5
Vijayraj