webpack: Module not found: Error: Can't resolve (with relative path)

Question

I have this structure of an app (node_modules dir excluded from this list):

├── 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

It seems it does not understand relative path with double dots, like ../something?

Do I need to configure webpack somehow for it to understand such paths?

Had the same issue. I solved it here https://stackoverflow.com/a/64895428/10944219 — tom, Nov 18 '20 at 14:52

score 73 · Accepted Answer · edited Dec 28 '19 at 22:14

73

Your file structure says that folder name is Container with a capital C. But you are trying to import it by container with a lowercase c. You will need to change the import or the folder name because the paths are case sensitive.

edited Dec 28 '19 at 22:14

C.OG

6,236
3
20
38

answered Aug 30 '17 at 19:43

Joseph Ditton

998
8
7

1

This helped me too. windows had no problem with the file name beginning with capital but ubuntu had the problem. – KawaiKx Nov 07 '20 at 16:02
I had a problem because I had an old webpack.config.js. We had switched to using a template webpack.config.babel.js and the old file was overriding the babel template when running webpack. – Peter Edwards Feb 17 '21 at 20:55
1

if you're somebody like me, developing on windows and CI/CD on Linux this happens. This solution helped me. – astroanu Nov 03 '21 at 15:32

score 67 · Answer 2 · answered Jan 15 '21 at 05:06

67

I met this problem with typescript but forgot to add ts and tsx suffix to resolve entry.

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

This does the job for me

answered Jan 15 '21 at 05:06

W.Perrin

4,217
32
31

From [docs](https://webpack.js.org/configuration/resolve/#resolveextensions) it is better to include defaults like so: `extensions: ['.ts', '...']` – Igor Sukharev Feb 17 '23 at 03:50
Which file exactly? Lots of files have the same format. :) Thanks a lot. – Omar Magdy May 05 '23 at 22:59
Okay, I found it. It is here: https://github.com/tleunen/babel-plugin-module-resolver/blob/HEAD/DOCS.md#extensions – Omar Magdy May 05 '23 at 23:04

score 11 · Answer 3 · edited Oct 14 '20 at 09:46

11

while importing libraries use the exact path to a file, including the directory relative to the current file, for example:

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

Hope this may help

edited Oct 14 '20 at 09:46

AntonOfTheWoods

809
13
17

answered Jun 07 '19 at 04:38

Habib Mammadov

311
4
4

9

This isn't required, an import of `import Footer from './Footer'` is 100% valid – Dana Woodman Feb 16 '20 at 17:31
To be honest i do not recommend to put index file on each component directory. Better in my opinion is to use package.json file and indicate entry file in package.json, another option is to use Webapck directory plugin which i also do not recommend, because entire application will depend on webpack – Habib Mammadov Feb 17 '20 at 18:20
Think it’s up to personal preference. At my company we have all Storybook stories, tests, CSS and supporting files in a directory for each component and it works great for us. – Dana Woodman Feb 19 '20 at 01:31

Manoj Kumar Nagaraj · Answer 4 · 2021-11-20T04:24:47.350

9

You have to instruct the webpack to resolve the source code by using below code in webpack.config.js

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

Update : There is a new build tool "Vite" that aims to provide a faster and leaner development experience for modern web projects. Its is a plug and play tool, requires very less configuration.

edited Nov 20 '21 at 04:24

answered Feb 08 '21 at 04:45

Manoj Kumar Nagaraj

126
1
5

would you use vite for node projects without a front-end? – Fed Dec 06 '22 at 11:02

score 6 · Answer 5 · answered Jul 26 '20 at 16:04

Just ran into this... I have a common library shared among multiple transpiled products. I was using symlinks with brunch to handle sharing things between the projects. When moving to webpack, this stopped working.

What did get things working was using webpack configuration to turn off symlink resolving.

i.e. adding this in webpack.config.js:

module.exports = {
  //...
  resolve: {
    symlinks: false
  }
};

as documented here:

https://webpack.js.org/configuration/resolve/#resolvesymlinks

score 3 · Answer 6 · answered Nov 29 '20 at 09:34

3

If you use multiple node_modules (yarn workspace etc), tell webpack where they are:

  externals: [nodeExternals({
    modulesDir: path.resolve(__dirname, '../node_modules'),
  }),  nodeExternals()],

answered Nov 29 '20 at 09:34

Gabriel Petersson

8,434
4
32
41

score 0 · Answer 7 · answered May 10 '23 at 23:31

0

I ran into a similar issue. I solved it by upgrading from the old webpack@4.x and webpack-cli@4.x to webpack@5.x and webpack-cli@5.x.

answered May 10 '23 at 23:31

Eazicoding

191
9

score 0 · Answer 8 · answered Jun 10 '23 at 14:30

I had this problem just after converting my project to TypeScript. The issue for me was that my project did not have a tsconfig.json file. My solution was to create a new TypeScript project, and copy the tsconfig.json file from the newly created project into my project.

score -1 · Answer 9 · answered Jun 02 '18 at 04:02

-1

Had the same issue with module not found. Turns out I had a component import Picture from './Picture/Picture'; at the very bottom of all the imports. When I moved it below import React, { Component } from 'react';, it worked.

answered Jun 02 '18 at 04:02

Deke

4,451
4
44
65

Sounds like a circular import issue. – geon Nov 28 '19 at 07:55

score -1 · Answer 10 · answered Oct 15 '19 at 12:53

-1

Just add it to your config. Source: https://www.jumoel.com/2017/zero-to-webpack.html

externals: [ nodeExternals() ]

answered Oct 15 '19 at 12:53

Cavid Mamedov

31
3

This is should be used only for backend – Sivaraj-v Feb 15 '22 at 11:49
`Cannot find name 'nodeExternals'` – BartusZak Aug 29 '22 at 07:51

score -1 · Answer 11 · answered Feb 07 '20 at 16:20

-1

Look the path for example this import is not correct import Navbar from '@/components/Navbar.vue' should look like this ** import Navbar from './components/Navbar.vue'**

answered Feb 07 '20 at 16:20

m Piroli

333
3
6

I have a question.. How to get the vue base path? wish @ is vue base url, then I can use @/components/Navbar.vue – Robby Alvian Jaya Mulia Feb 18 '20 at 07:56
@RobbyAlvianJayaMulia look into `tsconfig.json` "aliases" - you will also need to add these "aliases" to Webpack's resolvers – MaylorTaylor Aug 04 '23 at 15:10

score -2 · Answer 12 · answered Sep 16 '20 at 17:30

-2

I had a different problem. some of my includes were set to 'app/src/xxx/yyy' instead of '../xxx/yyy'

answered Sep 16 '20 at 17:30

mamashare

399
4
10

score -2 · Answer 13 · answered Jan 28 '21 at 13:12

-2

changing templateUrl: '' to template: '' fixed it

answered Jan 28 '21 at 13:12

Abhinav Atul

601
6
14

webpack: Module not found: Error: Can't resolve (with relative path)

13 Answers13

Linked