React and ReactDOM not loading using webpack, babel

Question

I am setting up a React project using webpack and babel, but I am getting the error that React and ReactDOM can't be resolved.

Is the problem is with the version of Webpack or Babel?

PS C:\Users\abhi\Desktop\mern-app> npm run webpack

> [email protected] webpack C:\Users\abhi\Desktop\mern-app
> webpack

ERROR in ./app.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\abhi\Desktop\mern-app'
 @ ./app.js 5:13-29

ERROR in ./app.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\abhi\Desktop\mern-app'
 @ ./app.js 9:16-36
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\abhi\AppData\Roaming\npm-cache\_logs\2018-04-21T14_25_50_508Z-debug.log

the configs and files are as belows

package.json

{
  "name": "mern-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "author": "Abhishek Kulshrestha",
  "license": "ISC",
  "dependencies": {
    "npm": "^5.8.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

webpack.config.js

var path = require('path');

var webpack = require('webpack');

module.exports ={
    entry:'./app.js',
    output:{
        filename:'bundle.js',
        path:__dirname
    },
    resolve:{
        extensions:['.js']
    },
    module:{
        rules:[{
            test:/.jsx?$/,
            use:{
                loader:'babel-loader',
                options:{
                    presets: ['env',
                                'react']
                 }
            },
            exclude:/.node_modules/

        }]
    }

}

app.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render(){
        return '<h1>Hello </h1>'
    }
}

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

All files (package.json,webpack.config.js,app.js,index.html) are in same main folder

Please Help

Did you setup with 'create-react-app'? (If not, I'd try that.) — zanerock
– zanerock, Commented Apr 21, 2018 at 14:54
Good learning experience. I don't know about configuring webpack and such myself, but you could create another project using 'create-react-app' and then compare the configuration. — zanerock
– zanerock, Commented Apr 21, 2018 at 15:04
There's a typo in your webpack.config. exclude:/.node_modules/ should be exclude: /node_modules/ (no period). It might help. — topheman
– topheman, Commented Apr 21, 2018 at 15:10

rc-chandan · Accepted Answer · 2018-04-21 15:28:22Z

1

This code looks fine to me. I think you have missed the dependency installation step before running webpack command.

Please try and follow the below steps in order and see if it resolves the error.

Run npm install inside the directory this will make sure all the dependencies you have mentioned in package.json are downloaded to node_modules directory.
Then run npm run webpack to generate the bundle.js

answered Apr 21, 2018 at 15:28

rc-chandan

6015 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

React and ReactDOM not loading using webpack, babel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related