javascript - Webpack: npm start "Module not found: Error: Can't resolve ..." after moving location for

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 npm start again I received this error output

Output from npm start

Jacob:Name_html Jacob$ npm start

> Name@ start Dir/Name/Name_html
> 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.

Output from npm start

Jacob:Name_html Jacob$ npm start

> Name@ start Dir/Name/Name_html
> 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.

These are some approaches which have not worked

Adding modules: ["src", "node_modules"] to webpack.config.js

Deleting node_modules and running npm install again

src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import someSelfCreatedComponents from ../es6/SelfCreatedComponents

const Content = () => {
    return (
        <React.Fragment>
            <Header />
            <Banner />
            <MoreThings />
            <Footer />
        </React.Fragment>
    )
}

ReactDOM.render (
    <Content />,
    document.getElementById('Content')
)

webpack.config.js

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']
	}
}

package.json

{
  "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"
  }
}

.babelrc

{
	"presets": ["@babel/preset-react", "@babel/preset-env"]
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Name</title>
    
    <link rel="stylesheet" type="text/css" href="css/Main.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=1.10, minimum-scale=0.80">

  </head>
  <body>
    <div id='Content'></div>
    <script src='bundle.js'></script>
  </body>
</html>

File arrangement

Update

I read the blog article posted by Saheed in the answer below, and tried fixing my project by removing the webpack.config.js file, and by reducing the file to

module.exports = {
	module: {
		rules: [
			{
				exclude: /node_modules/,
				use: [
					'babel-loader'
				]
			}
		]
	},
	resolve: {
		extensions: ['js', '.jsx']
	}
	
}

After both attempts I am still receiving the same errors.

Share Improve this question edited Jun 28, 2019 at 11:28 asked Jun 28, 2019 at 10:07 Sam 2,33117 gold badges99 silver badges206 bronze badges

Add a comment |

3 Answers 3

Sorted by: Reset to default 13

If you'd like to avoid the nuclear option, make sure .js is included in webpack's resolved extensions.

The problem here may have been caused by a missing . before js:

module.exports = {
    // ...
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Found a solution, but it doesn't quite answer what was wrong with my code, there's a comment below that tries to answer what the problem was.

I deleted my .babelrc, package-lock.json, webpack.config.js, package.json and node modules and then followed this tutorial for setting up react, babel7, and webpack4 from scratch, because it was the most helpful one I could find

Here's a summary of it

They started with

mkdir default && cd default && yarn init -y

I then installed the following modules

npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader -D

And copied and pasted the code below into the file .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

I installed some more modules

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin html-webpack-template -D

And copied and pasted the code below into webpack.config.js (with a slight adjustment because I was receiving the error Uncaught Error: Target container is not a DOM element.)

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

module.exports = config;

npm install react react-dom

And I did not change my index.js, but the one listed in the tutorial is

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

function App() {
  return (
    <div>
      <h1>Hello blog readers</h1>
    </div>
  );
}

const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);

In my case, I was working with typescript projects.

I was using ts-loader version 8.2.0 and I upgraded to version [email protected] and the error went away.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Webpack: npm start "Module not found: Error: Can't resolve ..." after moving location for

3 Answers 3

与本文相关的文章

评论列表(0)