无法解析 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} from './hooks/useMedia'; 以及import {UseMedia} from './src/hooks/useMedia'; 我仍然有同样的问题

Answer 1

如果你的 repo 的结构是标准的，你应该在一个组件或屏幕文件夹中。 但是您的目标挂钩位于“挂钩”文件夹中。 所以你必须回到目录中一步并导入你的钩子。 它应该适合你：

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