Next.js 13.4无法直接从node_modules导入模块求助

以下是针对你遇到的next/link等模块无法直接导入、仅相对路径或@/next/link有效的问题，整理的排查与解决步骤：

1. 排查本地文件/目录冲突 #

检查项目根目录或src目录下是否存在名为next的文件夹或文件——Node模块解析会优先查找本地同名资源，而非node_modules中的包。如果存在，直接删除或重命名该目录/文件。

2. 调整tsconfig.json解析配置 #

修改tsconfig.json的compilerOptions，优化模块解析逻辑：

• 添加baseUrl: "."，让解析器从项目根目录开始查找模块；
• 将moduleResolution从bundler改为node，适配Node默认的模块解析规则。

修改后的配置示例：

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "baseUrl": ".",
        "plugins": [
            {
                "name": "next"
            }
        ],
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
    "exclude": ["node_modules"]
}

修改后重启Next.js开发服务器，验证导入是否正常。

3. 清除缓存并重装依赖 #

执行以下命令清除缓存并重新安装依赖，解决可能的缓存损坏问题：

# 清除Next.js缓存
rm -rf .next

# 清除npm缓存（可选）
npm cache clean --force

# 重装依赖
npm install

如果使用yarn，替换为：

rm -rf .next
yarn cache clean
yarn install

4. 升级Next.js到最新小版本 #

13.4部分早期版本存在模块解析bug，升级到13.4.x的最新版本可修复此类问题：

npm install next@latest

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