Try to understand how Babel work in TSConfig documentation for option allowSyntheticDefaultImports

[nyngwang]

From their explanation: This is the line

I don't know which plugin does what it means by "Babel will automatically create a default if one isn’t created". I know that we have preset @babel/preset-typescript but is it really the plugin that is responsible for this transformation? I'm not sure, but I want to know.

This code raises an error because there isn’t a default object which you can import. Even though it feels like it should. For convenience, transpilers like Babel will automatically create a default if one isn’t created.

// @filename: utilFunctions.js
const getStringLength = (str) => str.length;
 
module.exports = {
  getStringLength,
};
 
// @filename: index.ts
import utils from "./utilFunctions";
 
const count = utils.getStringLength("Check JS");

The error:

Module '"/home/runner/work/TypeScript-Website/TypeScript-Website/utilFunctions"' has no default export.

[nicolo-ribaudo]

It's @babel/plugin-transform-modules-commonjs. It's not just Babel btw, every tool does that when compiling ESM to CJS :) Also Node.js does the same.

[liuxingbaoyu]

I think you still need to install it, the dependency will only be applied to the .cts file.

[nyngwang]

@nicolo-ribaudo On the other hand, I'm trying to understand the purpose of the option strict. It tries to convey whether we should only accept native(so it's strict) ESM modules instead of a non-standard(or maybe there is a better adj.) one with __esModule: true, correct?

@liuxingbaoyu Could you elaborate more on it?

[liuxingbaoyu]

babel/packages/babel-preset-typescript/src/index.ts

Lines 83 to 92 in 5ca9b9a

	{
	test: !process.env.BABEL_8_BREAKING
	? /\.cts$/
	: filename => filename?.endsWith(".cts"),
	sourceType: "unambiguous",
	plugins: [
	[transformModulesCommonJS, { allowTopLevelThis: true }],
	[transformTypeScript, pluginOptions(true)],
	],
	},

It is only used for .cts files. If you want to output .ts files to cjs, you still need to add @babel/plugin-transform-modules-commonjs manually.

[nyngwang]

@liuxingbaoyu Hi, thank you for the point. I didn't think about the target I wanted with @babel/preset-typescript. I also found that @babel/preset-env covers it.

On the other hand, what do you think about my confusion in the first comment?

I was worried about whether I have to install some plugins in addition to @babel/preset-typescript to make sure that every option I might use in TSConfig can work correctly to simulate what Babel actually does.

[liuxingbaoyu]

Yes, this is necessary. A ts option may mean one or more babel plugins, but they are generally contained in @babel/preset-env.