编译失败，找不到模块：无法解析'./xxxx'

Question

请帮忙，我有一个 Next.js 项目，想要将另一个文件夹中的文件导入到我的主应用程序中。请帮助我提供正确的语法、路径等。我收到以下错误，请参阅下面两个文件后面的屏幕截图：

这是以下两个文件：

1. //src/components/AdminApp.tsx

    "use client"; // remove this line if you choose Pages Router
    import { Admin, Resource, } from "react-admin";
    import OverviewList from "./sidebar/OverviewList.tsx";
    
    const AdminApp = () => (
      <Admin>
        <Resource
          name="Overview" list={OverviewList}
        />
      </Admin>
    );

export default AdminApp;

2. //src/sidebar/OverviewList.tsx

import { List, Datagrid, TextField, DateField, BooleanField } from 'react-admin';
       
    export const OverviewList = () => (
        <List>
            <Datagrid>
                <TextField source="id" />
                <TextField source="title" />
                <DateField source="published_at" />
                <TextField source="category" />
                <BooleanField source="commentable" />
            </Datagrid>
        </List>
    );

Answer 1

就像评论中提到的 Kokodoko 一样，将 OverviewList 放在 {} 括号中就可以了。

从“./overviewlist.tsx”导入{OverviewList}

当您导入使用“export const”定义的组件时，假设该文件可能有多个导出，因此需要使用 {} 括号对其进行解构。如果您使用“导出默认值”进行单次导出，则不需要括号。