CODEWITHSUNDEEP
javascriptnpmwebpackrelative-path
Andrius
Andrius

Reputation: 21118

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

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?

Upvotes: 79

Views: 412694

Answers (14)

Berkay Aslan
Berkay Aslan

Reputation: 33

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",

Upvotes: 1

Meinstien
Meinstien

Reputation: 11

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.

Upvotes: 1

Joachim
Joachim

Reputation: 311

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].

Upvotes: 0

Manoj Kumar Nagaraj
Manoj Kumar Nagaraj

Reputation: 176

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.

Upvotes: 12

Abhinav Atul
Abhinav Atul

Reputation: 629

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

Upvotes: -3

W.Perrin
W.Perrin

Reputation: 4685

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

Upvotes: 76

Gabriel Petersson
Gabriel Petersson

Reputation: 10432

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

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

Upvotes: 6

Habib Mammadov
Habib Mammadov

Reputation: 321

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

Upvotes: 11

mamashare
mamashare

Reputation: 409

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

Upvotes: -2

tres
tres

Reputation: 1490

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

Upvotes: 7

m Piroli
m Piroli

Reputation: 373

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'**

Upvotes: -1

Joseph Ditton
Joseph Ditton

Reputation: 1028

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.

Upvotes: 76

Cavid Mamedov
Cavid Mamedov

Reputation: 31

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

externals: [ nodeExternals() ]

Upvotes: -1

Deke
Deke

Reputation: 4649

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.

Upvotes: -1

Related Questions