Deploying react app with webpack server

Question

I am a beginner in ReactJS and was just exploring it and trying to configure it with Webpack and Babel when I experienced an error when I run the application using npm start.

Following are some of files:-

package.json

{
 "name": "reactstarter",
 "version": "1.0.0",
 "description": "A basic React application to explore its state and beauty",
 "main": "index.js",
 "scripts": {
    "start": "webpack-dev-server"
   },
 "keywords": [
   "reactjs"
  ],
"author": "user1705",
"license": "MIT",

"dependencies": {
 "debug-log": "^1.0.1",
 "react": "^15.3.2",
 "react-dom": "^15.3.2"
},
"devDependencies": {
 "webpack": "^1.13.2"
 }
}

There are two directories src directory and dist directory inside the root folder.

File: src/index.html

<!DOCTYPE html>
<html lang = "en">

  <head>
   <meta charset = "UTF-8">
   <title>React App</title>
  </head>

<body>
  <div id = "app"></div>
  <script src = "/app/bundle.js"></script>
</body>

</html>

File:- src/app/App.jsx

import React from 'react';

class App extends React.Component {
 render() {
   return (
     <div>
        Hello World!!!
     </div>
  );
 }
}

export default App;

File:- src/app/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

And webpack.config.js:-

var webpack= require(webpack);
var path= require(path);
var DIST_DIR=path.resolve(__dirname,"dist");

var SRC_DIR= path.resolve(__dirname,"src");

var config={
  entry:SRC_DIR+"/app/index.js",
  output:{
    path:DIST_DIR+"/app",
    fileName:bundle.js,
    publicPath:"/app/",
   },
  devServer: {
  inline: true,
  port: 7777
   },

  modules:{
    loaders:[
        {
            test:/\.js?/,
            include:SRC_DIR,
            loader:"babel-loader",
            query:{
                presets:["react","es2015","stage-2"]
            }
        }
       ]
     }
 };

 module.exports=config;

So now whenever I run the command npm start,it gives the following error:-

Being a beginner I have no idea as what is the issue?? If anyone has come across this similar issue or knows about the error,please contribute your knowledge and show me the right path.

Fazal Rasel · Accepted Answer · 2016-10-02 15:20:17Z

1

change

output:{
    path:DIST_DIR+"/app",
    fileName:bundle.js,
    publicPath:"/app/",
   },

to

output:{
    path:DIST_DIR+"/app",
    fileName:"bundle.js",
    publicPath:"/app/",
   },

answered Oct 2, 2016 at 15:20

Fazal Rasel

4,5262 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alberto Centelles · Accepted Answer · 2016-10-02 13:17:19Z

0

It seems that you forgot the quotes when you were requiring the npm modules:

var webpack= require('webpack');
var path= require('path');

answered Oct 2, 2016 at 13:17

Alberto Centelles

1,25112 silver badges24 bronze badges

2 Comments

user2594 Over a year ago

Thanks for the typo but it says bundle is not defined now.I assume bundle.js is a file which will contain all my bundled output in dist directory.

Alberto Centelles Over a year ago

The same is happening with bundle.js. Wrap it with quotes, too, like this: "bundle.js"

Collectives™ on Stack Overflow

Deploying react app with webpack server

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related