Dots in custom TypeScript gulp file names break the compiler

[Dan503]

This Stack Overflow post explains how to use TypeScript on the primary gulp file.

Those steps work successfully for the main gulpfile.ts and outputs this line to the console when you run gulp

Requiring external module ts-node/register

What were you expecting to happen?

After running the following command:

gulp --gulpfile customGulpFile.ts

I expect it to run Requiring external module ts-node/register like it does when compiling the main gulp file.

What actually happened?

I run this command:

gulp --gulpfile customGulpFile.ts

And I get the following error:

import * as gulp from 'gulp'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at requireOrImport (xxxxxx\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11)
    at execute (xxxxxx\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:37:3)
    at Liftoff.handleArguments (xxxxxx\node_modules\gulp\node_modules\gulp-cli\index.js:211:24)

Please give us a sample of your gulpfile

The "converting-gulp-files-to-typescript" branch of my gulp-auto-imports repository demonstrates the bug.

Do the following steps to reproduce:

1. Checkout/Fork the repo
2. Run npm install
3. Run npm run generate (uses the non-primary gulp files)

A working version that is not using TypeScript can be found on the "feature/TypeScript-preset" branch.

Terminal output / screenshots

Please provide the following information:

• OS & version [e.g. MacOS Catalina 10.15.4]: Windows 10 Home v1909
• node version (run node -v): v12.18.2
• npm version (run npm -v): v6.14.5
• gulp version (run gulp -v): CLI v2.3.0; Local v4.0.2

[Dan503]

To make the issue easier to debug I've attempted to make a failing test case in PR #220.

[phated]

@sttk can you take a look at this?

[sttk]

@Dan503 There was no problem when I runned #220 with npm i -D ts-node typescript.

$ git clone https://github.com/Dan503/gulp-cli.git .
$ npm i
$ node -v
v12.18.4
$ npm -v
6.14.8
$ npx gulp -v
CLI version: 2.3.0
Local version: 4.0.2
$ npm test

...

  142 passing (36s)
  1 failing

  1) config: flags.gulpfile Should autoload ts-node/register for a specified TypeScript gulpfile:
     Uncaught Expected { [Error: Command failed: cd /path/to/gulp-cli#219/dan503-master/test/fixtures/config; cd flags/gulpfile/autoload-ts; node /path/to/gulp-cli#219/dan503-master/bin/gulp.js --no-color dist
/path/to/gulp-cli#219/dan503-master/test/fixtures/config/flags/gulpfile/autoload-ts/other_folder/gulpfile-exports.ts:1
import * as gulp from 'gulp';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)

...

$ npm i -D ts-node typescript
$ npm test

...

  143 passing (35s)

$

[sttk]

Furthermore,

$ npm init
$ npm i -D gulp ts-node typescript
$ node -v
v12.18.4
$ npm -v
6.14.8
$ npx gulp -v
CLI version: 2.3.0
Local version: 4.0.2```
$ cat gulpfile-exports.ts
import * as gulp from 'gulp';

export function clean(done) { console.log('clean!'); done(); };
export function build(done) { console.log('build!'); done(); };
export const string = 'no function';
export const dist = gulp.series(clean, build);
$ npx gulp --gulpfile gulpfile-exports.ts dist
[16:06:04] Requiring external module ts-node/register
[16:06:05] Using gulpfile ~/path/to/gulp-cli#219/test/gulpfile-exports.ts
[16:06:05] Starting 'dist'...
[16:06:05] Starting 'clean'...
clean!
[16:06:05] Finished 'clean' after 530 μs
[16:06:05] Starting 'build'...
build!
[16:06:05] Finished 'build' after 256 μs
[16:06:05] Finished 'dist' after 1.99 ms
$ 

[Dan503]

Hmmm... ok so the reduced test case appears to be working properly...

This is the project that I am having the problem in:

https://github.com/Dan503/gulp-auto-imports/tree/converting-gulp-files-to-typescript

(Note it is on the "converting-gulp-files-to-typescript" branch, not the main branch)

The npm run generate command in that project runs the custom ts gulp files.

The generate command looks like this (the gulp files have default tasks):

gulp --gulpfile gulp/taskGenerators/gulpfile.stage1.ts && gulp --gulpfile gulp/taskGenerators/gulpfile.stage2.ts

Using npx gulp instead of just gulp doesn't help.

I have "ts-node" and "typescript" installed, they are not being loaded though. I get the error as mentioned at the start of the issue.

I don't see what is breaking the compiler in that project.

[Dan503]

Ahhh I found the issue. I have a dot in the file name in my project.

I've pushed up a change in PR #220 to replicate the issue I am having.

So the real issue is that dots in the middle of custom gulp file names confuse the code used to determine what type of gulp file it is.

I'll update the issue name to reflect this.

[sttk]

@Dan503 I could reproduce the error of this issue. And as you said, the cause of the error is dots of the middle of the gulp file.

For gulpfile.exports.ts, rechoir, which is a library used in gulp, recognizes that its base name is gulpfile and its extension is .exports.ts.

So gulp-cli cannot solve this problem in itself. However, because rechoir receives filepath and extension candidates, we would be able to solve this problem in rechoir.

I'll address this next weekend.

[phated]

If I remember correctly, it was a design decision to handle multiple dot-separated extensions because node's module loader doesn't support it. This was done in https://github.com/gulpjs/rechoir/pull/37 and might just be a bug

[sttk]

@phated I remember that pr, too. But I forgot that liftoff doesn't yet update rechoir to latest.

I confirmed that gulp behaved correctly about this issue by updating rechoir version of liftoff to 0.7.0.

[phated]

@sttk Oh! I remember that we didn't include it because there were other breaking changes. We should plan this for the 3.0 release of gulp-cli.

I still want to completely rewrite liftoff to fit with how people are using interpret in webpack/etc. But I haven't found the time and we are no longer receiving much money to pay me for that time.

[Dan503]

Releasing in 3.0 is fine. This isn't a super urgent issue.

Now that I know what the problem is, I've renamed my gulp files to remove the dots in the middle of their file names and everything is working as expected now. 😊

I'll keep this issue open though since it is still a bug, just a minor one that can probably be marked as a low priority.