这对您来说可能是微不足道的，但这是我的第一个React项目，我正在努力用出口/导入构建它。这是情况。
我的项目中有不同的文件夹
映像”
屏幕。
我想在特定页面中导入我需要的组件
，
但它不起作用！
我在控制台中遇到此错误：
./src/screens/website/homepage/homepage.js 5：0-57中的错误
找不到模块：错误：无法解决'/components/components'in'/users/maxime/acacia/acacia/src/screens/screens/websites/homepage'
解决'/components/components'in'/users/maxime/acacia/src/screens/websites/homepage'
使用描述文件：/Users/maxime/acacia/package.json（相对路径：./src/screens/website/homepage）
字段“浏览器”不包含有效的别名配置
使用描述文件：/USERS/MAXIME/ACACIA/PACKAGE.JSON（相对路径：./src/screens/website/homepage/Components/components/components）
没有扩展
字段“浏览器”不包含有效的别名配置
/用户/Maxime/acacia/src/screens/websites/homepage/组件/组件不存在
.web.mjs
我认为这与主页的导入模块有关（ import {navbar，footer}来自“ ./components/components” ），但我无法弄清楚。
感谢您的帮助，
最大限度
This might be trivial for you but it's my first react project and I'm struggling structuring it with export/import. Here is the situation.
I have different folders in my project
I created a Components.js index to gather all my components and export them all to the different screens.
I then would like to import the components I need in a specific page (ex: homepage)
But it is NOT WORKING !
I get this error in the console :
ERROR in ./src/screens/website/homepage/Homepage.js 5:0-57
Module not found: Error: Can't resolve './components/Components' in '/Users/maxime/acacia/src/screens/website/homepage'
resolve './components/Components' in '/Users/maxime/acacia/src/screens/website/homepage'
using description file: /Users/maxime/acacia/package.json (relative path: ./src/screens/website/homepage)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/maxime/acacia/package.json (relative path: ./src/screens/website/homepage/components/Components)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/maxime/acacia/src/screens/website/homepage/components/Components doesn't exist
.web.mjs
I think it has something to do with the import module of the homepage (import {NavBar, Footer} from "./components/Components") but I can't figure it out.
Thanks for your help,
Max
发布评论
评论（1）
在
Homepage.js中，您尝试从./components/Components导入，它本质上解析为src/screens/website/homepage/components/Components>。在您的情况下，正如我所见，该目录位于其他位置，因此如果您将导入更改为：import {NavBar, Footer} from "../../../components/Components";问题应该得到解决。
您还可以将
Components.js重命名为index.js，这样当您从中导入时，就不必重复自己（您必须更改如果您重命名它，则从该文件到处导入）。它们看起来像这样（使用当前的示例）：
import {NavBar, Footer} from "../../../components";您可以加倍努力，为以下内容配置绝对导入：您的 React 项目，这样您在从远程目录导入时就不必输入
../或../../../。https://create-react-app.dev/docs /导入组件/#absolute-imports
In
Homepage.jsyou are trying to import from./components/Componentswhich essentially resolves tosrc/screens/website/homepage/components/Components. In your case, as I see, this directory is located elsewhere, so if you change your import to:import {NavBar, Footer} from "../../../components/Components";the problem should get resolved.
What you can also do is rename
Components.jstoindex.jsso that when you import from it you won't have to repeat yourself (you will have to change the imports from that file everywhere if you rename it).They would look like this (using the current example):
import {NavBar, Footer} from "../../../components";You can go the extra mile and configure absolute imports for your react project, so that you don't have to type
../or../../../when importing from distant directories.https://create-react-app.dev/docs/importing-a-component/#absolute-imports