"gatsby-config.ts" file failed to compile when used in local package

tujoworker commented 1 year ago

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

First, the same setup works just fine when gatsby-config.mjs is using MJS.

The setup contains of a main app and a local plugin, that contains a gatsby-config.ts file. When running the main app, it crashes and won't build.

Reproduction Link

https://github.com/tujoworker/gatsby-config-bug

Steps to Reproduce

clone this repo and run yarn install.

🐛 For the not working .ts version, run:

yarn workspace local-plugin--ts clean && yarn workspace main-app--ts clean && yarn workspace main-app--ts build --verbose && yarn workspace main-app--ts serve

Expected Result

Like the mjs version, compile the gatsby-* files to CJS *.js files.

Actual Result

ERROR #10127 API.TYPESCRIPT.COMPILATION

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

Environment

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 -
/private/var/folders/s0/svmc9drs20l8_4zyltp211kw0000gn/T/xfs-0e8593c9/node
    Yarn: 3.4.1 -
/private/var/folders/s0/svmc9drs20l8_4zyltp211kw0000gn/T/xfs-0e8593c9/yarn
    npm: 8.19.3 - ~/.volta/tools/image/node/18.13.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Edge: 108.0.1462.41
    Firefox: 107.0.1
    Safari: 16.3

Config Flags

No response

LekoArts commented 1 year ago

Hi!

ESM in .ts files isn't currently supported (you're trying to use that by using "type": "module" in the package.json). We've noted this in https://github.com/gatsbyjs/gatsby/discussions/37069 under "Current status". It'll work once we finished the work on it.

Thanks for trying it out though!

joernroeder commented 1 year ago

I am looking into this too and went down the same route — local, typescript based plugins. What's the best way to set them up then? does each package needs to have their own tsconfig+compilestep then?

Local Plugins

Support added in gatsby@4.9.0

All the files mentioned above can also be written and used inside a local plugin.

Feels misleading, as i can not use all the files mentioned above inside a local plugin. https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#local-plugins

LekoArts commented 1 year ago

@joernroeder No, place it in your site like e.g. https://github.com/gatsbyjs/gatsby/tree/master/e2e-tests/development-runtime/plugins/gatsby-node-typegen and all files will work without compilation.

What doesn’t work?

joernroeder commented 1 year ago

@LekoArts If I add a ./plugins/my-gatsby-plugin/gatsby-config.ts it never got picked up, if I change it to .mjs it does. If I add a gatsby-node.ts inside that plugin folder I see hello from my local plugin typescript file in the console but the hooks seem to never get called.

// plugins/gatsby-plugin-my-test/gatsby-node.ts

import type { GatsbyNode } from "gatsby"

console.log('hello from my local plugin typescript file')

export const onPreInit: GatsbyNode["onPreInit"] = ({ reporter }) => reporter.info("Loaded gatsby-plugin-my-local")

export const createPages: GatsbyNode["createPages"] = async () => {
  console.log('Typescript: Create Pages')
}

tujoworker commented 1 year ago

ESM in .ts files isn't currently supported (you're trying to use that by using "type": "module" in the package.json). We've noted this in #37069 under "Current status". It'll work once we finished the work on it.

Thank you for your reply!

No, I'm not trying to run ESM! My reprod is not using ESM ("type": "module").

What I want to show is the diff between *.mjs and *.ts Gatsby is doing at the moment.

✅ Everything is fine with gatsby-browser.tsx and gatsby-ssr.tsx (did work already in Gatsby v4).
❌ But not when we use gatsby-config.ts (or gatsby-node.ts) in local plugins. But with *.mjs they do (without using "type": "module").

@LekoArts Hope you are aware of it 🙏

LekoArts commented 1 year ago

Hi @tujoworker

You're using workspaces together with TypeScript. That's not supported as per: https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#other

You have three options:

Use .mjs
Place the local-plugin into the plugins folder of main-app
Use something like ts-node in a gatsby-config.js of local-plugin pointing to gatsby-config.ts

// Register the TypeScript evaluator in gatsby-config so we don't need to do
// it in any other .js file.
require(`ts-node`).register({ swc: true })

// Use a TypeScript version of gatsby-config.js.
// Same method needs to be applied to all other gatsby-*.js files
module.exports = require(`./gatsby-config.ts`)

joernroeder commented 1 year ago

@LekoArts even this does not work as per my comment above.

Place the local-plugin into the plugins folder of main-app

my onPreInit and createPages inside the .ts file never run inside a local plugin

joernroeder commented 1 year ago

just tested it again. Using the ts-node trick works:

❯ yarn start
hello from my local plugin typescript file
success compile gatsby files - 0.211s
success load gatsby config - 0.014s
hello from my local plugin typescript file
success load plugins - 0.234s
info Loaded gatsby-plugin-my-test
success onPreInit - 0.005s
success initialize cache - 0.056s
success copy gatsby files - 0.063s
success Compiling Gatsby Functions - 0.116s
success onPreBootstrap - 0.126s
success createSchemaCustomization - 0.001s
success Checking for changed pages - 0.003s
success source and transform nodes - 0.161s
success building schema - 0.204s

Without it, plain gatsby-node.ts

❯ yarn start
hello from my local plugin typescript file
success compile gatsby files - 0.212s
success load gatsby config - 0.014s
success load plugins - 0.105s
success onPreInit - 0.001s
success initialize cache - 0.018s
success copy gatsby files - 0.097s
success Compiling Gatsby Functions - 0.178s
success onPreBootstrap - 0.191s
success createSchemaCustomization - 0.005s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.079s
success building schema - 0.208s
success createPages - 0.049s

misses the hello from my local plugin typescript file log and info Loaded gatsby-plugin-my-test which get's executed onPreInit

gatsbyjs / gatsby