CODEWITHSUNDEEP
typescriptnode-modules
Kyle
Kyle

Reputation: 33741

Typescript cant find module

I'm trying to import a module with Typescript on Visual Studio 2019.

import * as Highcharts from 'highcharts';
(<any>window).Highcharts = Highcharts;

Results in:

Error TS2307 (TS) Cannot find module 'highcharts'.
Error TS2307 Build:Cannot find module '../node_modules/highcharts'.

This is my tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ESNext"
  },
  "include": [
    "**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

This is my packages.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.1.0",
    "highcharts": "8.0.0"
  }
}

If I look under dependencies => npm, highcharts is there. If I look in my node_modules folder, highcharts is there.

What am I missing? I'm new to using modules in typescript but everything I find on google seems to look like my setup.

Upvotes: 1

Views: 2795

Answers (1)

Abdelrhman ElSayed
Abdelrhman ElSayed

Reputation: 439

According to highcharts readme you need to import it something like this 

import Highcharts from 'highcharts';

then you need to update your tsconfig.json file

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "module": "es6",
    "moduleResolution": "node",
    "target": "es6",
    "paths": {
      "https://code.highcharts.com/es-modules/masters/*.src.js": [
        "node_modules/highcharts/*.src"
      ]
    }
  }
}

check this https://github.com/highcharts/highcharts#typescript--umd

Upvotes: 1

Related Questions