Next.js项目控制台日志来源异常及webpack加载报错求助

开发Next.js Pages Router项目时，浏览器控制台所有console.log均显示来自名为index.js的文件，但查看该文件后，发现日志实际来自一段包含original.apply(this, args);的未知文件，且从未修改或见过该文件。

相关代码片段 #

日志指向的代码段 #

function replace(_logger, level) {
        if (!_logger[level]) {
            return () => {
            };
        }
        return patch(_logger, level, (original) => {
            return (...args) => {
                original.apply(this, args);
                if (inStack) {
                    return;
                }
                inStack

该文件的开头代码 #

import { patch } from '../../../utils.js';
import { ErrorStackParser } from './error-stack-parser.js';
import { stringify } from './stringify.js';

const defaultLogOptions = {
    level: [
        'assert',
        'clear',
        'count',
        'countReset',
        'debug',
        'dir',
        'dirxml',
        'error',
        'group',
        'groupCollapsed',
        'groupEnd',
        'info',
        'log',
        'table',
        'time',
        'timeEnd',
        'timeLog',
        'trace',
        'warn',
    ],
    lengthThreshold: 1000,
    logger: 'console',
};
function initLogObserver(cb, win, options) {

项目依赖 #

"dependencies": {
        "@apollo/client": "^3.7.14",
        "@notionhq/client": "^2.2.3",
        "@testing-library/user-event": "^14.4.3",
        "@types/node": "18.14.2",
        "@types/react": "18.0.28",
        "@types/react-dom": "18.0.11",
        "cookie": "^0.5.0",
        "eslint-config-next": "13.2.1",
        "graphql": "^16.6.0",
        "knex": "^2.4.2",
        "next": "13.2.1",
        "next-auth": "^4.22.1",
        "next-connect": "^1.0.0",
        "next-router-mock": "^0.9.3",
        "next-test-api-route-handler": "^3.1.8",
        "objection": "^3.0.1",
        "react": "^18.2.0",
        "react-cookie": "^4.1.1",
        "react-dom": "18.2.0",
        "react-dropdown": "^1.11.0",
        "react-pdf": "^7.0.3",
        "react-select": "^5.7.3",
        "react-text-transition": "^3.0.2",
        "reactjs-popup": "^2.0.5",
        "remark-html": "^15.0.2",
        "sharp": "^0.32.3",
        "sqlite3": "^5.1.6",
        "typescript": "4.9.5"
    },
    "devDependencies": {
        "source-map-loader": "^1.0.0",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^14.0.0",
        "autoprefixer": "^10.4.14",
        "eslint": "^8.41.0",
        "eslint-config-standard": "^17.1.0",
        "eslint-plugin-import": "^2.27.5",
        "eslint-plugin-jest": "^27.2.1",
        "eslint-plugin-n": "^16.0.0",
        "eslint-plugin-promise": "^6.1.1",
        "eslint-plugin-react": "^7.32.2",
        "jest": "^29.5.0",
        "jest-environment-jsdom": "^29.5.0",
        "jest-fetch-mock": "^3.0.3",
        "next-connect": "^1.0.0",
        "postcss": "^8.4.21",
        "tailwindcss": "^3.2.7"
    }

已尝试的方案 #

尝试通过webpack devtools设置eval-cheap-source-map修复source map问题，但日志仍显示来自同一文件的第103行。

额外错误信息 #

Chrome开发者工具中查看源码时，名为console.log的文件提示：

Could not load content for webpack://react-devtools-extensions/react-devtools-shared/src/backend/console.js (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

解决方案与调试思路 #

• 定位console劫持来源：从代码中的initLogObserver和patch函数判断，这是某个依赖对console进行了劫持。用npm ls react-devtools-extensions检查是否存在间接依赖，重点排查@apollo/client、测试工具或监控类依赖。
• 临时移除可疑依赖：找到疑似劫持console的依赖后，临时移除并重启项目，验证日志来源是否恢复正常。
• 调整Next.js devtools配置：在next.config.js中设置完整的source-map替代eval类配置：

  module.exports = {
    webpack: (config, { dev }) => {
      if (dev) {
        config.devtool = 'source-map';
      }
      return config;
    },
  };
  

• 关闭React DevTools扩展：错误提示指向react-devtools-extensions，关闭浏览器的React DevTools扩展后重启项目，排查扩展是否干扰console栈信息。
• 使用console.trace()替代log：临时用console.trace()输出，它会打印完整调用栈，绕过被劫持的log方法，找到真正的日志发起位置。
• 清理缓存：删除.next文件夹和node_modules/.cache，执行npm install后重启项目，排除缓存导致的source map异常。
• 升级/降级Next.js版本：当前使用的Next.js 13.2.1属于早期版本，可能存在pages router的source map兼容问题，尝试升级到13.x稳定版（如13.4.x）或降级到13.1.x。

内容的提问来源于stack exchange，提问作者Alexis B.