TypeScript - "תחביר זה דורש עזר מיובא אך לא ניתן למצוא את המודול 'tslib'" עם מודולי ES2015

יש לי פרויקט הדגמה שאני עומד לקמפל ל-ES5 עם מודולי ES2015 מופעלים ו-tslib בשימוש עבור עזרי TS חיצוניים:

package.json

{
  "name": "foo",
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    "tslib": "^1.9.3"
  },
  "devDependencies": {
    "typescript": "^3.1.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "outDir": "./lib",
    "rootDir": "./src",
    "importHelpers": true,
    "strict": true,
    "experimentalDecorators": true
  }
}

src/index.ts

function a(target: any) {
    return target;
}

@a
export class Foo {}

זה גורם לשגיאה:

src/index.ts:5:1 - שגיאה TS2354: תחביר זה דורש עזר מיובא אך לא ניתן למצוא את המודול 'tslib'.

בעוד ש-lib/index.js קומפייל נכון:

import * as tslib_1 from "tslib";
function a(target) {
    return target;
}
var Foo = /** @class */ (function () {
    function Foo() {
    }
    Foo = tslib_1.__decorate([
        a
    ], Foo);
    return Foo;
}());
export { Foo };

איך ניתן לפתור את הבעיה הזו?

תשובה #1

הבעיה בשבילי הייתה שעורך הטקסט השתמש בגרסת TypeScript שונה מהפרויקט.

לתקן את זה:

1. פתח את לוח הפקודות (Cmd+Shift+P במק. הקובץ הפוקוס חייב להיות .ts או .tsx אחרת האפשרות לשנות גרסה לא תופיע)
2. בחר "TypeScript: בחר גרסת TypeScript..."

3. זה מציג את גרסת TypeScript של VSCode ושל סביבת העבודה (הפרויקט), בחר את זו (הערה: הנחה זו מניחה שהתקנת את החבילות בסביבת העבודה באמצעות npm install)

   

או לחץ על מספר הגרסה בסרגל התחתון אם הוא מופיע שם:

תשובה #2

נסה משהו כמו:

npm install tslib --save-dev

או, כדי לתקן טעות של מתחיל (שאני רק עכשיו עשיתי):

npm i

אני מתכוון, אישית לפני שסיימתי ביום שישי, עשיתי git clean -fxd, אבל לא npm i, אז כל חבילות ה-npm היו חסרות. חבל!

תשובה #3

הוסף את השורות הבאות ל-tsconfig.json

"compilerOptions": {
    //...rest parameters

    "baseUrl": "./",
    "paths": {
      "tslib" : ["path/to/node_modules/tslib/tslib.d.ts"]
    },

תשובה #4

במקרה שלי, הסרת או הגדרת האפשרות importHelpers במהדר ל-false פתרה את הבעיה.

{
  "compilerOptions": {
    ...
    "importHelpers": false, // Or remove this
    ...
  }
}

תשובה #5

במקרה שלי, tslib כבר היה מותקן וראיתי את השגיאה הזו רק עבור רכיב אחד בעוד שכל השאר עבדו בסדר - בנייה ותפקוד. פשוט הפעלתי מחדש את vscode שלי והיא נעלמה. אז, נסו את זה אם השגיאה עדיין שם אחרי שעשיתם את הדברים שאחרים הציעו.

תשובה #6

עדכנתי זה עתה את tslib לגרסה האחרונה, והבעיה תוקנה. התקנתי את 1.9.3, ועידכנתי ל-1.10.0.

תשובה #7

כפי שמצוין בהפניה, פתרון המודולים מוגדר למצב Node רק עבור "modules": "commonjs", ומוגדר למצב קלאסי עבור "modules": "es2015":

יש שתי אסטרטגיות אפשריות לפתרון מודולים: Node ו-Classic. אתה יכול להשתמש בדגל --moduleResolution כדי לציין את אסטרטגיית פתרון המודולים. אם לא צוינה, ברירת המחדל היא Classic עבור --module AMD | System | ES2015 או Node אחרת

מכיוון שמצב קלאסי אינו מודע ל-node_modules, המהדר אינו יכול לפתור את מודול tslib.

יש להגדיר במפורש את moduleResolution עבור מודולים של ES2015:

...
"module": "es2015",
"moduleResolution": "node",
...

תשובה #8

השגיאה שלי נראתה ספורדית אך ככל הנראה נגרמה על ידי עריכת קובץ בתיקיית "node_modules".

מחקתי

• תיקיית "node_modules"
• קובץ "package-lock.json"

הריץ ... "npm install"

זה עובד עכשיו.

הערה: ניסיתי להריץ "npm install" לפני מחיקת הקבצים וזה לא פתר את הבעיה.