TypeScript compilation error, importing non default interface with curly braces

Question

When compiling my TypeScript project, the compiler is throwing the following error:

node_modules/@types/domutils/index.d.ts:6:10 - error TS2614: Module '"../../domhandler/lib"' has no exported member 'DomElement'. Did you mean to use 'import DomElement from "../../domhandler/lib"' instead?

The offending line is:

import { DomElement } from "domhandler";

The problem is, in the typing file it is trying to import from, the DomElement interface is a non default exported interface as follows:

export interface DomElement {
    attribs?: {[s: string]: string};
    children?: DomElement[];
    data?: any;
    name?: string;
    next?: DomElement;
    parent?: DomElement;
    prev?: DomElement;
    type?: string;
}

If I remove the curly braces it does in fact work, but that seems problematic to me:

I was under the impression that only default exports can be imported without curly braces. Why is this import required without curly braces?
This issue is occurring in type definitions in the node-modules folder as provided by DefinitelyTyped. I do not want to change a dependency file. There are no related open issues in Github, so I assume it does work. In fact it works for a colleague with an older version of Node (v8) but that doesn't seem like it should make a difference.

Versions:

Node.js - 12.14.0
List item
TypeScript 3.7.2 (also tested not working on 3.7.4)
Type definitions for domhandler 2.4 (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/domhandler)
Type definitions for domutils 1.7 (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/domutils)

UPDATE

Here is my tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/*"
      ]
    }
  },
  "include": [
    "src/**/*"
  ]
}

Experiencing the same issue when using sanitize-html as its dependency tree is sanitize-html -> htmlparser2 -> domutils -> domhandler. The configuration (with typescript 3.6.4) worked in node 8 before upgrading to node 12. — sceee
Could you please check in your npm-shrinkwrap.json or package-lock.json if there are multiple versions of domutils in there? And also, which dependencies are pulling in domutils in which versions? — sceee

Sielu Sielu · Accepted Answer · 2020-02-27T09:39:17

Based on info from aluanhaddad at GitHub I managed to get it compiling (and working), though I don't like the solution (because it's actually turning any checking for that module off).

I have removed typings to sanitize-html (and related domhandler etc.). TSC cries that it doesn't know "sanitize-html" module, so I've added a dummy module declaration inside my src folder.

src/sanitize-html.d.ts

declare module 'sanitize-html';

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "lib": [
    "es6",
    "dom"
  ],
  "include": [
    "src/**/*",
    "index.ts"
  ],
  "exclude": [
    "**/*.spec.ts"
  ]
}

build command:

tsc

TypeScript compilation error, importing non default interface with curly braces

1 Answers