webpack import module not found error: Uncaught TypeError: _useFetch__WEBPACK_IMPORTED_MODULE_0__["default"](...) is null

Question

I have a problem with this code block. I tried so many thing but not worked at all. When I import this file, I am getting following error:

Uncaught TypeError: _useFetch__WEBPACK_IMPORTED_MODULE_0__["default"](...) is null

npm start runs well and webpack compiles with no error:

javascript modules 5.33 KiB
  ./src/components/Home.js 3.97 KiB [code generated]
  ./src/useFetch.js 1.36 KiB [built] [code generated]
webpack 5.72.0 compiled successfully in 292 ms

useFetch file

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setBlogs] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => { setBlogs(data) })
      .catch(err => console.log(err.message));
  }, [url]);

  return data;
}

export default useFetch;

Home Component

import useFetch from "../useFetch";

const Home = () => {
  // FIXME: ERROROOOARO HERE
  const { data: blogs } = useFetch('http://localhost:8000/blogs');
  ...
}

Answer 1

That useFetch is going to enter into a loop because as no dependencies are provided to the useEffect and you do a setState inside, then it will trigger itself.

Regarding the import, please try doing:

export { useFetch };

and

import { useFetch }  from '../useFetch';