How to get untyped npm modules to play nicely with webpack

Question

I am receiving Invalid module name in augmentation errors from webpack for a couple of library *.d.ts files I am including in my project.

An example is from leaflet-draw which has the following module declaration at the top of it's d.ts file:

import * as L from 'leaflet';

declare module 'leaflet' {
    interface MapOptions {
        drawControl?: boolean;
    }

Full error is:

Invalid module name in augmentation. Module 'leaflet' resolves to an untyped module at 'C:\Users***\Documents\GitHub***\node_modules\leaflet\dist\leaflet-src.js', which cannot be augmented.

I am not entirely sure what to do about this, I dont want to be modifying the d.ts files themselves since these are maintained externally.

I am using the latest version of webpack (3.11.0) and ts-loader (3.5.0).

My tsconfig compiler options are as follows:

"compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "outDir": "./dist",
        "rootDir": "../",
        "noImplicitAny": false,
        "noImplicitThis": false,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "pretty": true,
        "removeComments": false,
        "allowUnreachableCode": false,
        "declaration": false,
        "allowJs": true,
        "module": "commonJs",
        "typeRoots" : ["./typings/index.d.ts", "../../node_modules/@types"]
    }

I appreciate any help anyone can provide to help me understand the error further and how to resolve it f possible.

Thanks

Answer 1

You need to put your import statement inside the declare module.

declare module '@hyperapp/router' {
  import { VNode } from 'hyperapp'

  export function Link(props: LinkProps): VNode<LinkProps>

  ...
}

I had the same error when trying to add the declaration file above (wrote by @m0a whose PR has not been accepted) when the the import statement was on the first line of the file -- which feels most natural.