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

Andrius :

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?

Joseph Ditton :

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

Error: Module not found: Error: Can't resolve '@angular/cdk/scrolling'

webpack Module not found: Error: Can't resolve 'jquery'

Module not found: Error: Can't resolve 'hammerjs'

Module not found: Error: Can't resolve 'fs'

Webpack Upgrade - Module not found: Can't resolve node_modules

Webpack 4: ERROR in Entry module not found: Error: Can't resolve './src'

Module not found: Error: Can't resolve 'avoriaz'

Module not found: Error: Can't resolve './templates'

Module not found: Error: Can't resolve 'path' in '\node_modules\source-map-support' - npm

webpack - Module not found: Error: Can't resolve './src/app/app.component.html'

Webpack: npm start "Module not found: Error: Can't resolve ..." after moving location for webpack / react files

Module not found: Error: Can't resolve 'dropzone'

Module not found: Error: Can't resolve 'module

Webpack "Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' "

got error Module not found: Error: Can't resolve '../components/***' when webpack build,how can I solve this problem?

ERROR in "path" Module not found: Error: Can't resolve - Angular 6 Webpack

[React Webpack]: Module not found: Error: Can't resolve 'src/views/UserList' in 'C:\Users\....'

Webpack parse module path. Module not found: Error: Can't resolve './internal/Observable' in

Webpack Module not found: Error: Cannot resolve module

Webpack css-loader: "Module not found: Error: Can't resolve 'main.css' in ..."

Module not found: Error: Can't resolve 'ReactDOM'

webpack Module not found: Error: Can't resolve classNames

Webpack - Module not found: Error: Can't resolve 'node_modules\chokidar\lib'

Module not found: Error: Can't resolve 'uuid' in

MUI : Module not found "Module not found: Error: Can't resolve 'moment' "

Module not found: Error: Can't resolve 'util'

Jest can't resolve path mappings and throws module not found error

Module not found: Error: Can't resolve './components'