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

by

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.

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. Understanding unique keys for array children in React.js
  3. What do these three dots in React do?
  4. Arrow function without curly braces
  5. Problem in redirecting programmatically to a route in react router v6
  6. What happens when using this.setState multiple times in React component?
  7. React – changing an uncontrolled input
  8. Reactjs setState() with a dynamic key name?
  9. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  10. ReactJS – .JS vs .JSX
  11. TypeError: Cannot read property ‘setState’ of undefined
  12. Is this the correct way to delete an item using redux?
  13. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  14. reactjs this.refs vs document.getElementById
  15. Using anchor tags in react-router 4
  16. Updating nested data in redux store
  17. React js change child component’s state from parent component
  18. Importing CSS files in Isomorphic React Components
  19. Using Matter.js to render to the DOM or React
  20. Rendering an array.map() in React
  21. Playing sound in React.js
  22. Should we use useCallback in every function handler in React Functional Components
  23. React: Axios Network Error
  24. What is the best way to have a fallback image in NextJS?
  25. Detect scroll direction in React js
  26. React cannot read property map of undefined
  27. useMemo vs. useEffect + useState
  28. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  29. how to render child components in react.js recursively
  30. Extending React.js components

Leave a Comment