Не удалось запустить проект React-Redux. Ошибка веб-пакета

$ нпм начало

｢wds｣:Недопустимый объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API. - Configuration.resolve имеет неизвестное свойство «modulesDirectories». Допустимы следующие свойства: object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, forceExtension?, forceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins. ?, преобразователь?, символические ссылки?, unsafeCache?, useSyncFileSystemCalls? } -> Опции для преобразователя

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx', '.css'],
        modulesDirectories: [
            'node_modules'
          ]     
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader'
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })],
    devServer: {
        historyApiFallback: true
    },
    externals: {
        // global app config object
        config: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    }
}

package.json

{
  "name": "react-redux-registration-login-example",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/cornflourblue/react-redux-registration-login-example.git"
  },
  "license": "MIT",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "history": "^4.6.3",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "semantic-ui-react": "^0.88.1",
    "style-loader": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.3"
  }
}

webpack reactjs webpack-dev-server webpack-style-loader
person Sajal Shrestha    schedule 03.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как указано в предупреждении, resolve.modulesDirectories не является допустимым свойством. Это была опция в Webpack версии 1, но начиная с версии 2 она была переименована в resolve.modules.

Поэтому измените свою конфигурацию на:

resolve: {
  extensions: ['.js', '.jsx', '.css'],
  modules: [
    'node_modules'
  ]     
},

См.: https://webpack.js.org/migrate/3/.

resolve.root, resolve.fallback, resolve.modulesDirectories

Эти параметры были заменены одним параметром resolve.modules. Подробнее об использовании см. в разделе разрешение.

person Chris    schedule 03.10.2019