- When Gatsby starts up, it will read
gatsby-config.js
first. - As you can see below, we use that file to
require('ts-node').register()
which registers a TypeScript evaluator that will be used when Gatsby reads all other API Javascript files. In other words, we only need to do this once in our entire codebase and not in other Gatsby files likegatsby-node.js
. - Our
gatsby-config.js
re-exports all the exported variables available ingatsby-config.ts
. - Later, since the
ts-node
evaluator is still active, Gatsby will loadgatsby-node.ts
instead ofgatsby-node.js
. - The same thing is true of other gatsby files; e.g.
gatsby-browser.ts
can be used instead ofgatsby-browser.js
.
I didn't come up with all of this on my own. I mentioned all the sources in the original gist.
Thanks for sharing! I’m trying this out and running into an eslint error:
Have you seen something like this? Any tips on how to update my .eslintrc or tsconfig.json to handle gatsby-config.js?
I’ve tried adding
include: ["gatsby-config.js"]
orinclude: ["*.js", "*.ts", "src/**/*.ts", "src/**/*.tsx"]
to tsconfig.json, but that does not resolve the error. I’ve addedcreateDefaultProgram
to parserOptions, which fixes the issue, but sounds like an anti-pattern.UPDATE 2020-04-02
Seems like the lint issue is caused by gatsby-config.js and gatsby-config.ts sharing the same name. Renaming to gatsby-config-exports.ts resolves the issue.