Can t resolve module not found in React js

Question

I can t believe that I m asking an obvious question  but I still get the error in console log   Console says that it can t find the module in the directory  but I ve checked at least 10 times for typos  Anyways  here s the component code   I want to render Header in root  import React    Component   from  react  import Header from    src components header header  import logo from    logo svg  import    App css   class App extends Component     render         return          lt Header  gt                export default App    This is the Header component  import React    Component   from  react  import ReactDOM from  react-dom  import navBar from    src components header navBar  import    src css header css   class Header extends Component       render             return                lt div gt                lt div id  particles-js  gt  lt  div gt                lt navBar  gt                lt Title  gt             lt  div gt                      ReactDOM render  lt Header  gt   document getElementById  header       I ve checked at least 10 times that the module is at this location   src components header header  and it is  folder  header  contains  header js     Yet  React still throws this error   Failed to compile    src App js Module not found  Can t resolve    src components header header  in   home wiseman Desktop React Components github-portfolio src   npm test says the same thing

User · Answer

If you create an application with react-create-app  don t forget set environment variable   NODE PATH   src   Or add to  env file to your root folder

User · Answer

The way we usually use import is based on relative path      and    are similar to how we use to navigate in terminal like cd    to go out of directory and mv   file   to move a file to current directory   my-app    node modules    package json   src      containers card js     components header js     App js     index js   In your case  App js is in src  directory while header js is in src components  To import you would do import Header from    components header   This roughly translate to in my current directory  find the components folder that contain a header file   Now  if from header js  you need to import something from card  you would do this  import Card from     containers card   This translate to  move out of my current directory  look for a folder name containers that have a card file   As for import React    Component   from  react   this does not start with a    or     or   therefore node will start looking for the module in the node modules in a specific order till react is found  For a more detail understanding  it can be read here

User · Answer

in my case  The error message was Module not found  Error  Can t resolve   components body  While everything was in the correct directory  I found that renaming body jsx to body js resolve the issue  So I added this code in webpack config js to resolve jsx as js  module exports               resolve        extensions     js     jsx           And then build error gone

User · Answer

There is a better way you can handle the import of modules in your React App  Consider doing this   Add a jsconfig json file to your base folder  That is the same folder containing your package json  Next define your base URL imports in it     jsconfig json      quot compilerOptions quot          quot baseUrl quot    quot   src quot         Now rather than calling        you can easily do this instead  import navBar from  components header navBar  import  css header css   Notice that  components   is different from     components   It s neater this way  But if you want to import files in the same directory you can do this also  import logo from    logo svg

User · Answer

I think it may help you- Read your error carefully-  src App js Module not found  Can t resolve    src components header header  in   home wiseman Desktop React Components github-portfolio src  just write-   header header instead   src components header header in App js if it doesnt work try to change header file name may be head

User · Answer

Deleted the package-lock json file  amp  then ran   npm install   Read further

User · Answer

I had a similar issue   Cause   import HomeComponent from  components HomeComponent     Solution   import HomeComponent from    components HomeComponent     NOTE     was before components  You can read  Zac Kwan s post above on how to use import

User · Answer

For me  I had the input correct but npm start can be buggy  at least using it with Hyper terminal on Windows and Linux   If I move files to different folders  npm start doesn t pick up on these changes  I need to cancel npm start process  make the move  save and then run npm start and it will see the files now

User · Answer

I faced the same issue when I created a new react app  I tried all options in https   github com facebook create-react-app issues 2534  but it didn t help  I had to change the port for the new app and then it worked  By default  apps use the port 3000 I changed the port to 8001 in package json as follows      scripts          start    PORT 8001 react-scripts start        build    react-scripts build        test    react-scripts test        eject    react-scripts eject

User · Answer

Check for the import statements It should be ended with semicolon  If you miss any  you will get this error    Also check whether following import statement added in you component    import   threadId   from  worker threads    If so remove that line  It works for me

User · Answer

You can try to execute  npm install  in the app folder  This might also solve the problem  It worked for me

User · Answer

you should change import Header from    src components header header  to   import Header from     src components header header

User · Answer

I think its the double use of header  I just tried something similar myself and also caused issues  I capitalized my component file to match the others and it worked   import Header from    src components header header     Should be   import Header from    src components header Header

User · Answer

In my case I rename a component file  an VS Code add the below line of code for me    import React    Component   from    node modules react     So I fixed by removing the    node modules   import React    Component   from  react     Cheers

User · Answer

I was facing the same problem and I resolved it  See if your index js file is in src folder  then what ever file you are importing  the folder containing that must also be inside the src folder   That means if your components folder is outside the src folder  just drag it inside the src folder in your editor because the files outside of src folder are not imported   Then you shall be able to import using   components header header in this case

User · Answer

Adding NODE PATH as environment variable in  env is deprecated and is replaced by adding  baseUrl      src   to compilerOptions in jsconfig json or tsconfig json   Reference

User · Answer

You need to be in project folder  if you are in src or public you have to come out of those folders  Suppose your react-project name is  hello-react  then cd hello-react

[javascript] Can't resolve module (not found) in React.js

Examples related to javascript

Examples related to reactjs