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 stackoverflow.com/a/64895428/10944219 — tom
– tom, Commented Nov 18, 2020 at 14:52

W.Perrin · Accepted Answer · 2021-01-15 05:06:53Z

77

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, 2021 at 5:06

W.Perrin

4,78536 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Igor Sukharev Over a year ago

From docs it is better to include defaults like so: extensions: ['.ts', '...']

Omar Magdy Over a year ago

Which file exactly? Lots of files have the same format. :) Thanks a lot.

Omar Magdy Over a year ago

Okay, I found it. It is here: github.com/tleunen/babel-plugin-module-resolver/blob/HEAD/…

C.OG · Accepted Answer · 2019-12-28 22:14:18Z

76

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, 2019 at 22:14

C.OG

6,5373 gold badges24 silver badges41 bronze badges

answered Aug 30, 2017 at 19:43

Joseph Ditton

1,0289 silver badges7 bronze badges

3 Comments

KawaiKx Over a year ago

This helped me too. windows had no problem with the file name beginning with capital but ubuntu had the problem.

Peter Edwards Over a year ago

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.

astroanu Over a year ago

if you're somebody like me, developing on windows and CI/CD on Linux this happens. This solution helped me.

Manoj Kumar Nagaraj · Accepted Answer · 2021-11-20 04:24:47Z

12

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, 2021 at 4:24

answered Feb 8, 2021 at 4:45

Manoj Kumar Nagaraj

1761 silver badge8 bronze badges

2 Comments

Fed Over a year ago

would you use vite for node projects without a front-end?

Carlos Noé Over a year ago

I renamed my jsx file to js and it just worked :). thanks

AntonOfTheWoods · Accepted Answer · 2020-10-14 09:46:25Z

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, 2020 at 9:46

AntonOfTheWoods

9891 gold badge15 silver badges22 bronze badges

answered Jun 7, 2019 at 4:38

Habib Mammadov

3214 silver badges4 bronze badges

3 Comments

Dana Woodman Over a year ago

This isn't required, an import of import Footer from './Footer' is 100% valid

Habib Mammadov Over a year ago

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

Dana Woodman Over a year ago

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.

tres · Accepted Answer · 2020-07-26 16:04:00Z

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

Gabriel Petersson · Accepted Answer · 2020-11-29 09:34:58Z

6

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, 2020 at 9:34

Gabriel Petersson

10.7k4 gold badges40 silver badges50 bronze badges

Comments

Meinstien · Accepted Answer · 2023-06-10 14:30:15Z

1

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.

answered Jun 10, 2023 at 14:30

Meinstien

112 bronze badges

Comments

Berkay Aslan · Accepted Answer · 2025-01-08 02:18:22Z

1

Not related with this question however, for the guys who use typescript you should first initialize the ts via

npx tsc --init

then you should add this flag in the tsconfig.json file if you are using react

"jsx": "react",

answered Jan 8 at 2:18

Berkay Aslan

336 bronze badges

1 Comment

Roronoa Zoro Jan 8 at 13:43

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Joachim · Accepted Answer · 2023-05-10 23:31:33Z

0

I ran into a similar issue. I solved it by upgrading from the old [email protected] and [email protected] to [email protected] and [email protected].

answered May 10, 2023 at 23:31

Joachim

3112 silver badges10 bronze badges

Comments

Deke · Accepted Answer · 2018-06-02 04:02:40Z

-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 2, 2018 at 4:02

Deke

4,6875 gold badges49 silver badges72 bronze badges

1 Comment

geon Over a year ago

Sounds like a circular import issue.

Cavid Mamedov · Accepted Answer · 2019-10-15 12:53:06Z

-1

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

externals: [ nodeExternals() ]

answered Oct 15, 2019 at 12:53

Cavid Mamedov

313 bronze badges

2 Comments

Sivaraj-v Over a year ago

This is should be used only for backend

BartusZak Over a year ago

Cannot find name 'nodeExternals'

m Piroli · Accepted Answer · 2020-02-07 16:20:19Z

-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 7, 2020 at 16:20

m Piroli

3933 silver badges6 bronze badges

2 Comments

Robby Alvian Jaya Mulia Over a year ago

I have a question.. How to get the vue base path? wish @ is vue base url, then I can use @/components/Navbar.vue

MaylorTaylor Over a year ago

@RobbyAlvianJayaMulia look into tsconfig.json "aliases" - you will also need to add these "aliases" to Webpack's resolvers

mamashare · Accepted Answer · 2020-09-16 17:30:58Z

-2

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

answered Sep 16, 2020 at 17:30

mamashare

4196 silver badges10 bronze badges

Comments

Abhinav Atul · Accepted Answer · 2021-01-28 13:12:31Z

-3

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

answered Jan 28, 2021 at 13:12

Abhinav Atul

6476 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

14 Answers 14

3 Comments

3 Comments

2 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

3 Comments

3 Comments

2 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

2 Comments

2 Comments

Comments

Comments

Linked

Related