CODEWITHSUNDEEP
javascriptreactjs
user2594
user2594

Reputation: 444

Deploying react app with webpack server

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:- enter image description here

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.

Upvotes: 1

Views: 539

Answers (2)

Fazal Rasel
Fazal Rasel

Reputation: 4526

change 

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

to 

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

Upvotes: 1

Alberto Centelles
Alberto Centelles

Reputation: 1253

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

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

Upvotes: 0

Related Questions