Skip to content

Fails when importing with .js/.jsx extensions #55

Closed
@gcangussu

Description

@gcangussu

The TypeScript compiler is able to resolve imports from identifiers suffixed with .js and .jsx back to their .ts/.tsx counterparts. However this package currently can't handle this. This creates a mismatch between the resolution implemented here and tsc's.

Writing imports with .js/.jsx suffixes is useful. When you are targeting spec compliant ES6 modules, it allows you to not depend of another build step besides the compilation done with tsc.

For example, assume there is a bar.ts file that exports a function foo. Then, the module

import { foo } from './bar.js';
function baz(): string { foo(); return 'hello' }

Will be compiled by tsc to

import { foo } from './bar.js';
function baz() { foo(); return 'hello' }

Which is an ES6 spec compliant module that will run on Node.js 12 or greater without further transpilation.

To see how tsc resolves a .js file we can use the --traceResolution option. For example, an excerpt of the output of yarn tsc --build --force packages/proto-parser --traceResolution run on the root of gcangussu/grpc-frame@943f62c is:

======== Resolving module './field-types-map.js' from '/grpcjs/packages/proto-parser/src/proto-parser.ts'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module as file / folder, candidate module location '/grpcjs/packages/proto-parser/src/field-types-map.js', target file type 'TypeScript'.
File '/grpcjs/packages/proto-parser/src/field-types-map.js.ts' does not exist.
File '/grpcjs/packages/proto-parser/src/field-types-map.js.tsx' does not exist.
File '/grpcjs/packages/proto-parser/src/field-types-map.js.d.ts' does not exist.
File name '/grpcjs/packages/proto-parser/src/field-types-map.js' has a '.js' extension - stripping it.
File '/grpcjs/packages/proto-parser/src/field-types-map.ts' exist - use it as a name resolution result.
======== Module name './field-types-map.js' was successfully resolved to '/grpcjs/packages/proto-parser/src/field-types-map.ts'. ========

So, in short, the imported ./field-types-map.js resolves to ./field-types-map.ts.

By the name of this package, I would expect the behavior to mimic tsc's behavior shown above.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions