Question 378931 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Failed to compile, Module not found: Can't resolve './xxxx'

Please assist, I have a Next.js project and want to import a file from another folder into my main app. Please assist me with the correct syntax, paths etc.. I am getting the following error, see screenshot below following by the two files:

enter image description here

Thease are the two files below:

  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;
  1. //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>
    );
Tags:

2

Answers


  1. 0

    Like Kokodoko mentioned in the comment, wrapping the OverviewList in {} brackets should do it.

    import { OverviewList } from "./overviewlist.tsx"

    When you import a component that’s defined with ‘export const’ then it’s assumed there may be multiple exports from that file so it needs to be deconstructed with {} brackets. If you do a single export by using ‘export default’ then you won’t need the brackets.

    Login or Signup to reply.
  2. 0

    It seems like you’re doing named export the function OverviewList.

    Hence the correct way to import is

    import { OverviewList } from './sidebar/OverviewList';

    In case you would like to change your import style as import as a module

    import OverviewList from './sidebar/OverviewList';

    You need to export your function as default export

    export default OverviewList;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search