question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ES6 module declarations should be marked to exclude them from `allowSyntheticDefaultImports`

See original GitHub issue

This is the restated #27293. CC @ryanelian

TypeScript Version: master (471bc64)

Search Terms: esModuleInterop allowSyntheticDefaultImports error undefined default import export

Code: In the b subdirectory, compile with tsc -b . and run with node index.js.

// tsconfig.common.json
{
    "compilerOptions": {
        "composite": true,
        "declaration": true,
        "target": "es6",
        "module": "commonjs",
        "esModuleInterop": true
    }
}

// a/tsconfig.json
{
    "extends": "../tsconfig.common.json",
    "files": [
        "index.ts"
    ]
}

// a/index.ts
export const foo = 42;

// b/tsconfig.json
{
    "extends": "../tsconfig.common.json",
    "references": [
        { "path": "../a" }
    ],
    "files": [
        "index.ts"
    ]
}

// b/index.ts
// Actual: compile OK.  Expected: compile error.
import A from "../a";
// Actual: runtime error.
console.log(A.foo);

Expected behavior: The generated a/index.d.ts uses some new syntax to mark the module as an ES6 module, so allowSyntheticDefaultImports does not apply to it and the default import in b/index.ts is a compile error.

Actual behavior: allowSyntheticDefaultImports applies to module a, so at compile time, the default import is accepted and resolves to the entire module, but at runtime, A.foo raises an error:

REDACTED/b/index.js:7
console.log(a_1.default.foo);
                        ^

TypeError: Cannot read property 'foo' of undefined

Playground Link: N/A, multiple files

Related Issues: #27293

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:8
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
fregantecommented, Jun 6, 2019

For anyone running into this issue: you’re doing it wrong.

The error is that you’re using import X from 'module' when module does not have a default import. import X does not work like const X = require()

Solution: either use:

import * as X from 'module'

or maybe import it as a CJS module with:

import X = require('module')

The bug is that the compiler should error, not that it doesn’t work at runtime.

5reactions
Shingyxcommented, Dec 19, 2018

I’m running into the same issue. I think one way to fix this is to update the __importDefault tslib helper to be a bit more lenient? I’m not 100% sure if this is the behaviour we want though.

I.e., update https://github.com/Microsoft/tslib/blob/ca03390c0bcf14ae0ef8090dec52de5059ed2e96/tslib.js#L220-L222 from

return (mod && mod.__esModule) ? mod : { "default": mod };

to

return (mod && mod.__esModule && mod.hasOwnProperty("default")) ? mod : { "default": mod };
Read more comments on GitHub >

github_iconTop Results From Across the Web

Understanding esModuleInterop in tsconfig file
It works and it's perfectly valid with es6 modules spec, because moment is not namespace from star import, it's default import. But how...
Read more >
TSConfig Reference - Docs on every TSConfig option
A file specified by exclude can still become part of your codebase due to an import ... using an export from a UMD...
Read more >
Compiler Options
Option Type Default ‑‑allowJs boolean false ‑‑allowSyntheticDefaultImports boolean module === "system" or ‑‑esModuleInterop ‑‑allowUmdGlobalAccess boolean false
Read more >
kobdev/types
Create types/foo/index.d.ts containing declarations for the module "foo". You should now be able to import from "foo" in your code and it will...
Read more >
Typescript does not resolve modules through tsconfig. ...
the containing directory and subdirectories except those excluded ... TS7016: Could not find a declaration file for module 'luciad/view/Map' ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found