JavaScript on Next.js 和 React 导入错误“无法解析模块'../utils/makeId'.eslintimport/no-unresolved 的路径”

Question

I'm following along a course and the instructor doesn't have this error while my code is identical to his. I've got a utility function in the /utils folder which is in the same folder as the index.js that is importing../utils/makeId. I'm using eslint and everything both files are.js files but it's not importing.

---

import { useState, useEffect, useRef } from 'react';
import { Banner, CreatorCard } from '../components';

import images from '../assets';
import { makeId } from '../utils/makeId';

const Home = () => {
  const parentRef = useRef(null);
  const scrollRef = useRef(null);

  return (
    <div className="flex justify-center sm:px-4 p-12">
      <div className="w-full minmd:w-4/5">
        <Banner
          name="Discover, collect, and sell extraordinary NFTs"
          childStyles="md:text-4xl sm:text-2xl xs=text-xl text-left"
          parentStyles="justify-start mb-6 h-72 sm:h-60 p-12 xs:p-4 xs:h-44 rounded-3xl"
        />

        <div>
          <h1 className="font-poppins dark:text-white text-nft-black-1 text-2xl minlg:text-4xl font-semibold ml-4 xs:ml-0">Best Creators</h1>

          <div
            className="relative flex-1 max-w-full flex mt-3"
            ref={parentRef}
          >
            <div
              className="flex flex-row w-max overflow-x-scroll no-scrollbar select-none"
              ref={scrollRef}
            >
              {[6, 7, 8, 9, 10].map((i) => (
                <CreatorCard
                  key={`creator-${i}`}
                  rank={i}
                  creatorImage={images[`creator${i}`]}
                  creatorName={`0x${makeId(3)}...${makeId(4)}}`}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;

makeId.js

export const makeId = (length) => {
  let result = '';

  const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;

  for (let i = 0; i < length; i += 1) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }

  return result;
};

Screenshot

I tried adding extension settings in my eslintrc.js I found on a similar post; while that fixed my import error I would still get a compile error on the website.

Answer 1

The problem was it needed to be './utils/makeId' instead of '../utils/makeId', I'm not sure why but I guess because /utils is in the same folder as index.js the proper syntax is./ not../.