Vite+React项目中导入UseDebounce钩子时模块解析失败的问题求助

我正在跟着教程在React中结合防抖实现自动完成功能，但现在页面完全不渲染，还收到了这个错误：

Failed to resolve import "UseDebounce" from "src/SearchComponent.jsx". Does the file exist?

我的环境是node v23.7.0、npm v10.9.2，用Vite搭建的项目。我试过在index.html里加<base href="./src">但没效果。

下面是我的项目文件代码：

main.js #

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'    
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

App.jsx #

import React from 'react';
import Button from '@mui/material/Button';
import FirstComponent from './FirstComponent';
import SearchComponent from './SearchComponent';

function App() {
  
  return (
    <>
      <Button variant='contained'>Login</Button>
      <SearchComponent />
    </>
  )
}
export default App

UseDebounce.jsx #

import { useState, useEffect } from 'react';    
function UseDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);    
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}    
export default UseDebounce;

SearchComponent.jsx #

import React, { useState } from 'react';
import UseDebounce from 'UseDebounce';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  
  // Set delay time according to your needs
  const debouncedSearchTerm = UseDebounce(searchTerm, 300); 

  useEffect(() => {
    // Here you can trigger your search logic, like an API call
    // For demonstration, let's just console log the debounced search term
    console.log("Search triggered with term:", debouncedSearchTerm);
  }, [debouncedSearchTerm]);

  const handleInputChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleInputChange}
      />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}    
export default SearchComponent;

问题原因与解决方案 #

1. 核心问题：导入路径错误

Vite遵循ES模块导入规则，当你直接写import UseDebounce from 'UseDebounce'时，它会默认去node_modules目录下查找第三方包，而不是你本地src目录里的自定义钩子文件——这就是模块解析失败的根本原因，和<base href>完全无关。

2. 修复步骤

步骤1：修改导入路径

在SearchComponent.jsx中，把导入语句改成相对路径（因为UseDebounce.jsx和SearchComponent.jsx在同一目录下）：

// 用相对路径引入本地文件
import UseDebounce from './UseDebounce';

步骤2：修复遗漏的useEffect导入

你在SearchComponent.jsx里使用了useEffect但没导入，运行时会触发新错误，需要在顶部导入补上：

import React, { useState, useEffect } from 'react';

步骤3：（可选但推荐）遵循React钩子命名规范

React社区约定钩子使用小驼峰命名（比如useDebounce而非UseDebounce），这样代码更易读且符合规范。你可以：

• 把钩子文件名改成useDebounce.jsx
• 函数名改为function useDebounce(...)
• 导入语句对应改成import useDebounce from './useDebounce';

修改后的完整SearchComponent.jsx示例：

import React, { useState, useEffect } from 'react';
import useDebounce from './useDebounce';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  
  const debouncedSearchTerm = useDebounce(searchTerm, 300); 

  useEffect(() => {
    console.log("Search triggered with term:", debouncedSearchTerm);
  }, [debouncedSearchTerm]);

  const handleInputChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleInputChange}
      />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}    
export default SearchComponent;

修改后的useDebounce.jsx示例：

import { useState, useEffect } from 'react';    
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);    
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}    
export default useDebounce;

做完这些修改后，重启Vite开发服务器，模块解析的问题应该就能解决了。

备注：内容来源于stack exchange，提问作者LarryN