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        gt       lt div gt       lt AddTodo   gt       lt VisibleTodoList   gt       lt Footer   gt     lt  div gt     export default App   And for example containers AddTodo js   import   connect   from  react-redux  import   addTodo   from     actions   let AddTodo      dispatch      gt      let input    return        lt div gt         lt form         onSubmit  e   gt              e preventDefault             if   input value trim                  return                       dispatch addTodo input value             input value                        gt           lt input           ref  node   gt                input   node                        gt           lt button type  submit  gt            Add Todo          lt  button gt         lt  form gt       lt  div gt        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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

changing templateUrl     to template     fixed it

User · Answer

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

User · Answer

Just add it to your config  Source  https   www jumoel com 2017 zero-to-webpack html  externals    nodeExternals

User · Answer

If you use multiple node modules  yarn workspace etc   tell webpack where they are    externals   nodeExternals       modulesDir  path resolve   dirname      node modules           nodeExternals

User · Answer

If you have a typescript file  you have to instruct the webpack to resolve them by using below code in webpack config js module exports             resolve         extensions    ts    tsx

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

Examples related to javascript

Examples related to npm

Examples related to webpack

Examples related to relative-path