可以在React.js中找到的模块可以分辨模块

Question

我可以解决这个问题。我已经尝试了相对路径，但是我仍然遇到相同的错误。

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'

错误：

import {UseMedia} from 'hooks/useMedia';

被调用的文件：

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

在解决问题时，我尝试了import {usemedia}从'./hooks/usemedia';以及import> import> import> import {usemedia} src/hooks/usemedia';，我仍然有同样的问题

Answer 1

如果您的存储库的结构是标准配置，则应在组件或屏幕文件夹中。但是您的目标挂在“钩子”文件夹中。
因此，您必须在目录中返回一步并导入钩子。它应该对您有用：

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