Typescript support is broken

[Dan503]

What were you expecting to happen?

When I follow the steps outlined in this stack-overflow post, it should allow us to write our gulp files in pure Typescript:

https://stackoverflow.com/a/49849088/1611058

These were steps that used to work back in 2020 but don't work anymore.

What actually happened?

As sydd's comment says:

I get SyntaxError: Cannot use import statement outside a module if the project's type is commonjs and TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" if the project's type is module

Please give us a sample of your gulpfile

// gulpfile.ts

import gulp from 'gulp'

gulp.task('default', function (done) {
    console.log('test');
    done()
});

Terminal output / screenshots

Please provide the following information:

• OS & version: Windows 10 - 20H2
• node version (run node -v): v12.18.2
• npm version (run npm -v): 6.14.5
• gulp version (run gulp -v): CLI version: 2.3.0; Local version: 4.0.2

[phated]

You are using esm, so this is a duplicate of gulpjs/rechoir#43 - it requires an insane amount of work that we probably won't get to for awhile. You can switch back to CJS.

[Dan503]

@phated I got those errors when I tried to add Gulp to a Vite project.

Do you know a way to ensure that Gulp uses CJS while Vite can still use ESM?

[phated]

I don't have generic advice, sorry. Would have to take it case-by-case and I don't have the bandwidth right now.

[Dan503]

You can switch back to CJS.

Basically I'm asking, is it possible to use both ESM and Common JS in the same project?

ESM gets used by some stuff while Gulp uses Common JS.

[Dan503]

I've asked on Stack Overflow.

https://stackoverflow.com/q/68899837/1611058

I hope it's possible...

[phated]

Yes, you need to remove the module field in package.json and then you need to use .mjs on all your ESM files. However, you might need 2 different tsconfig.json files. I don't know - I hate typescript...

[Dan503]

I've investigated the issue a bit more.

This is an issue with ts-node, not Gulp.

It is highly related to this issue:
TypeStrong/ts-node#922

I created a reduced test case and was able to determine that something in the tsconfig file causes the error in ts-node.

When I added a tsconfig file to the project, it caused the error to happen.
When I removed the tsconfig file, gulp worked perfectly.

Not an issue for Gulp maintainers but still an issue in general since tsconfig files are important.
At least I've managed to narrow down the problem a bit.

[Dan503]

This fixed it! 😃

TypeStrong/ts-node#922 (comment)

In tsconfig.json you need the following:

{
    "compilerOptions": {
        "module": "commonjs",
    }
}

[phated]

Sorry, I thought this was commonly known.

I actually think this comment is more likely to be of a benefit in a vite app: TypeStrong/ts-node#922 (comment) (you can override compiler options specifically only for ts-node)