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


        

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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