Can't resolve module not found in React.js

Question

I can resolve this issue. I have tried relative path but i am still getting the same error.

Compiled with problems:X

ERROR in ./src/containers/Home/HomePage.jsx 6:0-48

Module not found: Error: Can't resolve './hooks/useMedia' in 'C:\Users\{user}\Desktop\Hackathon-website-template\src\containers\Home'

the error:

import {UseMedia} from 'hooks/useMedia';

the file being called :

import { useEffect } from 'react';

export const UseMedia = (query: string, val: number, setMediaQuery: any) => {
  const queryStr = `(${query}: ${val}px)`;

  useEffect(() => {
    const mediaWatcher = window.matchMedia(queryStr);
    mediaWatcher.matches ? setMediaQuery(true) : setMediaQuery(false);

    function updateMediaWatcher(e: any) {
      e.matches ? setMediaQuery(true) : setMediaQuery(false);
    }
    mediaWatcher.addEventListener('change', updateMediaWatcher);

    return function cleanup() {
      mediaWatcher.removeEventListener('change', updateMediaWatcher);
    };
  });
};

in resolving the issue, I have tried import {UseMedia} from './hooks/useMedia'; as well as import {UseMedia} from './src/hooks/useMedia'; and I still have the same issue

Answer 1

If the structure of your repo is standard, You should be in a component or screen folder. But your target hook is in the "hooks" folder. So you have to go back in the directory for one step and import your hook. it should work for you:

import {UseMedia} from '../hooks/useMedia'