React+Vite项目可复用组件导入失败：无法解析路径如何解决？

问题描述 #

在Vite搭建的React项目中创建可复用组件，开发环境下路径看似能正常识别，但始终弹出无法解析导入的错误。

相关代码 #

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 };

错误信息 #

[vite] 内部服务器错误：无法解析来自"src/pages/Modules/Client/ClientSearchPage.tsx"的导入"features/client/components/ClientSearchForm"。文件是否存在？

解决步骤 #

• 核对目录结构与大小写
  确认src/features/client/components/ClientSearchForm.tsx文件真实存在，且导入语句的路径大小写和实际文件路径完全一致（Vite对路径大小写敏感）。

• 配置Vite路径别名
  在项目根目录的vite.config.ts（或.js）中添加别名配置，让Vite识别这类绝对路径：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import path from 'path';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        'features': path.resolve(__dirname, './src/features'),
        'constants': path.resolve(__dirname, './src/constants'),
        'components': path.resolve(__dirname, './src/components')
      }
    }
  });
  

• 配置TypeScript路径映射（若使用TS）
  在tsconfig.json中添加路径映射，让编辑器和TS编译器识别别名：

  {
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
        "features/*": ["features/*"],
        "constants/*": ["constants/*"],
        "components/*": ["components/*"]
      }
    }
  }
  

• 重启开发服务器
  修改配置文件后必须重启Vite服务，新配置才会生效。

• 尝试添加文件后缀
  若上述步骤无效，可尝试在导入语句中添加文件后缀，比如改为"features/client/components/ClientSearchForm.tsx"。

内容的提问来源于stack exchange，提问作者Joseph Conaty