無法解析 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'