TypeError: Unknown file extension ".ts"

[UchihaYuki]

Before you open this issue, please complete the following tasks:

• [x] use the search bar at the top of the page to search this repository for similar issues or discussions that have already been opened.
• [x] if you are looking for help from the gulp team or community, open a discussion.
• [x] if you think there is a problem with the plugin you're using, open a discussion.
• [x] if you think there is a bug in our code, open this issue.

What were you expecting to happen?

gulpfile.ts should be able to import packages written in ESM, like del@7

What actually happened?

[19:28:40] Loaded external module: ts-node/register TypeError: Unknown file extension ".ts" for C:\Users\yuki\Desktop\test-gulp\gulpfile.ts

Please give us a sample of your gulpfile

https://github.com/UchihaYuki/gulp-typescript-bug

Terminal output / screenshots

>gulp clean
[19:39:16] Loaded external module: ts-node/register
TypeError: Unknown file extension ".ts" for C:\Users\yuki\Desktop\test-gulp\gulpfile.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:396:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:278:45)
    at async link (node:internal/modules/esm/module_job:78:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Please provide the following information:

• OS & version [e.g. MacOS Catalina 10.15.4]: Windows 10
• node version (run node -v): v20.14.0
• npm version (run npm -v): 10.7.0
• gulp version (run gulp -v): 5.0.0

Additional information

[UchihaYuki]

It seems tsx will work, but I don't know how to replace ts-node with tsx. Haven't found any doc online.

[UchihaYuki]

https://www.youtube.com/watch?v=jn370WEIvjs https://github.com/TypeStrong/ts-node/issues/1997

[UchihaYuki]

This seems a pretty complicated issue around running typescript on node. I'm going to transpile gulpfile.ts to js first as a workaround now.

[phated]

The esm loader stuff was immature while we developed the underpinnings to gulp v5, but we plan to explore some different techniques for gulp v6 (which drops older node support).

Currently, transpiling is likely your best option to use a different language+ESM (like you mentioned).

[UchihaYuki]

Is it possible to tell gulp to run npx tsc -p tsconfig.gulp.json before it locate the local gulpfile.js and do its work? I have to do something like this npx tsc -p tsconfig.gulp.json && gulp build currently, which is pretty tedious.

[phated]

You might be able to do something with --preload and then embed the extra flags in a .gulp.js config file, but I'm not sure what that would look like.

[folliehiyuki]

Until ESM loader is better supported in future ts-node, you can add this snippet into tsconfig.json. Gulp should work "transparently" now without a pre-transpile step or an additional tsconfig file.

{
  ...
  "ts-node": {
    "moduleTypes: {
      "gulpfile.ts": "cjs" 
    }
  }
}

[Tmaof]

你可以这样配置脚本来暂时解决这个问题："start": "gulp --require tsx/dist/loader.cjs -f gulpfile.ts"，记得安装tsx依赖，参考：https://github.com/element-plus/element-plus/blob/dev/internal/build/package.json

[Tmaof]

You can configure the script to solve this problem temporarily: "start": "gulp --require tsx/dist/loader.cjs -f gulpfile.ts", remember to install the tsx dependency, Reference: https://github.com/element-plus/element-plus/blob/dev/internal/build/package.json