[Breaking change] babel-loader => ts-loader in web build builder 8.5.0

[emilio-martinez]

Please make sure you have read the submission guidelines before posting an issue

Expected Behavior

Being able to use all Typescript features.

Current Behavior

babel-loader doesn't support all Typescript features, e.g., const enum, like ts-loader does.

Failure Information (for bugs)

ERROR in /path/to/file.ts
Module build failed (from /path/to/repo/node_modules/babel-loader/lib/index.js):
SyntaxError: /path/to/file.ts: 'const' enums are not supported.

See also babel/babel#8741.

Steps to Reproduce

Just run a web project build that includes const enums.

Context

Please provide any relevant information about your setup:

Version of Nx used: 8.5.0

Relevant commit: 811c50b
Relevant PR: #1792

Other

The below are other potential breaking changes that are related only in that they were done in the same commit/PR. Happy to move these into separate issues if preferable. In no particular order:

• Filename output was changed (811c50b#diff-385b9a18cb3b6256450dc76ddcc286a1R22-R28)
• Differential loading option was removed completely (i.e., would only be an issue those who weren't using it)
• This is not a breaking change, but something I'd call out: the E2E tests that was checking for successful ES5 transpilation were changed/removed (811c50b#diff-cea283cab47e0b2561dd9a84ee5ae998L131-R133 and 811c50b#diff-a83f7b1d90c9a62dd914ccc27968e4faL38-L41)

[emilio-martinez]

Looked into the implications of this change more in detail.

Reading through the @babel/plugin-transform-typescript docs, especially the "Caveats" section, I'm surprised this change went in. The configuration between both setups is not even close—Babel seems to ignore several of the tsconfig.json options and requires to set Babel config equivalents instead. That's in addition to not supporting all the features, as mentioned in the description.

[emilio-martinez]

cc @jaysoo @vsavkin

[jaysoo]

@emilio-martinez Hey, thanks taking the time to report this issue.

The main objective for moving to babel-loader is that babel is used in most non-Angular projects (React, Vue, etc.), so it makes sense to support the majority use case. This means we won't be moving back to ts-loader for the web builder.

As for differential loading and e2e tests, we've decided that it's in everyone's best interest to have differential loading on. It makes the experience much better for endusers on modern browsers, so there isn't a good reason to turn it off. The e2e tests were update reflect the changes for differential loading between previous ts-loader implementation vs the babel-loader implementation.

---

Since we won't be supporting ts-loader in web builder moving forward, I'm going to close this issue. If there is anything we can change to make the babel-loader experience better please let us know!

[emilio-martinez]

@jaysoo Thanks for the response. I'm not arguing for you to revert, and I appreciate you trying to justify your change, but what I'm simply calling out is that it's a breaking change.

In other words, you didn't follow semver, and now we're facing having to refactor internal and client applications that are breaking for what you published as a minor version bump of your lib.

Fortunately, the fix is simple—bump up a major version.

[emilio-martinez]

By the way, our breaking projects are not Angular-based.

[emilio-martinez]

@jaysoo @vsavkin One more update, after refactoring to side-step the issues around declare class, I'm getting runtime errors in IE11 due to how babel transforms decorators. At this point, our codebases are blocked from upgrading.

[atifsyedali]

Our codebase broke wrt namespaces, const enums, decorators, and more.

@jaysoo Can't we have the Typescript compiler in transpileOnly mode pipe output to Babel, with the option of disabling Babel altogether? Then in parallel use the ForkTsChecker plugin.

This may seem like it may make the builds slower, but '@babel/preset-typescript' is already installed in babel, which you can now remove if you first pipe through tsc before babel.

[jaysoo]

@atifsyedali Hey, thanks for chiming in. I don't think it'll quite work with using transpileOnly since depending on what babel-plugins you use, it may not transpile using just tsc. I think we should be able to get support parity with prevous ts-loader setup.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.