TypeScript typings give me "index.d.ts is not a module"

I am getting File node_modules/@types/webrtc/index.d.ts is not a module with this code:

import * as webrtc from "webrtc";
const peerConnection1 = new RTCPeerConnection();

I have installed the typings using npm i @types/webrtc --save-dev. Hovering over RTCPeerConnection in const peerConnection1 = new RTCPeerConnection(); display type annotations in Visual Studio Code so at least the code editor sees the types. Running tsc (or webpack with ts-loader) fails with the error.

I have tried npm i webrtc --save in a misguided attempt for solving this, but it did not change anything and I really only want the typings anyway, WebRTC is right there in the browser, I don't need a package for that. (Support aside.)

The index.d.ts file indeed is not a module, it just references two other files with interfaces in them. So I thought to remove import * as webrtc from "webrtc"; hoping the typings will still be visible by tsc somehow. (But that's impossible since I exclude node_modules in TypeScript config file.) When I do that RTCPeerConnection is no longer recognized.

Adding /// <reference src="node_modules/@types/webrtc/" /> did not help, tsc says Invalid reference directive syntax.

You can view a repository with minimal repro here on GitLab. I am not too well versed in TypeScript typings acquisition so please forgive my ignorance if I'm going about this all wrong.

Upvotes: 121

Views: 171642

Answers (11)

user3064538
user3064538

Reputation:

I got this error because I forked a library, renamed it in package.json but didn't rename this line in its .d.ts file (the file pointed to by "types": in package.json):

declare module "package-name" {

to

declare module "my-forked-package-name" {

Upvotes: 1

tayfun Kılı&#231;
tayfun Kılı&#231;

Reputation: 2834

In vscode

Ctrl + Shift + p > Developer: Reload Window.

Upvotes: 165

Martin Oputa
Martin Oputa

Reputation: 443

I was getting similar error on VS code editor. Simply, closing and opening VSCode again solved the problem for me.

Upvotes: 4

andrewdotn
andrewdotn

Reputation: 34813

In my case, I was getting this error message with an index.d.ts file generated by the TypeScript compiler.

The problem was that I’d forgotten to specify any import or export declarations in the source .ts file. I removed the original module.export = {…} bit when porting from .js to .ts, and hadn’t yet replaced it.

This is how the docs define a ‘module’ (emphasis added):

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

Adding an export to the things I intended to export turned the index.d.ts into a module, clearing the error.

Upvotes: 6

Rajantha Fernando
Rajantha Fernando

Reputation: 308

In my case it was a corrupted dependency, deleting the module and npm install did the work.

Upvotes: 0

Ion Scorobogaci
Ion Scorobogaci

Reputation: 165

use require

const webRtc = require('webrtc');

and you import should be good to go

Upvotes: -6

youngrrrr
youngrrrr

Reputation: 3276

/// <reference types="@types/<your_types_module>" />

You may or may not want to do this depending on your build and style needs, but this seems to be the quick (and dirty) fix.

Upvotes: 2

Karolis Grinkevičius
Karolis Grinkevičius

Reputation: 723

Another option is to add a new declaration file *.d.ts in your module, i.e.:

declare module 'my-module';

Upvotes: 8

Sabir Hussain
Sabir Hussain

Reputation: 185

No need to import anything, run following:

  1. npm install --save @types/webrtc
  2. update tsconfig.json -

    "types": [ "@types/webrtc" ]

Upvotes: 11

Meirion Hughes
Meirion Hughes

Reputation: 26398

webrtc is part of the browser; you're trying to import a module. Simply import the (typings) library:

import "webrtc";

you may need to use "moduleResolution": "node" in the compiler options.

Alternatively use the "types": ["webrtc"] compiler option and the compiler will automatically load those types up for you.

Upvotes: 90

Daniel Rosenwasser
Daniel Rosenwasser

Reputation: 23443

You probably want to add

"types": ["webrtc"]

to your tsconfig.json, or less preferrably, to use

/// <reference types="webrtc" />

in your source files. Here's an example of it in your tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "noImplicitAny": true,

        "types": ["webrtc"]
    },
    "exclude": [
        "node_modules"
    ]
}

This tells TypeScript it should include webrtc declarations in your build

Upvotes: 18

Related Questions