title: Webpack: npm start "Module not found: Error: Can't resolve ..." after moving location for webpack / react files
body: <p>My project was working and I was able to view my web page on localhost:8080 while using Chrome.
  I was trying to learn something so I had all my files within a folder called 'dir copy' rather than just dir.
  When everything was how I wanted it I move all the files back to 'dir' and closed the browser. 
  When I tried running <code>npm start</code> again I received this error output</p>
  
  <hr>
  
  <p><strong>Output from npm start</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Jacob:Name_html Jacob$ npm start
  
  &gt; Name@ start Dir/Name/Name_html
  &gt; node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js
  
  ℹ ｢wds｣: Project is running at http://localhost:8080/
  ℹ ｢wds｣: webpack output is served from /
  ℹ ｢wds｣: Content not from webpack is served from Dir/Name/Name_html
  ✖ ｢wdm｣: Hash: a0d05c0fdc6ff660f346
  Version: webpack 4.35.0
  Time: 1985ms
  Built at: 06/28/2019 3:29:15 AM
        Asset     Size  Chunks             Chunk Names
  ./bundle.js  908 KiB    main  [emitted]  main
  Entrypoint main = ./bundle.js
  [1] multi (webpack)-dev-server/client?http://localhost ./src/index.jsx 40 bytes {main} [built]
  [./es6/Banner.js] 1010 bytes {main} [built]
  [./es6/Footer.js] 320 bytes {main} [built]
  [./es6/Header.js] 387 bytes {main} [built]
  [./es6/HomePageServices.js] 3.4 KiB {main} [built]
  [./es6/NavBar.js] 689 bytes {main} [built]
  [./node_modules/react-dom/cjs/react-dom.development.js] 768 KiB {main} [built]
  [./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
  [./node_modules/react/cjs/react.development.js] 62.3 KiB {main} [built]
  [./node_modules/react/index.js] 190 bytes {main} [built]
  [./node_modules/scheduler/cjs/scheduler.development.js] 23.3 KiB {main} [built]
  [./node_modules/scheduler/index.js] 198 bytes {main} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {main} [built]
  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 160 bytes {main} [built]
  [./src/index.jsx] 561 bytes {main} [built]
      + 2 hidden modules
  
  ERROR in (webpack)-dev-server/client?http://localhost
  Module not found: Error: Can't resolve './overlay' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client'
   @ (webpack)-dev-server/client?http://localhost 10:14-34
   @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx
  
  ERROR in (webpack)-dev-server/client?http://localhost
  Module not found: Error: Can't resolve './socket' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client'
   @ (webpack)-dev-server/client?http://localhost 8:13-32
   @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx
  
  ERROR in (webpack)-dev-server/client?http://localhost
  Module not found: Error: Can't resolve './utils/createSocketUrl' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client'
   @ (webpack)-dev-server/client?http://localhost 20:22-56
   @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx
  
  ERROR in (webpack)-dev-server/client?http://localhost
  Module not found: Error: Can't resolve './utils/log' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client'
   @ (webpack)-dev-server/client?http://localhost 12:15-37
   @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx
  
  ERROR in (webpack)-dev-server/client?http://localhost
  Module not found: Error: Can't resolve './utils/reloadApp' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client'
   @ (webpack)-dev-server/client?http://localhost 18:16-44
   @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx
  
  ERROR in (webpack)-dev-server/client?http://localhost
  Module not found: Error: Can't resolve './utils/sendMessage' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client'
   @ (webpack)-dev-server/client?http://localhost 16:18-48
   @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx
  
  ERROR in ./node_modules/react-dom/cjs/react-dom.development.js
  Module not found: Error: Can't resolve 'object-assign' in 'Dir/Name/Name_html/node_modules/react-dom/cjs'
   @ ./node_modules/react-dom/cjs/react-dom.development.js 19:14-38
   @ ./node_modules/react-dom/index.js
   @ ./src/index.jsx
   @ multi ./src/index.jsx
  
  ERROR in ./node_modules/react/cjs/react.development.js
  Module not found: Error: Can't resolve 'object-assign' in 'Dir/Name/Name_html/node_modules/react/cjs'
   @ ./node_modules/react/cjs/react.development.js 18:14-38
   @ ./node_modules/react/index.js
   @ ./src/index.jsx
   @ multi ./src/index.jsx
  
  ERROR in ./node_modules/react-dom/cjs/react-dom.development.js
  Module not found: Error: Can't resolve 'prop-types/checkPropTypes' in 'Dir/Name/Name_html/node_modules/react-dom/cjs'
   @ ./node_modules/react-dom/cjs/react-dom.development.js 20:21-57
   @ ./node_modules/react-dom/index.js
   @ ./src/index.jsx
   @ multi ./src/index.jsx
  
  ERROR in ./node_modules/react/cjs/react.development.js
  Module not found: Error: Can't resolve 'prop-types/checkPropTypes' in 'Dir/Name/Name_html/node_modules/react/cjs'
   @ ./node_modules/react/cjs/react.development.js 19:21-57
   @ ./node_modules/react/index.js
   @ ./src/index.jsx
   @ multi ./src/index.jsx
  
  ERROR in ./node_modules/react-dom/cjs/react-dom.development.js
  Module not found: Error: Can't resolve 'scheduler/tracing' in 'Dir/Name/Name_html/node_modules/react-dom/cjs'
   @ ./node_modules/react-dom/cjs/react-dom.development.js 22:14-42
   @ ./node_modules/react-dom/index.js
   @ ./src/index.jsx
   @ multi ./src/index.jsx
  
  ERROR in (webpack)-dev-server/client?http://localhost
  Module not found: Error: Can't resolve 'strip-ansi' in 'Dir/Name/Name_html/node_modules/webpack-dev-server/client'
   @ (webpack)-dev-server/client?http://localhost 6:16-37
   @ multi (webpack)-dev-server/client?http://localhost ./src/index.jsx
  ℹ ｢wdm｣: Failed to compile.</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>These are some approaches which have not worked</p>
  
  <p><a href="https://github.com/webpack/webpack-dev-server/issues/993" rel="noreferrer">Adding <code>modules: ["src", "node_modules"]</code> to webpack.config.js</a></p>
  
  <p><a href="https://stackoverflow.com/questions/45639635/issue-getting-webpack-dev-server-to-load">Deleting node_modules and running npm install again</a></p>
  
  <hr>
  
  <p><strong>src/index.jsx</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import someSelfCreatedComponents from ../es6/SelfCreatedComponents
  
  const Content = () =&gt; {
      return (
          &lt;React.Fragment&gt;
              &lt;Header /&gt;
              &lt;Banner /&gt;
              &lt;MoreThings /&gt;
              &lt;Footer /&gt;
          &lt;/React.Fragment&gt;
      )
  }
  
  ReactDOM.render (
      &lt;Content /&gt;,
      document.getElementById('Content')
  )</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
   entry: [
    './src/index.jsx' 
   ],
   output: {
    filename: './bundle.js' //File that all react gets compioled into
   },
   module: {
    rules: [
     {
      exclude: /node_modules/,
      use: [
       'babel-loader'
      ]
     }
    ]
   },
   resolve: {
    extensions: ['js', '.jsx']
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>package.json</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "Name",
    "version": "",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
    },
    "dependencies": {
      "@babel/preset-es2015": "^7.0.0-beta.53",
      "babel-core": "^6.26.3",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-preset-env": "^1.7.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-1": "^6.24.1",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "webpack-cli": "^3.3.5",
      "webpack-dev-server": "^3.7.2"
    },
    "devDependencies": {
      "@babel/core": "^7.4.5",
      "@babel/preset-env": "^7.4.5",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.6",
      "webpack": "^4.35.0"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>.babelrc</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
   "presets": ["@babel/preset-react", "@babel/preset-env"]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>index.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Name&lt;/title&gt;
      
      &lt;link rel="stylesheet" type="text/css" href="css/Main.css"&gt;
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=1.10, minimum-scale=0.80"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='Content'&gt;&lt;/div&gt;
      &lt;script src='bundle.js'&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>File arrangement</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Nqd9e.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Nqd9e.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>I read the <a href="https://www.valentinog.com/blog/webpack/" rel="noreferrer">blog article</a> posted by Saheed in the answer below, and tried fixing my project by removing the <strong>webpack.config.js</strong> file, and by reducing the file to</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
   module: {
    rules: [
     {
      exclude: /node_modules/,
      use: [
       'babel-loader'
      ]
     }
    ]
   },
   resolve: {
    extensions: ['js', '.jsx']
   }
   
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>After both attempts I am still receiving the same errors.</p>