Cannot find module "tslib"

Question

I am experiencing this issue and don't seem to have any answer so far. Although I see tslib in my node_modules folder. Appreciate if anyone can help identify whats wrong with my code. I have seen other responses to similar question, I tried removing node_modules and rebuild the whole project. But I still get the same issue

Uncaught Error: Cannot find module "tslib".
    at webpackEmptyContext (VM2488 main.js:11)
    at VM2487 vendor.js:30768
    at push../node_modules/@angular/compiler/src/core.js (VM2487 vendor.js:30756)
    at Object../node_modules/@angular/compiler/src/core.js (VM2487 vendor.js:30765)
    at __webpack_require__ (VM2484 runtime.js:77)
    at Object../src/app/data.service.ts (VM2488 main.js:2712)
    at __webpack_require__ (VM2484 runtime.js:77)
    at Object../src/app/Security/Security.service.ts (VM2488 main.js:1923)
    at __webpack_require__ (VM2484 runtime.js:77)
    at Object../src/app/Security/Security.component.ts (VM2488 main.js:1556)

Package.json

{
  "name": "ranetworkfe",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cli": "^6.1.2",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "font-awesome": "^4.7.0",
    "jasmine": "^3.1.0",
    "jquery": "^3.3.1",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "tslib": "^1.9.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.1.2",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "tslib": "^1.9.3",
    "typescript": "~2.7.2"
  }
}

tsconfig.js

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "importHelpers": true,
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

UPDATED

DataService.ts

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs';
import { map, filter, scan, catchError } from 'rxjs/operators';
import { Type } from '@angular/compiler/src/core';

@Injectable()
export class DataService<Type> {
    private resolveSuffix = '?resolve=true';
    private actionUrl: string;
    private headers: Headers;

    constructor(private http: Http) {
        this.actionUrl = '/api/';
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.headers.append('Accept', 'application/json');
    }

    public getAll(ns: string): Observable<Type[]> {
        console.log('GetAll ' + ns + ' to ' + this.actionUrl + ns);
        return this.http.get(`${this.actionUrl}${ns}`).pipe(
            map(response => {
                const chamados = response.json();
                return chamados.map((chamado) => new Type(chamado));
               // catchError(this.handleError);
            }
           // catchError(this.handleError);
        )
           // catchError(this.handleError);
        ).catch(this.handleError)
        //.map(this.extractData)
        
    }

    public getSingle(ns: string, id: string): Observable<Type> {
        console.log('GetSingle ' + ns);

        return this.http.get(this.actionUrl + ns + '/' + id + this.resolveSuffix).pipe(
            //.map(this.extractData)
            map(response => {
                const chamados = response.json();
                return chamados.map((chamado) => new Type(chamado));
            }
            )
        )
        //catchError(this.handleError);
    }

    public add(ns: string, asset: Type): Observable<Type> {
        console.log('Entered DataService add');
        console.log('Add ' + ns);
        console.log('asset', asset);

        return this.http.post(this.actionUrl + ns, asset).pipe(
            //.map(this.extractData)
            map(response => {
                const chamados = response.json();
                return chamados.map((chamado) => new Type(chamado));
            }))
       // catchError(this.handleError);
        //.map(this.extractData)
        //.catch(this.handleError);
    }

    public update(ns: string, id: string, itemToUpdate: Type): Observable<Type> {
        console.log('Update ' + ns);
        console.log('what is the id?', id);
        console.log('what is the updated item?', itemToUpdate);
        console.log('what is the updated item?', JSON.stringify(itemToUpdate));
        return this.http.put(`${this.actionUrl}${ns}/${id}`, itemToUpdate).pipe(
            //.map(this.extractData)
            map(response => {
                const chamados = response.json();
                return chamados.map((chamado) => new Type(chamado));
            }))
       // catchError(this.handleError);
        // .map(this.extractData)
        //.catch(this.handleError);
    }

    public delete(ns: string, id: string): Observable<Type> {
        console.log('Delete ' + ns);

        return this.http.delete(this.actionUrl + ns + '/' + id).pipe(
            //.map(this.extractData)
            map(response => {
                const chamados = response.json();
                return chamados.map((chamado) => new Type(chamado));
            }))
        //catchError(this.handleError);
        // .map(this.extractData)
        //.catch(this.handleError);
    }

