Feature: disable extensionless imports

I'd like there to be a way to always require the file extension to be specified for relative import statements. At the moment extensionless imports always just work. Even 'Go to Definition' just assumes it should open the JS file.

src/
 - index.js
 - foo.js

// index.js
import { Foo } from './foo'; // extensionless

I'd like there to be a jsconfig option to disable this behavior and require a file extension to be specified.

import { Foo } from './foo';
                    ^^^^^^^ No definition found for 'foo'

// fix
- import { Foo } from './foo';
+ import { Foo } from './foo.js';

I'm asking because extensionless imports don't really work in the browser if you're not using a module bundler. It can only work if the HTTP server supports extensionless imports, which is a big ask.

Related: https://github.com/Microsoft/vscode/issues/62401

This one is specifically about treating extension-less imports as an error, presumably when you are using checkJs

presumably when you are using checkJs

I added a jsconfig.json file to my project and that magically gives me autocomplete in vscode. I was unaware that TypeScript is responsible for JS intellisense.

I’m going to put my support behind seeing a fix for this. Browsers support ES modules natively now and TS isn’t a nice experience for web development because:

Automatic imports are added without an extension
Browsers don’t support extensionless imports
TS doesn’t support module specifiers rewriting

...which creates a perfect storm in which it’s possible to write several modules with a nontrivial dependency graph before realizing that the whole thing is broken because none of the import statements have extensions. Fixing it is then an exercise in patience as you hunt through the project looking for offending imports—and the browser won’t help you here because it stops short at the first one that fails to load. It’s not a good development experience, which sucks because TS is so, so nice otherwise. :(

Even if TS just rewrote imports in the generated code to append a .js to any specifiers without it, that would be a good interim solution, I think.

I had the same problem and until the compiler has this option to add .js extensions I migrated to babel and created a babel plugin to add an extension to import modules declaration.

Here is the plugin if anyone has interest in it: https://www.npmjs.com/package/babel-plugin-add-import-extension

Karl Prieb (@karlprieb)

Karl Prieb (@karlprieb) See https://github.com/Zoltu/typescript-transformer-append-js-extension/ for a TypeScript transformer that adds .js extension to all imports that don't have an extension during compilation. This results in ES that runs in a browser with a static file server (no server-side configuration necessary).

Micah Zoltu (@MicahZoltu)

Micah Zoltu (@MicahZoltu) Thank you, Great work!
I already made all my setup using babel :(
I created an typescript boilerplate using babel and pika, you can take a look here: https://github.com/karlprieb/typescript-pika-web-starter maybe it can help you if you want to use babel :)

It's weird but I don't think this issue has any links yet to the ur-issue, #16577. Technically, providing a flag to error out is different from providing a flag to append the correct extension, but it's pretty similar.

This is node16 module resolution

Navigation Menu

Repository navigation

Feature: disable extensionless imports #28288

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Feature: disable extensionless imports #28288

Description

Activity

mjbvz commented on Nov 1, 2018

sliekens commented on Nov 1, 2018

fatcerberus commented on Nov 10, 2018

karlprieb commented on Oct 7, 2019

MicahZoltu commented on Oct 8, 2019

karlprieb commented on Oct 8, 2019

thw0rted commented on Dec 14, 2020

RyanCavanaugh commented on Mar 4, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions