django - Error Running node server , webpack for React configuration -


ive been digging last long few hours , cant catch bug. im following "guide on how create , set django project webpack, npm , reactjs :)"

this error when try: 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 configuration object not match api schema.      - configuration.resolve has unknown property 'modulesdirectories'. these      properties 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 empty.         @ webpack (/users/juanperez/desktop/sandbox/dev/django+reactjs/django-react-boilerplate/bonchans/bonchans/node_modules/webpack/lib/webpack.js:19:9)         @ object.<anonymous>      (/users/juanperez/desktop/sandbox/dev/django+reactjs/django-react-    boilerplate/bonchans/bonchans/server.js:5:22)         @ module._compile (module.js:570:32)         @ object.module._extensions..js (module.js:579:10)         @ module.load (module.js:487:32)         @ trymoduleload (module.js:446:12)         @ function.module._load (module.js:438:3)         @ module.runmain (module.js:604:10)         @ run (bootstrap_node.js:389:7)         @ startup (bootstrap_node.js:149:9)    (bonchans) ➜  bonchans git:(master) ✗  

configuration files:


my package.json looks this:

    {       "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"         }     } 

my webpack.config.js looks this:

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 use url load packages , not use static_url + bundle_name   },    plugins: [     new webpack.hotmodulereplacementplugin(),     new webpack.noerrorsplugin(), // don't reload if there error     new bundletracker({filename: './webpack-stats.json'}),   ],    module: {     loaders: [       // pass output babel loader react-hot loader       { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'], },     ],   },    resolve: {   modulesdirectories: ['node_modules', 'bower_components'],         extensions: ['', '.js', '.jsx']       }     } 

server.js looks this:

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 @ 0.0.0.0:3000') }) 

from package.json can see you're using webpack v3, config you're using webpack v1. i'd advice first try making work webpack v1 , once you've working setup can migrate webpack v2/3.

some changes can see config you've shared make work webpack v2/3 are:

a. remove empty string in extensions first.

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

b. change loaders rules , you've add -loader loader names since automatic -loader module name extension removed, here you've change babel babel-loader.

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

Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -