title: React and ReactDOM not loading using webpack, babel
body: <p>I am setting up a React project using webpack and babel, but I am getting the error that <strong>React and ReactDOM can't be resolved.</strong></p>
  
  <p>Is the problem is with the version of Webpack or Babel?</p>
  
  <pre><code>PS C:\Users\abhi\Desktop\mern-app&gt; npm run webpack
  
  &gt; mern-app@1.0.0 webpack C:\Users\abhi\Desktop\mern-app
  &gt; 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
  </code></pre>
  
  <p>the configs and files are as belows</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "mern-app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>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/
  
          }]
      }
  
  }
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class App extends React.Component{
      render(){
          return '&lt;h1&gt;Hello &lt;/h1&gt;'
      }
  }
  
  ReactDOM.render(&lt;App/&gt;,document.getElementById('app'));
  </code></pre>
  
  <p><strong>All files (package.json,webpack.config.js,app.js,index.html) are in same main folder</strong></p>
  
  <p>Please Help</p>