Webpack: Module not found: Error: Can’t resolve (with relative path)

The error message “Webpack: Module not found: Error: Can’t resolve” indicates that Webpack is unable to locate a module with the specified relative path “intro.” This could be due to various reasons, such as a typo in the path, the file or module being genuinely missing, or a misconfiguration in your Webpack setup.

To resolve this issue, start by double-checking the relative path specified for the “intro” module. Ensure that the file or module exists at the specified location. Verify the case sensitivity of the path, as some file systems are case-sensitive. Additionally, confirm that your Webpack configuration is correctly set up to resolve modules and their paths.

If the problem persists, consider examining the webpack configuration file (usually webpack.config.js) and the import statements in your code to identify any discrepancies. Also, ensure that the necessary loaders and plugins are configured correctly for handling the file types involved in your project.

├── actions.js
├── bundle.js
├── components
│   ├── App.js
│   ├── Footer.js
│   ├── Link.js
│   ├── Todo.js
│   └── TodoList.js
├── Containers
│   ├── AddTodo.js
│   ├── FilterLink.js
│   └── VisibleTodoList.js
├── index.html
├── index.js
├── main.js
├── package.json
├── package-lock.json
├── reducers.js
└── webpack.config.js

My webpack config looks like this:

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react']
            }
          }
        ]
    }
};

npm config:

{
  "name": "webpack-redux",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "nothing"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.5"
  },
  "dependencies": {
    "react": "^15.6.1",
    "babel-preset-react": "^6.24.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }
}

When I run webpack command, I get this error:

ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/AddTodo' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/App.js 11:15-47
 @ ./index.js
 @ ./main.js

ERROR in ./components/Footer.js
Module not found: Error: Can't resolve '../containers/FilterLink' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/Footer.js 11:18-53
 @ ./components/App.js
 @ ./index.js
 @ ./main.js

ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/VisibleTodoList' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/App.js 15:23-63
 @ ./index.js
 @ ./main.js

My components/App.js content is this:

import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

export default App

And for example containers/AddTodo.js:

import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

Webpack Module not found: Error: Cannot resolve module

The “Module not found: Error: Cannot resolve module” error in Webpack typically indicates that Webpack is unable to locate the specified module during the build process. Here are some steps you can take to troubleshoot and resolve this issue:

Check the Module Path:
Double-check the import statement in your code to ensure that the module path is correct. Pay attention to the case sensitivity of the file or module name, as some file systems are case-sensitive.

Verify Module Existence:
Ensure that the module you are trying to import actually exists at the specified path. Verify that the file or module is present in the correct location.

Check File Extensions:
If you are importing a file without specifying the file extension, make sure that your webpack configuration includes the necessary rules to handle that file type. For example, if you are importing a JavaScript module, ensure that your webpack config includes a rule for handling JavaScript files.

Webpack Resolve Configuration:
In your webpack configuration file (usually webpack.config.js), check the resolve property. This property specifies how webpack should resolve modules. Ensure that the configured extensions and alias paths match your project structure.

resolve: {
  extensions: ['.js', '.jsx'], // Add the necessary file extensions
  alias: {
    // Add any aliases if needed
  },
},

NPM/Yarn Install:
Ensure that all the dependencies for your project are installed. Run npm install or yarn install to make sure that the required modules are present in the node_modules directory.

Clean Build:
Sometimes, artifacts from previous builds may cause issues. Try cleaning your build by deleting the dist or build directory and then rebuilding your project.

Check Module Versions:
If you are using specific versions of modules, ensure that the versions specified in your package.json file are compatible and correctly installed.

By following these steps, you should be able to identify and resolve the “Module not found” error in your Webpack project.

Webpack: Module not found: Error: Can’t resolve ‘./containers’

The “Module not found: Error: Can’t resolve ‘./containers'” error in Webpack indicates that there is an issue resolving the path ‘./containers’ during the build process. Here are steps you can take to troubleshoot and resolve this issue:

Check File or Directory Existence:
Ensure that the ‘./containers’ path exists in your project directory. Double-check the spelling, case sensitivity, and the exact path of the ‘containers’ directory or file.

Relative vs Absolute Paths:
If ‘./containers’ is a relative path, make sure you are using it correctly in relation to the file that contains the import statement. If it’s an absolute path, ensure it’s correct from the root of your project.

Webpack Configuration:
Review your Webpack configuration file (usually webpack.config.js) and check the resolve property. Make sure it includes the necessary configurations to resolve modules correctly.

resolve: {
  extensions: ['.js', '.jsx'], // Add the necessary file extensions
  alias: {
    // Add aliases if needed
  },
},

File Extensions:
Confirm that the file you are trying to import has the correct file extension (e.g., ‘.js’, ‘.jsx’). If the file extension is missing in the import statement, webpack might not be able to resolve it.

import MyContainer from './containers/MyContainer';

Node Modules Installation:
Ensure that your project’s dependencies are installed. Run npm install or yarn install to make sure that the required modules are present in the ‘node_modules’ directory.

Project Structure:
Double-check your project’s folder structure to confirm that the ‘containers’ directory is in the expected location. If it’s nested within another directory, adjust the import path accordingly.

Check for Typos:
Carefully inspect your import statement for any typos or syntax errors. Even a small mistake can lead to a “Module not found” error.

By systematically going through these steps, you should be able to identify and resolve the issue with the ‘./containers’ import in your webpack project.

FAQs

Conclusion

The “Webpack Module not found: Error: Can’t resolve” issue is a common error that occurs when Webpack cannot locate a specified module or file during the build process. This error can be caused by various factors, including incorrect paths, missing files, misconfigurations in the Webpack setup, or typos in import statements.

To resolve this issue, it’s important to systematically troubleshoot the problem. Check the accuracy of the module path, verify the existence of the specified file or directory, review your Webpack configuration (especially the resolve property), confirm file extensions, ensure dependencies are installed, and check for any typos in import statements.