js-brecht / babel-plugin-tsconfig-paths Goto Github PK

While it is not standard practice to have comments in json files, the typescript website and many project boilerplates include comments in their tsconfig.json. These comments are usually there to describe what the tsconfig.json properties do, and the parsers for tsc and other tools seem to support them.

Is this something this plugin can look into?

Consider this modules structure:

and this import:

import xxx from "~/cleaners/model_id"

Your babel plugin fails to process this import.

This is because if it sees a directory at the import location, it explicitly appends /index to the import name:

This logic is incorrect. Instead, checkImport should be an array of either 1 or 2 elements (always include transformedImport, and possibly transformedImport/index).

Using null coalescence (??) is probably what is desired here:

Steps to reproduce

Create src/foo.ts:

import baz from "~/bar/baz"

create src/bar/baz.ts:

console.log("I am baz")

create tsconfig.json:

{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"~/*": [
				"src/*"
			],
		},
	}
}

create .babelrc:

{
	"presets": [
		[
			"@babel/env",
			{
				"targets": {
					"node": true
				}
			}
		]
	],
	"plugins": [
		"@babel/transform-typescript",
		"tsconfig-paths"
	]
}

and compile the project with:

babel src --extensions '.js,.ts' --out-dir build 

then start it with:

node build/foo

Expected result

The script runs normally.

Actual result

The script crashes:

Error: Cannot find module './bar/baz.ts'

If you check build/foo.js, you will see:

var _baz = _interopRequireDefault(require("./bar/baz.ts"));

You see the problem? The plugin keeps the original source file extension, which is replaced on babel compile.

The problem is in this code:

If I change it like this:

-       ? getRelativePath(sourceFile, realFile) 
+       ? getRelativePath(sourceFile, checkImport) 
-       : realFile 
+       : checkImport 

that fixes the problem.