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

【问题标题】：How to fix import error "Module not found: Can't resolve './components'" - using Named Exports如何修复导入错误“找不到模块：无法解析'./components'” - 使用命名导出
【发布时间】：2020-08-12 05:21:41
【问题描述】：

我正在尝试使用 create-react-app 创建React-Leaflet map 设置，但我无法导入使用Named Exports 导出的Simple-Map 组件。这是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 文件的其余部分与示例一样保留。该文件通过import SimpleExample from './Simple'导入App.js

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

感谢任何输入。提前致谢。

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

【问题讨论】：

标签： reactjs leaflet importerror react-leaflet

【解决方案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'

【讨论】：

谢谢哈桑，添加index.js 使错误消息消失。但是，我还没有得到地图（可能是单独的问题），并且在main.chunk.js:256 中出现控制台错误Uncaught SyntaxError: Unexpected token '!' ... --> 当您说要导出这些文件Map, Marker, Popup, TileLayer 时，您指的是模块。您回复中的导出声明或其他地方的其他导出声明？
如果您有任何问题欢迎您问我，我会尽力帮助您
是的，哈桑，抱歉，您认为语法错误来自坏的 html 或 JS 吗？我没有对 React-Leaflet 上的示例进行更改，所以我想知道我可以从哪里开始寻找这个？另外：我应该在其他地方导出 Map、.. 等吗？我在原始文件中有导出，在index.js 中有导出语句，就像你上面所说的那样...... && 谢谢！！
尝试使用这个``` import Map from './components/Map';从 './components/Marder' 导入 Marder；从'./components/Popup'导入弹出窗口；从'./components/TileLayer'导入TileLayer； ``` 并删除 ``` import {Map, TileLayer, Marker, Popup } from './components' ```