无法使用Webpack，Babel加载React和ReactDOM

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

> mern-app@1.0.0 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! mern-app@1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mern-app@1.0.0 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

Answer 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.

1. 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.
2. Then run npm run webpack to generate the bundle.js