Gatsby项目中Chrome DevTools的webpack-internal://链接无法跳转问题

我通过Gatsby快速启动命令npm init gatsby my-site-name -- -ts -y创建了一个TypeScript项目，其中IndexPage组件代码如下：

const IndexPage: React.FC<PageProps> = () => {
  throw new Error();
  ...
}

当抛出错误时，Chrome的栈追踪中会包含webpack-internal://格式的链接，例如：

at IndexPage (webpack-internal:///./src/pages/index.tsx?export=default:123:9)

但点击这些链接时，Chrome无法在Sources标签页中打开对应的文件，请问该如何解决这个问题？

解决方案 #

1. 配置Gatsby开发环境的源映射 #

在项目根目录的gatsby-config.ts中添加开发中间件配置，确保源映射能被Chrome正确识别：

export default {
  developMiddleware: app => {
    app.use((req, res, next) => {
      res.setHeader('X-SourceMap', '/static/js/main.js.map');
      next();
    });
  },
};

或者通过启用FAST_DEV flag优化开发体验，同时保证源映射正常生成：

export default {
  flags: {
    FAST_DEV: true,
  },
};

2. 调整Chrome DevTools设置 #

打开Chrome DevTools（F12），点击右上角齿轮图标进入设置，在Sources分类下确认以下选项已勾选：

• Enable JavaScript source maps
• Enable CSS source maps
• Automatically reveal files in navigator

3. 清除缓存并重启开发服务 #

缓存异常可能导致源映射失效，按以下步骤操作：

• 停止当前运行的Gatsby开发服务器（Ctrl+C）
• 删除项目根目录下的.cache和public文件夹：

  rm -rf .cache public
  

• 重新启动开发服务：

  npm run develop
  

4. 检查TypeScript配置 #

确保tsconfig.json中的源映射相关选项正确配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": false
  }
}

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