__dirname inaccurate in TS gatby-configs

[mfanuzzi]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

In porting some older Gatsby 3 projects to 4, I also converted the gatsby-config.js to .ts as we use Typescript and typesafe configs are 💯 🏆 🔥

Our gatsby-configs tend to use __dirname (eg for gatsby-plugin-root-import, gatsby-source-filesystem, etc.) This does not work as intended in TS gatsby-configs. Presumably, because of transpiling, __dirname will instead reference [project]/.cache/compiled

Reproduction Link

https://github.com/gatsbyjs/gatsby/tree/master/starters/default

Steps to Reproduce

I created two basic starters gatsby new, one TS, one JS, and added to each's gatsby-config:

console.log(`__dirname is ${__dirname}`);

Output of gatsby build for JS version (correct):

__dirname is /home/mfan/projects/experimental/dirname-test/dirname-test-js

Output of gatsby build for TS version (incorrect):

__dirname is /home/mfan/projects/experimental/dirname-test/dirname-test-ts/.cache/compiled

Expected Result

__dirname should be the project source directory

Actual Result

__dirname will instead reference [project]/.cache/compiled for TS gatsby-configs

Environment

System:
    OS: Linux 4.19 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  npmPackages:
    gatsby: ^4.12.1 => 4.12.1
  npmGlobalPackages:
    gatsby-cli: 4.12.1

Config Flags

No response

[mfanuzzi]

Here is my (hopefully temporary) solution, at the top of gatsby-config.ts after my imports:

// __dirname gets changed when this file is precompiled; change it back
if (__dirname.endsWith('/.cache/compiled')) {
  __dirname = __dirname.replace('/.cache/compiled', '');
}

Better would be if it did this automatically. Or if there was some other, "safe" variable that we could use to accomplish the same thing (eg __projectroot)

[LekoArts]

Hi!

This is a known limitation: https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#__dirname
I fixed it with parcel-bundler/parcel#7727 which got released in Parcel 2.5.0 and the PR #35446 will update to that version.