如何解决导入错误“找不到模块：无法解析'./components'”-使用命名导出

问题描述

我正在尝试使用create-react-app创建一个React-Leaflet map设置，但是无法导入我的Simple-Map组件，该组件是使用Named Exports导出的。这是React-Leaflet Examples页面上的第一个示例。

错误是：

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

示例中的import statement已更改为import {Map,TileLayer,Marker,Popup } from './components'，以反映文件的实际位置。

components目录包含4个文件：Map.js，TileLayer.js，Marker.js，Popup.js

已将Simple.js文件的其余部分保留为示例中的内容。该文件通过App.js

导入到import SimpleExample from './Simple'中

我了解这是一个简单的问题，也是我正在犯的错误，但是我无法解决此错误。

任何输入表示赞赏。 预先感谢。

如果有帮助，这是我在VS代码中的文件夹结构。

解决方法

好的，如果您可以尝试在components文件夹中添加index.js文件

并在其中添加

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


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

，并且必须确保导出了这些文件Map,TileLayer

那是因为当您从文件夹中导入时，您已经导入了索引文件，却找不到它

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

或者您尝试使用此

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

并删除此

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