Can’t resolve module (not found) in React.js

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.

Related Posts:

  1. Invariant Violation: Objects are not valid as a React child
  2. Invariant Violation: Objects are not valid as a React child
  3. “SyntaxError: Unexpected token < in JSON at position 0"
  4. What is Virtual DOM?
  5. How to use Redirect in the new react-router-dom of Reactjs
  6. React.js: Set innerHTML vs dangerouslySetInnerHTML
  7. React – uncaught TypeError: Cannot read property ‘setState’ of undefined
  8. Understanding unique keys for array children in React.js
  9. How to do a redirect to another route with react-router?
  10. Jest spy on functionality
  11. Difference between npx and npm?
  12. Reactjs – Form input validation
  13. TypeScript React.FC confusion
  14. Error Running React Native App From Terminal (iOS)
  15. Axios Delete request with body and headers?
  16. Loop inside React JSX
  17. How to implement navbar using react
  18. Loop inside React JSX
  19. Understanding React-Redux and mapStateToProps()
  20. how to render a react component using ReactDOM Render
  21. React this.setState is not a function
  22. Console logging for react?
  23. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
  24. ‘react-scripts’ is not recognized as an internal or external command
  25. After $npm install, Getting Error: Cannot find module ‘../lib/utils/unsupported.js’
  26. React Native: this.setState is not a function
  27. React: trigger onChange if input value is changing by state?
  28. In reactJS, how to copy text to clipboard?
  29. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  30. You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
  31. React-Router only one child
  32. What does the className attribute mean in JSX?
  33. What is prevState in ReactJS? [duplicate]
  34. React with ES7: Uncaught TypeError: Cannot read property ‘state’ of undefined
  35. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  36. Setting a backgroundImage With React Inline Styles
  37. React – TypeError: Cannot read property ‘props’ of undefined
  38. What is the difference between state and props in React?
  39. How to pass props to {this.props.children}
  40. React eslint error missing in props validation
  41. OnChange event using React JS for drop down
  42. ESLint Parsing error: Unexpected token
  43. React Context vs React Redux, when should I use each one?
  44. Setting onSubmit in React.js
  45. How to import image (.svg, .png ) in a React Component
  46. Uncaught TypeError: Cannot read property ‘props’ of null
  47. ReactJS: setTimeout() not working?
  48. React Uncaught Error: Target container is not a DOM element [duplicate]
  49. How to refresh a Page using react-route Link
  50. React Error: Target Container is not a DOM Element
  51. How to implement authenticated routes in React Router 4?
  52. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  53. Console is throwing Unterminated JSX contents error
  54. How to scroll to an element?
  55. How to handle the `onKeyPress` event in ReactJS?
  56. setInterval in a React app
  57. Cannot read property ‘bind’ of undefined. React.js
  58. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  59. Failed to compile. Module not found: Can’t resolve ‘react-router-dom’
  60. ReactJS: setTimeout() not working?
  61. What does “export default” do in JSX?
  62. How to add multiple classes to a ReactJS Component?
  63. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  64. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  65. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  66. React.js – Can’t read property of undefined
  67. module.exports “Module is not defined”
  68. how to download file in react js
  69. Trying to use fetch and pass in mode: no-cors
  70. React’s setState method with prevState argument
  71. onEnter not called in React-Router
  72. Pass react component as props
  73. Uncaught TypeError: Cannot read property ‘call’ of undefined at __webpack_require__
  74. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  75. How to clear react-native cache?
  76. Async/await in componentDidMount to load in correct order
  77. Why use Redux over Facebook Flux?
  78. Local package.json exists, but node_modules missing
  79. react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined
  80. Access Control Origin Header error using Axios
  81. Cannot read property ‘getHostNode’ of null
  82. Can’t perform a React state update on an unmounted component
  83. how to use react require syntax?
  84. onClick not working React js
  85. This.props.dispatch not a function – React-Redux
  86. React-Router : What is the purpose of IndexRoute?
  87. How to add a keyboard listener to my onClick handler?
  88. How to add a keyboard listener to my onClick handler?
  89. React router not showing browser history
  90. e.target.value on an input field ReactJs, how does it work?
  91. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  92. command not found: jest
  93. Jest encountered an unexpected token
  94. ReactJS – .JS vs .JSX
  95. ReactJS: Maximum update depth exceeded error
  96. React, Uncaught ReferenceError: ReactDOM is not defined
  97. How to allow CORS in react.js?
  98. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  99. Uncaught ReferenceError: React is not defined
  100. What do these three dots in React do?

Leave a Comment