I’m trying to create a reusable component for my react project (using Vite). For some reason I keep getting the error that it can’t resolve the import. In my dev environment everything seems to be fine (all paths are recognized)
Am I missing a step?
Here is what I have:
ClientSearchForm.tsx
import React from 'react';
import { z } from "zod"
import { clientSearchFormSchema } from "constants/schemas/clientList"
import {Panel, PanelHeader, PanelTitle } from "components/ui/panel"
export function ClientSearchForm() {
return (
<>
<Panel>
<PanelHeader>
<PanelTitle />
</PanelHeader>
</Panel>
</>)
}
ClientSearchPage.tsx
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
//import { ClientSearchForm } from 'features/client';
import { ClientSearchForm } from "features/client/components/ClientSearchForm";
const ClientSearchPage = () => {
return (
<>
<ClientSearchForm />
</>
)
};
export default ClientSearchPage;
Routes.tsx
import { lazy } from 'react';
const Index = lazy(() => import('../pages/Index'));
const Diagnostic = lazy(() => import('../pages/Dashboards/Diagnostic'));
const Supervision = lazy(() => import('../pages/Dashboards/Supervision'));
const ClientSearch = lazy(() => import('../pages/Modules/Client/ClientSearchPage'));
const routes = [
// default
{
path: '/',
element: <Index />,
layout: 'default',
},
// Diagnostic Dashboard
{
path: '/dashboards/diagnostic',
element: <Diagnostic />
},
// Supervision Dashboard
{
path: '/dashboards/supervision',
element: <Supervision />
},
// Client Search
{
path: '/modules/client',
element: <ClientSearch />
}
];
export { routes };
ERROR:
[vite] Internal server error: Failed to resolve import “features/client/components/ClientSearchForm” from “src/pages/Modules/Client/ClientSearchPage.tsx”. Does the file exist?