user4946127 user4946127 - 2 months ago 19
React JSX Question

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.

Answer

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

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