Webpack Compilation Error

Question

Following is the webpack.config.js file for my React app

 module.exports = {
 entry: 'index.js',
 output: {
 filename: 'bundle.js',
 path: '/.'
 },
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /(node_modules|bower_components)/,
 loader: 'babel-loader',
 query: {
 presets: ['react']
 }
 }
 ]
 }
 };

and the error I am getting on execution is following:

npm ERR! code ELIFECYCLE
npm ERR! errno 4294967295
npm ERR! [email protected] start: `webpack-dev-server --hot`
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --hot'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the loginpoc package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --hot
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs loginpoc
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls loginpoc
npm ERR! There is likely additional logging output above

my package.json is as follows

{
 "name": "loginpoc",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "start": "webpack-dev-server --hot"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
 "react": "^15.5.3",
 "react-dom": "^15.5.3",
 "webpack": "^2.3.3",
 "webpack-dev-server": "^2.4.2"
 }
}

kindly let me know what do you suggest where am I going wrong?

• Julien TASSIN: Can you please show us LoginPOC code and the imported lib ? Can you also give us your webpack version
• Panther: Your entry is .index.js. Shouldn't it be index.js. Is that a typo or intentional ??
• developer_beginning: Webpack version 2.3.3
• developer_beginning: @Panther thanks i could not see that.it was a typo..but after i changed it to index.js
• developer_beginning: it gives error :Configuration file found but no entry configured

Answer 1

There are some changes needed to make your config work. Since the error you posted is just the noise from npm, the actual error is above all that, I'll show you the actual errors you get and how you can fix them.

ERROR in Entry module not found: Error: Can't resolve 'index.js'

An entry point for webpack is just like a regular import. This is not a relative path, therefore webpack resolves it as a module, it looks for a module index.js in node_modules. Presumably you want it to be:

entry: './index.js'

After fixing that you'll run into the following error:

ERROR in Entry module not found: Error: Can't resolve 'babel-loader'

You're using babel-loader in your webpack config, but you don't have it installed. Well you might have it installed, but it's not in your package.json so you either have it globally installed or you forgot to add --save or --save-dev respectively on npm install. Either way it should be listed as a dependency in your package.json so it also works on another machine by simply running npm install.

The dependencies related to babel-loader would produce the same error, so you can install all of them at once:

npm install --save-dev babel-loader babel-core babel-preset-react

And finally the last error you might encounter is:

Error: EACCES: permission denied, open '/bundle.js'

You'll not get this, if you're executing it as root or your user is allowed to write to / (the root of your file system). Anyway you don't want that, because the generated bundle should be somewhere in the directory of the project, otherwise multiple projects would end up overwriting the same bundle. You've also set the output.path to /. so maybe it was a typo and you meant ./. That wouldn't be allowed, because output.path needs to be an absolute path. You can use path.resolve for that.

output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname)
}

You generally want output.path to be a directory inside your project, e.g. dist so you can easily separate the output from your regular files.

Here is the full config with all the changes mentioned above:

const path = require('path');
module.exports = {
 entry: './index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /(node_modules|bower_components)/,
 loader: 'babel-loader',
 query: {
 presets: ['react']
 }
 }
 ]
 }
};

• Edmunds22: Great answer, for anyone using this tutorial: tutorialspoint.com/reactjs/reactjs_environment_setup.htm , change it very slightly to:const path = require('path'); module.exports = { entry: './main.js', output: { filename: 'index.js', path: path.resolve(__dirname, 'dist') }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } }

Answer 2

Try using this as your configuration.

var path = require('path'),
 module.exports = {
 entry: 'index.js',
 output: {
 path: path.resolve(__dirname + '/')
 filename: 'bundle.js',
 publicPath: '/'
 }, 
 devServer: {
 contentBase: './',
 inline: true,
 hot: true,
 },
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /(node_modules|bower_components)/,
 loader: 'babel-loader',
 query: {
 presets: ['react']
 }
 }
 ]
 }
 };

What I have done here is add some missing configuration options according to this doc. configuration. Note my addition of the path import I have also modified some of your configuration options slightly.

• developer_beginning: this file gives me unexpected identifier error at 6
• Isaac Osiemo: There is a a missing comma at the end of line 5.