如何修复导入错误 "Module not found: Can't resolve './components'" - 使用命名导出

Question

我正在尝试创建一个 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 页面。

错误是：

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

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

组件目录包含4个文件：Map.js、TileLayer.js、Marker.js、Popup.js

Simple.js 文件的其余部分已保留在示例中。此文件通过 import SimpleExample from './Simple'

导入到 App.js

我知道这是一个简单的问题，也是我犯的一个错误，但是我无法解决这个错误。

欢迎任何意见。提前致谢。

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

Answer 1

好的，如果你可以尝试在组件文件夹中添加 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, Marder, Popup, 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'

如何修复导入错误 "Module not found: Can't resolve './components'" - 使用命名导出

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

importerror

leaflet

reactjs

react-leaflet