Next.js+React导入报错：无法解析../utils/makeId模块（ESLint错误）

我跟着课程写代码，和讲师的代码完全一致，但出现ESLint错误：Unable to resolve path to module '../utils/makeId'.eslintimport/no-unresolved。我在同级的/utils文件夹里放了makeId.js工具函数，和导入它的index.js都是.js格式，但就是导不进来。之前参考帖子改了eslintrc.js的扩展名设置，ESLint的错误是没了，但网站又出现编译错误。

相关代码 #

Home组件代码（index.js） #

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

解决方案 #

1. 先确认文件结构是否正确 #

假设你的index.js在src/pages/Home目录，那utils文件夹必须和pages同级（也就是src/utils/makeId.js），../utils/makeId的路径才生效。如果utils是在pages文件夹内部，路径得改成./utils/makeId，别搞混层级。

2. 同步配置ESLint和编译工具 #

你之前只改了ESLint的扩展名，但编译工具（Webpack/Vite）没同步配置，才会出编译错误。

修正ESLint配置（解决import/no-unresolved）

在.eslintrc.js里添加以下配置，确保它能识别.js/.jsx扩展名：

module.exports = {
  // 其他已有配置...
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx']
      }
    }
  }
};

修正编译工具配置

• 如果用Vite：在vite.config.js里添加扩展名解析规则：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    extensions: ['.js', '.jsx']
  }
});

• 如果用Create React App：CRA默认支持.js/.jsx导入，不用额外配置，但如果自定义过Webpack配置，要确保resolve.extensions里包含这两个后缀。

3. 检查拼写与导出导入语法 #

你的命名导出export const makeId和命名导入import { makeId }是匹配的，没问题，但要排查：

• 文件名/文件夹名有没有拼写错误？比如utils写成util，makeId写成MakeId；
• 如果utils文件夹里有index.js，要确保它正确导出makeId（比如export { makeId } from './makeId'）。

4. 清理缓存重启服务 #

缓存经常搞出奇怪问题，试试：

• 关闭开发服务器，删除node_modules/.cache（Vite）或者build文件夹（CRA）；
• 重新执行npm install；
• 重启开发服务器。

内容的提问来源于stack exchange，提问作者Slatt