Repository navigation
ES Module imports discarded when they include a type and a side-effect #28285
Description
When an ES module syntax import has an explicit type and a side effect it is excluded from the output JS.
TypeScript Version: 3.2.0-dev.20181101
Search Terms:
- ES Modules
- Module resolution
Code
tsconfig.jsontarget ESNext
{
"compilerOptions": {
"target": "esnext",
"module": "esnext"
}
}source-component.tswith anexportand a side effect
export class SourceComponent extends HTMLElement {
// Web component implementation
}
customElements.define('source-component', SourceComponent);missing-import.tsthat references the dependency as a type and expects the side effect
import {SourceComponent} from './source-component.js';
const example = document.createElement('source-component') as SourceComponent;Expected behaviour:
When output to missing-import.js the reference should be retained:
import {SourceComponent} from './source-component.js';
const example = document.createElement('source-component');An import as a side effect would be acceptable too:
import './source-component.js';
const example = document.createElement('source-component');Actual behaviour:
The import is stripped out:
const example = document.createElement('source-component');Workaround:
Duplicate side effect import statements are retained:
import {SourceComponent} from './source-component.js';
import './source-component.js';
const example = document.createElement('source-component') as SourceComponent;
Activity
weswigham commentedon Nov 1, 2018
Duplicate of #9191 I imagine.
KeithHenry commentedon Nov 1, 2018
Wesley Wigham (@weswigham) Certainly looks like it, only this is explicit ESNext modules and #9191 is referencing
require- I assume that means a fix forrequirewould be a fix for ESNext modules?Only
requireis doing some mapping and ES Modules aren't - I think there's potentially a much easier fix for this as for ESNext modules in TS you have to include the.jssuffix, so:#9191 has been sitting round for years without a fix because finding out whether the reference includes a side effect is incredibly difficult.
However this could be fixed by adding a special case for ESNext when an explicit
.jsfile extension is present.As a fix for this wouldn't necessarily be a fix for #9191 does this still count as a duplicate? Especially as #9191 is never going to get fixed (
requirewill get deprecated first) and ES Modules will become the standard?weswigham commentedon Nov 1, 2018
Even if the import includes
.jsextension, we still look up an associated.d.tsfile, and you might still only use the types from it. The presence of an extension doesn't change anything, really.KeithHenry commentedon Nov 3, 2018
Wesley Wigham (@weswigham) yes, so for TS the extension is optional, but for JS missing the extension will throw an error. The only reason to include the extension in TS is because you want the
importto work in the JS output, and in that case you always want to retain it.Imports with explicit
.jsextensions should always be in the output.