本地运行Gatsby时无法找到同目录TSV文件的问题排查

核心原因及对应解决方案 #

1. Node.js路径解析与Gatsby构建环境不匹配 #

如果你的代码用fs模块直接读取文件（比如fs.readFileSync('./market-data.tsv')），这里的相对路径是相对于Gatsby的构建工作目录（项目根目录），而非src/目录。即便文件和useMarketData.js同处src/，直接写./market-data.tsv会去项目根目录查找，自然找不到目标文件。

解决办法：

• 使用绝对路径结合__dirname定位文件：

  const fs = require('fs');
  const path = require('path');
  const tsvPath = path.join(__dirname, './market-data.tsv');
  const data = fs.readFileSync(tsvPath, 'utf8');
  

  __dirname会指向当前useMarketData.js所在的src/目录，拼接后能精准定位TSV文件。

2. 未遵循Gatsby静态资源处理规范 #

Gatsby对静态资源读取有特定流程，直接用fs读取源码目录文件，在生产构建时可能因文件被打包优化导致路径失效。更推荐用官方插件处理：

解决办法：

• 安装依赖插件：

  npm install gatsby-source-filesystem gatsby-transformer-csv
  

• 在gatsby-config.js中配置插件：

  module.exports = {
    plugins: [
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `data`,
          path: `${__dirname}/src/`, // 指定TSV所在的src目录
        },
      },
      `gatsby-transformer-csv`,
    ],
  };
  

• 在useMarketData.js中通过GraphQL查询获取数据：

  import { useStaticQuery, graphql } from 'gatsby';
  
  export const useMarketData = () => {
    const data = useStaticQuery(graphql`
      query {
        allMarketDataTsv {
          nodes {
            time
            stock
            index
          }
        }
      }
    `);
    return data.allMarketDataTsv.nodes;
  };
  

  注意查询中的allMarketDataTsv由TSV文件名生成（比如文件名为market-data.tsv，则查询类型为allMarketDataTsv）。

3. Webpack未配置TSV文件解析 #

如果尝试用ES模块导入TSV文件（比如import marketData from './market-data.tsv'），Webpack默认无法解析TSV格式，会触发路径报错。

解决办法：

• 安装解析依赖：

  npm install csv-loader --save-dev
  

• 在gatsby-node.js中添加Webpack配置：

  exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /\.tsv$/,
            use: ['csv-loader', { options: { delimiter: '\t' } }],
          },
        ],
      },
    });
  };
  

  配置完成后，即可通过导入方式直接获取TSV解析后的数据。

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