How to fix import error "Module not found: Can't resolve './components'" - using Named Exports

Question

I am attempting to create a React-Leaflet map setup with create-react-app, but I am unable to import my Simple-Map component, which is exported using Named Exports. This is the first example on the React-Leaflet Examples page.

The error is:

./src/Simple.js
Module not found: Can't resolve './components' in '/ice_map/src'

The import statement from the example has been changed to import {Map, TileLayer, Marker, Popup } from './components' to reflect actual location of file.

The components directory contains 4 files: Map.js, TileLayer.js, Marker.js, Popup.js

The rest of the Simple.js file has been left as in the example. This file is imported into App.js via import SimpleExample from './Simple'

I understand this is a simple issue and an error that I am making, however I have not been able to resolve this error.

Any input is appreciated. Thanks in advance.

In case this helps, here is my folder structure in VS code.

Answer 1

ok if you can try to add index.js file in the components folder

and inside it, you will add these

import Map from './Map';
import  Marder from './Marder';
import  Popup from './Popup';
import TileLayer from './TileLayer';


module.exports = {Map, Marder, Popup, TileLayer};

and you must ensure you are export these files Map, Marder, Popup, TileLayer

and that's because when you import from the folder you already import index file and there didn't find it

import <somting> from './components' === import <somting> from './components/index'

or you try use this

import Map from './components/Map';
import Marder from './components/Marder'; 
import Popup from './components/Popup'; 
import TileLayer from './components/TileLayer';

and delete this

import {Map, TileLayer, Marker, Popup } from './components'