Next.js部署Fleek/Vercel时遇Module not found错误求助

问题概述 #

本地开发Next.js应用时，构建与运行均正常，但部署到Fleek和Vercel平台时，出现模块解析失败错误：Pool.js无法找到同目录下的Withdraw组件。

报错信息 #

2:39:21 PM 12/11/2022: Failed to compile.
2:39:21 PM 12/11/2022: ./components/Pool.js
2:39:21 PM 12/11/2022: Module not found: Can't resolve './Withdraw' in '/workspace/components'
2:39:21 PM 12/11/2022: Import trace for requested module:
2:39:21 PM 12/11/2022: ./pages/Stake.js
2:39:21 PM 12/11/2022: > Build failed because of webpack errors
2:39:21 PM 12/11/2022: error Command failed with exit code 1.

相关配置与代码 #

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    eslint: {
        ignoreDuringBuilds: true,
    },
    resolve: {
        extensions: ["", ".js", ".jsx"],
    },
}

module.exports = nextConfig

package.json #

{
  "name": "gwin-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.6",
    "@heroicons/react": "^1.0.6",
    "moralis": "^1.9.0",
    "next": "12.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hot-toast": "^2.3.0",
    "react-moralis": "^1.4.0",
    "tw-elements": "^1.0.0-alpha12",
    "web3": "^1.7.5",
    "web3uikit": "^0.1.170"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.2",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6"
  }
}

组件代码 #

• Pool.js导入语句：import Withdraw from "./Withdraw"
• Withdraw.js结构：

// 导入依赖

const Withdraw = ({
    // 组件props
}) => {
  // 组件逻辑
}

export default Withdraw

已尝试方案 #

• 在next.config.js中忽略eslint检查
• 将Withdraw组件导入路径调整为./Withdraw（二者同属components目录）
• 本地执行yarn build && yarn start，运行正常
• 确认组件名与文件名均为Withdraw/Withdraw.js
• 在next.config.js中配置扩展名解析规则

解决建议 #

1. 检查文件名大小写：本地系统（如Windows）文件名不区分大小写，但部署服务器（Linux）严格区分。确认Withdraw.js的文件名大小写与导入语句完全一致，避免出现withdraw.js这类大小写差异。
2. 确认git提交状态：部署平台基于git仓库内容构建，检查Withdraw.js是否已提交到仓库，避免本地存在文件但未上传导致服务器缺失。
3. 修正webpack扩展名配置：Next.js 12+版本中，空字符串扩展名""无效，修改next.config.js的resolve配置：

resolve: {
  extensions: [".js", ".jsx", ".ts", ".tsx"],
}

4. 显式添加文件扩展名：在Pool.js的导入语句中加上.js，即import Withdraw from "./Withdraw.js"，消除webpack解析歧义。
5. 清理平台构建缓存：手动清除Fleek和Vercel的构建缓存，避免旧缓存导致的异常。

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