错误运行节点服务器，用于React配置的webpack

时间：2017-08-20 01:50:31

标签： django reactjs webpack-dev-server webpack-2

我已经在这持续了几个小时，并且无法抓住这个虫子。我跟随"Guide on how to create and set up your Django project with webpack, npm and ReactJS :)"

这是我尝试时遇到的错误： node server.js 

(bonchans) ➜  bonchans git:(master) ✗ node server.js                                                 

    /Users/JuanPerez/Desktop/Sandbox/DEV/django+reactjs/django-react-boilerplate/bonchans/bonchans/node_modules/webpack/lib/webpack.js:19
    throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
    ^

    WebpackOptionsValidationError: Invalid configuration object. Webpack has 
    been initialised using a configuration object that does not match the API schema.
     - configuration.resolve has an unknown property 'modulesDirectories'. These 
    properties are valid:
       object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, 
    descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, 
    fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, 
    resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
     - configuration.resolve.extensions[0] should not be empty.
        at webpack (/Users/JuanPerez/Desktop/Sandbox/DEV/django+reactjs/django-react-boilerplate/bonchans/bonchans/node_modules/webpack/lib/webpack.js:19:9)
        at Object.<anonymous> 
    (/Users/JuanPerez/Desktop/Sandbox/DEV/django+reactjs/django-react-
   boilerplate/bonchans/bonchans/server.js:5:22)
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
        at Module.runMain (module.js:604:10)
        at run (bootstrap_node.js:389:7)
        at startup (bootstrap_node.js:149:9)
   (bonchans) ➜  bonchans git:(master) ✗

配置文件：

我的package.json看起来像这样：

    {
      "name": "bonchans",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",

      "repository": {
        "type": "git",
        "url": "git+https://github.com/juanto85/bonchans.git"
      },
      "author": "Juan Perez",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/juanto85/bonchans/issues"
      },
      "homepage": "https://github.com/juanto85/bonchans#readme",
      "devDependencies": {
        "babel": "^6.23.0",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "react": "^15.6.1",
        "react-hot-loader": "^1.3.1",
        "webpack": "^3.5.5",
        "webpack-bundle-tracker": "^0.2.0",
        "webpack-dev-server": "^2.7.1"
      }
      "scripts": {
        "build": "webpack --config webpack.config.js --progress --colors",
        "build-production": "webpack --config webpack.prod.config.js --progress --colors",
        "watch": "node server.js"
        }
    }

我的webpack.config.js看起来像这样：

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')


module.exports = {
  context: __dirname,
  entry: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './apps/static/js/index'
  ],

  output: {
      path: path.resolve('./apps/static/bundles/'),
      filename: '[name]-[hash].js',
      publicPath: 'http://localhost:3000/static/bundles/', // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(), // don't reload if there is an error
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    loaders: [
      // we pass the output from babel loader to react-hot loader
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'], },
    ],
  },

  resolve: {


modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx']
      }
    }

server.js看起来像这样：

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true
}).listen(3000, '0.0.0.0', function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at 0.0.0.0:3000')
})

4 个答案:

答案 0 :(得分：1)

从package.json我可以看到您正在使用webpack v3，但您使用的配置是用于webpack v1。我建议你首先尝试使用webpack v1，一旦你进行了工作设置，就可以迁移到webpack v2 / 3。

我可以从您分享的配置中看到的一些更改，以便与webpack v2 / 3一起使用：

一个。首先删除扩展中的空字符串。

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

湾将loaders更改为rules，您必须添加-loader个加载程序名称，因为已删除自动-loader模块名称扩展名，此处您需要更改babel到babel-loader。

module: {
  rules: [
    { 
       test: /\.jsx?$/,
       exclude: /node_modules/,
       use: ['react-hot-loader', 'babel-loader'],
    },
  ],
},

答案 1 :(得分：0)

该错误实际上非常有用 configuration.resolve has an unknown property 'modulesDirectories'

然后它告诉你什么是可用的 These properties are valid: object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

所以，你的问题是那个讨厌的

modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx']
你的webpack.config中的

。

回顾一下你的教程，看看他们是如何在那里得到的。对不起，我不能更具体，但我希望这有助于指明你正确的方向。干杯

答案 2 :(得分：0)

在将webpack v1配置迁移到webpack v2 / 3时，有一些变化对我有用

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {loader: 'react-hot-loader'},
        {loader: 'babel-loader'},
      ],
    },
  ],
},

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

resolveLoader: {
    modules: ['node_modules', 'bower_components'],
},

更多信息： https://webpack.js.org/guides/migrating/

答案 3 :(得分：0)

经过几个小时的努力，我得到它与当前工作（webpack 3.8反应16）。删除我的node_modules然后运行

npm install --save-dev react react-dom webpack webpack-bundle-tracker babel-loader babel-core babel-preset-react babel-preset-es2015

我的webpack.config.js看起来像

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');


module.exports = {
  context: __dirname,
  entry: './assets/js/index',
  output: {
      path: path.resolve('./server/static/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],

  module: {
    rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015', 'react'],
              },
            },
          }],
  },

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

并将index.jsx放入./assets/js/index.jsx并附上您的代码

var ReactDOM = require('react-dom');
var React = require('react');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

希望它有所帮助！

相关问题
最新问题