javascript - Failed to resolve import "UseDebounce" from "srcSearchComponent.jsx". Does the

admin管理员组

文章数量:1279145

I'm following this tutorial on Medium for using a debounce with autocomplete in React. /@sankalpa115/usedebounce-hook-in-react-2c71f02ff8d8 But nothing is rendering and I'm receiving this error:

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

I'm using node -v v23.7.0, npm -v 10.9.2 and Vite I've tried adding <base href="./src"> to my index.html with no results.

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.js

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;

I'm following this tutorial on Medium for using a debounce with autocomplete in React. https://medium/@sankalpa115/usedebounce-hook-in-react-2c71f02ff8d8 But nothing is rendering and I'm receiving this error:

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

I'm using node -v v23.7.0, npm -v 10.9.2 and Vite I've tried adding <base href="./src"> to my index.html with no results.

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.js

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;

• javascript
• reactjs

Share Improve this question Follow edited Feb 23 at 20:43 LarryN asked Feb 23 at 20:35 LarryNLarryN 36211 gold badge33 silver badges1313 bronze badges 3

• Is UseDebounce.jsx in the same directory as SearchComponent.jsx? Also consider useDebounce instead. That way you are following React’s rule of hooks to the letter. – Chukwujiobi Canon Commented Feb 23 at 20:39
• Yes UseDebounce.jsx and SearchComponent.jsx are both in the src directory – LarryN Commented Feb 23 at 20:42
• 1 You do not need <base href="./src">. That will only mess with Vite. Use relative URLs instead: import UseDebounce from './UseDebounce'. – Chukwujiobi Canon Commented Feb 23 at 20:49

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I deleted both SerchComponent.jsx and UseBebounce.jsx then recreated them and I fot to import useEffect in SearchComponent.jsx. Now it's working.

The line "Failed to resolve import "UseDebounce" from src/SearchComponent.jsx. Does the file exist?" means that vite failed to find UseDebounce because it couldn't be found.

The most popular reason for this error is that you either wrote "UseDebounce.jsx" wrong, or that the file is not in the correct directory

本文标签：