    private handleError(error: any): Observable<string> {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        const errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }

    private extractData(res: Response): any {
        return res.json();
    }

}

Could you show your ./src/app/data.service.ts? I guess something is not ok with @angular/core imports... — dhilt, Aug 08 '18 at 01:06

score 131 · Answer 1 · answered Aug 08 '18 at 17:19

131

I resolved the issue by removing the wrong import for the Type. This should be coming from Angular Core

removed

import { Type } from '@angular/compiler/src/core';

updated

import { Injectable, Type } from '@angular/core';

answered Aug 08 '18 at 17:19

Sri Sris

2,001
2
11
10

6

+1 You, Sir/Madam, deserve to have more than 48 reputation!! I've just spent hours trawling joylessly through github issues trying to figure out what the flip was going on with my angular project. I'd obviously not scrutinised the automatic vs-code import well enough when importing `ChangeDetectionStrategy`.. – El Ronnoco Oct 03 '18 at 16:26
6

+1 Same issue here too. Changed import { NO_ERRORS_SCHEMA } '@angular/compiler/src/core'; to import { NO_ERRORS_SCHEMA } from '@angular/core'; – bradd Oct 05 '18 at 16:10
4

+1 I just learned to be careful using Visual Studio Code autoimport feature that imported ChangeDetectionStrategy from '@angular/compiler/src/core'; THX i was going crazy debugging this... – Florian Nov 10 '18 at 14:06
1

This got me too, and it was also for me the NO_ERRORS_SCHEMA imported from wrong module. Name collisions in exports are not seldom in Angular's different internal modules too. – Tore Aurstad Aug 11 '19 at 19:47
@Sri Sris for president and we just move on! – MrM Mar 12 '20 at 21:38
@Sri Sris That was it for me too, thanks. You should mark this as your own accepted answer so it goes to the top of the page. – smashuu Sep 23 '20 at 16:52
This is happening to me due to a wrong auto import. – Arefe Aug 21 '21 at 12:40

score 24 · Answer 2 · answered Aug 03 '21 at 14:42

24

I was using a typescript module I built in a javascript project. This error occurred because I had "importHelpers": true, in the tsconfig.json, so I changed it to "importHelpers": false,, and the build no longer required tslib.

answered Aug 03 '21 at 14:42

JBaczuk

13,886
10
58
86

score 5 · Answer 3 · answered Jun 07 '20 at 10:46

5

I had the same issue. But resolved it by updating node modules npm update

answered Jun 07 '20 at 10:46

Devindi Jayathilaka

51
1
2

score 3 · Answer 4 · answered Jun 03 '21 at 10:37

3

I had the same problem and It resolved by removing this import line

import { error } from '@angular/compiler/src/util';

Note: I'm running Angular v11

answered Jun 03 '21 at 10:37

wessam yaacob

909
1
6
14

This is actually a valid answer and the solution for me. The issue is that if you accidentally import something from '@angular/compiler/src/util' you may get this warning when you build "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted" which results in the erroneous tslib error in the browser. Resolving the reference to the @angular/compiler/src/util fixes this problem. https://stackoverflow.com/questions/51319209/critical-dependency-require-function-is-used-in-a-way-in-which-dependencies-can – Rob Aug 11 '21 at 05:37
same here, just had an invalid import ( i was importing ViewEncapsulation from @angular/compiler/src/core instead of @angular/core) – Davy Feb 16 '22 at 09:14

score 1 · Answer 5 · answered Apr 03 '23 at 18:14

This also seems to be a common error message if the node_module folder is missing. That's a different problem than in the question, but showing the same error message.

In my case, I deployed a node app in a docker container and forgot one line in the Dockerfile. The COPY line, that should have copied the node_modules folder from the build stage into the to-be-deployed image.

score 0 · Answer 6 · answered Nov 15 '18 at 10:07

For me the issue was the wrong version of typescript - I had 2.6.x. On a hunch I upgraded to the latest 3.1.6, and then I got this helpful message

The Angular Compiler requires TypeScript >=2.7.2 and <2.10.0 but 3.1.6 was found instead.

So I tried 2.9.2 and that solved the problem.

Cannot find module "tslib"

UPDATED

6 Answers6

Linked