Failed to compile `gatsby-*.ts` to JS when absolute path contains a character like "()"

[Szulerinio]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] 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

Gatsby failed to compile gatsby-*.ts to JS when absolute path contains a character like "()"

Reproduction Link

https://github.com/Szulerinio/build-test

Steps to Reproduce

In an existing project, rename the site directory to include "()" e.g "my-site" -> "my-site(1)"

Expected Result

Builded, working project with console logs similar to:

success compile gatsby files - 2.684s
success load gatsby config - 0.025s
success load plugins - 1.427s
success onPreInit - 0.002s
success initialize cache - 0.046s
success copy gatsby files - 1.768s
success Compiling Gatsby Functions - 3.757s
success onPreBootstrap - 3.947s
success createSchemaCustomization - 0.001s
success Checking for changed pages - 0.005s
success source and transform nodes - 0.370s
success building schema - 0.240s
success createPages - 0.003s
success createPagesStatefully - 0.234s
info Total nodes: 24, SitePage nodes: 4 (use --verbose for breakdown)
success Checking for changed pages - 0.054s
success write out redirect data - 0.009s
success onPostBootstrap - 0.007s
info bootstrap finished - 41.264s
success onPreExtractQueries - 0.028s
success extract queries from components - 5.272s
success write out requires - 0.045s
success run page queries - 0.200s - 1/1 5.00/s
⠀
You can now view test in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 25.586s
success Writing page-data.json files to public directory - 0.255s - 3/4 15.68/s

Actual Result

Failed build with logs like this:

success compile gatsby files - 2.655s

 ERROR #10127  CONFIG

Your "gatsby-config.ts" file failed to compile to "gatsby-config.js". Please run "gatsby clean" and try again.

If the issue persists, please open an issue with a reproduction at https://github.com/gatsbyjs/gatsby/issues/new for more help."

  Error: Cannot find module '[path]\gatsby-config'
  Require stack:
  - [path]\node_modules\gatsby\dist\bootstrap\get-config-file.js
  - [path]\node_modules\gatsby\dist\bootstrap\load-config\index.js
  - [path]\node_modules\gatsby\dist\services\initialize.js
  - [path]\node_modules\gatsby\dist\services\index.js
  - [path]\node_modules\gatsby\dist\state-machines\develop\services.js
  - [path]\node_modules\gatsby\dist\state-machines\develop\index.js
  - [path]\node_modules\gatsby\dist\commands\develop-process.js
  - [path]\.cache\tmp-312-u63QwfihPGyB

  - loader:985 Function.Module._resolveFilename
    node:internal/modules/cjs/loader:985:15

  - helpers:109 Function.resolve
    node:internal/modules/cjs/helpers:109:19

not finished load gatsby config - 0.111s

Environment

System:
  OS: Windows 10 10.0.19044
  CPU: (4) x64 Intel(R) Core(TM) i5-4440 CPU @ 3.10GHz
Binaries:
  Node: 18.10.0 - C:\Program Files\nodejs\node.EXE
  npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Languages:
  Python: 3.10.4
Browsers:
  Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.37)
npmPackages:
  gatsby: ^4.24.4 => 4.24.4
npmGlobalPackages:
  gatsby-cli: 4.24.0

Config Flags

No response

[Szulerinio]

Workaround

adding empty gatsby-config.js file allows the project to build.

That said I am not sure if the config will be applied as it's my first time using gatsby so I would do:

changing gatsby-config.ts to gatsby-config.js and its content

from:

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
  siteMetadata: {
    title: `test`,
    siteUrl: `https://www.yourdomain.tld`
  },
  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
  // If you use VSCode you can also use the GraphQL plugin
  // Learn more at: https://gatsby.dev/graphql-typegen
  graphqlTypegen: true,
  plugins: ["gatsby-plugin-sass"]
};

export default config;

to:

module.exports = {
  siteMetadata: {
    title: `test`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  graphqlTypegen: true,
  plugins: ["gatsby-plugin-sass"]
};

in tsconfig.json changing gatsby-config extension .ts to .js example

"include": [
    "./src/**/*",
    "./gatsby-node.ts",
    "gatsby-config.ts",
    "./plugins/**/*"
  ]

to

  "include": [
    "./src/**/*",
    "./gatsby-node.ts",
    "gatsby-config.js",
    "./plugins/**/*"
  ]

[marvinjude]

Hi @Szulerinio,

I was unable to reproduce this either on your minimal reproduction site or by following "Steps to Reproduce" (with node 18.10.0 & 16)

The first error you posted above suggests that you named the config as gatsby-config.ts.ts and you should change that to gatsby-config.js (.ts in this case)

ERROR #10124  CONFIG

It looks like you were trying to add the config file? Please rename "gatsby-config.ts.ts" to "gatsby-config.js"

You seem to have two different error messages. Would be better to provide the exact error your running into along with the site that produces the error as minimal repro

[Szulerinio]

I was tinkering with filenames etc when looking for workaround, and I tried changing names of this file, I must have copied messages from one of these logs instead of from original project.

I am sorry for that. In few hours Ill be back home, and will go through steps again and post correct messages.

I had the same repo cloned on my linux laptop, and there was no such issue, so it might be platform dependent, or a result of something else on my windows pc

[Szulerinio]

I've made new project, yet had the same issue.

Then, I've decided reinstall gatsby-cli -g After that both new and yesterday's projects are working correctly, so that must have been some local problem that corrupted the install

Thanks for your response and sorry for the trouble

[Szulerinio]

I got that error again, from my few tries it happens when path to the project contains "(" and ")" symbol

I ran npm run develop inside Desktop\Nowy folder (2)\gatsby\project and got that error again I ran gatsby clean, changed directory name to Desktop\Nowy folder2\gatsby\project and ran develop again, this time it worked

After that, I ran gatsby clean again, changed back the directory name and got that error again

Tried few more times, and I didn't encounter the error if I didn't run gatsby clean after changing directory name to not contain ()

[marvinjude]

Ah! Thanks for finding this @Szulerinio!

I can reproduce this on my machine too. There's probably a group of characters asides "()" that will cause this to happen 🤔 But for now I'll update the title and description of this issue to indicate what we know. In https://github.com/gatsbyjs/gatsby/pull/19600, we tried fix issues with special chars in path but this feature came after that — that's probably why we didn't capture this.

Thanks again 💜