javascript - Module Build Failed - Webpack, React, Babel - Stack Overflow|Programmer puzzle solving

I was following a video tutorial from plural sight. Course name is "Building a Real-time App with React, Flux, Webpack, and Firebase".

Please see below code and attached screen shot of the issue i am having. Webpack is failing when ever i try to re build the files. Can someone please advise of what that issue could be. I'm currently using all the latest libraries.

/*webpack.config.js*/

module.exports = {
entry: {
    main: [
        './src/main.js'
    ]
},
output: {
    filename: './public/[name].js'
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        }
    ]
}
}



  /*App.jsx*/
  import React from 'react';

 class App extends React.Component {
 constructor() {
    super();
    this.state = {
        messages: [
            'hi there how are you ?',
            'i am fine, how are you ?'
        ]
    }
}

render() {
    var messageNodes = this.state.messages.map((message)=> {
        return (
            <div>{message}</div>
        );
    });

    return (
        <div>{messageNodes}</div>
    );
 }
 }

 export default App;

/*main.js*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

/*index.html*/
<!DOCTYPE html>
 <html>
  <head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="container"></div>
<script src="public/main.js"></script>
</body>
</html>

/*package.json */

{
"name": "reatapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
"license": "ISC",
 "dependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.0.1",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"webpack": "^1.12.3"
 }
 }

I was following a video tutorial from plural sight. Course name is "Building a Real-time App with React, Flux, Webpack, and Firebase".

/*webpack.config.js*/

module.exports = {
entry: {
    main: [
        './src/main.js'
    ]
},
output: {
    filename: './public/[name].js'
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        }
    ]
}
}



  /*App.jsx*/
  import React from 'react';

 class App extends React.Component {
 constructor() {
    super();
    this.state = {
        messages: [
            'hi there how are you ?',
            'i am fine, how are you ?'
        ]
    }
}

render() {
    var messageNodes = this.state.messages.map((message)=> {
        return (
            <div>{message}</div>
        );
    });

    return (
        <div>{messageNodes}</div>
    );
 }
 }

 export default App;

/*main.js*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

/*index.html*/
<!DOCTYPE html>
 <html>
  <head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="container"></div>
<script src="public/main.js"></script>
</body>
</html>

/*package.json */

{
"name": "reatapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
"license": "ISC",
 "dependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.0.1",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"webpack": "^1.12.3"
 }
 }

Share Improve this question edited Jan 13, 2017 at 23:57 Philip Kirkbride 22.9k39 gold badges130 silver badges234 bronze badges asked Nov 10, 2015 at 2:28 Erkan Demir 7951 gold badge8 silver badges25 bronze badges

It might be with the output: { filename: ./public/[name].js}. Try adding another key for path: path: './public'. But I also see that your main is main.js meanwhile you have your code in app.jsx. Did you import App from './components/app.jsx';? – leocreatini Commented Nov 10, 2015 at 2:42
@LeoCreatini what makes you think that is the issue. The issue started after i added React code. Please see attached screen shot of my file directory – Erkan Demir Commented Nov 10, 2015 at 2:47
I also saw a missing semicolon in the render()'s return (); And a missing semicolon in this.state = {} – leocreatini Commented Nov 10, 2015 at 2:49
Yeah, I didn't see the scrollbar, the main.js was hidden from view. – leocreatini Commented Nov 10, 2015 at 2:50
Just added the semicolon on the return type. Still the same issue. – Erkan Demir Commented Nov 10, 2015 at 2:50

| Show 5 more comments

3 Answers 3

Sorted by: Reset to default 13

It was solved. The answer was in installing presets npm i --save babel-preset-env babel-preset-react. Then adding another key in the webpack.config.js, in the loader: query: {presets: ['env', 'react'] }. Should be good to go.

I tried the above steps and followed many blogs and sites for this, but the problem was still there.Then I found out that I was working with webpack 4. So, after long search I found out the blog:
https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75.
So, I followed the steps and found out that the problem was still there.Then, after long search, I found out that react folder was not present in my node_modules folder.Then I followed the following steps:

Delete the package.lock.json file.
Run npm install.
Check the node_modules folder, you will now see the react folder.
Run npm start. Then, my problem got rectified.

You can try execute this command: npm rebuild node-sass

Programmer puzzle solving

javascript - Module Build Failed - Webpack, React, Babel - Stack Overflow

3 Answers 3

Articles related to this article

comment list (0)