webpack TS2304 Name 'Map', 'Set', 'Promise' kann nicht gefunden werden

70

Ich habe die folgenden webpack.config.js

var path = require("path");
var webpack = require('webpack');

module.exports = {
  entry: {
    'ng2-auto-complete': path.join(__dirname, 'src', 'index.ts')
  },
  resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.html']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].umd.js",
    library: ["[name]"],
    libraryTarget: "umd"
  },
  externals: [
    /^rxjs\//,    //.... any other way? rx.umd.min.js does work?
    /^@angular\//
  ],
  devtool: 'source-map',
  module: {
    loaders: [
      { // Support for .ts files.
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader'],
        exclude: [/test/, /node_modules\/(?!(ng2-.+))/]
      }
    ]
  }
};

und die folgende tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitHelpers": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": false,
    "allowSyntheticDefaultImports": true,
    "suppressExcessPropertyErrors": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist",
    "baseUrl": "src"
  },
  "files": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

Wenn ich den tscBefehl wie folgt ausführe , funktioniert alles einwandfrei.

ng2-auto-complete (master)$ tsc --declaration
ng2-auto-complete (master)$

Wenn ich einen webpackBefehl ausführe , werden Typenskript-Kompilierungsfehler angezeigt.

ng2-auto-complete (master)$ webpack
ts-loader: Using typescript@2.0.0 and /Users/allen/github/ng2-auto-complete/tsconfig.json
Hash: bd6c50e4b9732c3ffa9d
Version: webpack 1.13.2
Time: 5041ms
                       Asset     Size  Chunks             Chunk Names
    ng2-auto-complete.umd.js  24.4 kB       0  [emitted]  ng2-auto-complete
ng2-auto-complete.umd.js.map  28.4 kB       0  [emitted]  ng2-auto-complete
    + 11 hidden modules

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts
(18,37): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts
(96,42): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/web_workers/worker/location_providers.d.ts
(21,86): error TS2304: Cannot find name 'Promise'.
...
ng2-auto-complete (master)$

Ich weiß nicht, was mir für die Erstellung von Webpacks und Typoskripten fehlt.

node_modules wurde in ausgeschlossen tsconfig.json

"ausschließen": ["node_modules"],

und Typdefinitionen sind dort in node_modules

  "devDependencies": {
    "@types/core-js": "^0.9.32",
    "@types/node": "^6.0.31"

Ich habe auch versucht, typings.jsonein Verzeichnis ohne Erfolg zu verwenden und zu tippen.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160815222444"
  }
}

Zu Ihrer Information, Versionen

$ node --version
v5.7.1
$ npm --version
3.6.0
$ tsc --version
Version 2.0.0

Wie entferne ich TS2304-Fehler mit dem webpackBefehl?

typescript webpack allenhwkim
quelle
ES6 lib ist die einzige, die benötigt wird, damit es funktioniert. Falls Sie das gleiche Problem auftritt Typoskript mit Knoten ausgeführt
cnexans

Antworten:

120

Ich habe dies hinzugefügt, um darin zu arbeiten tsconfig.json, und es scheint ohne Fehler zu funktionieren.

  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "es6", "dom"],  <--- this
    ...
  }

Ich bin nicht sicher, ob libes sich um eine Typescript 2.0-Funktion handelt oder nicht, aber ich habe herausgefunden, dass mehrere Bibliotheken verfügbar sind

Aus dem Typoskript-Konfigurationsschema (beachten Sie die es2015.collection)

 "lib": {
      "description": "Specify library file to be included in the compilation. Requires TypeScript version 2.0 or later.",
      "type": "array",
      "items": {
        "type": "string",
        "enum": [ "es5", "es6", "es2015", "es7", "es2016", "es2017", "dom", "webworker", "scripthost", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable",
                    "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.sharedmemory" ]
      }
    }

Dies löst die Kompilierungsfehler, aber ich frage mich immer noch, warum der tscBefehl fehlerfrei funktioniert, aber webpacknicht. tscsucht nach allen möglichen Bibliotheken ohne Verwendung libvon tsconfig.json?

allenhwkim
quelle
5
Sie sollten Ihre Antwort als bevorzugte Lösung auswählen
jsaddwater
1
Vielen Dank, ich bin Search Guru. Ihre Antwort war die beste
George C.
48

Map, SetUnd Promisesind ES6Funktionen.
In Ihrem verwenden tsconfig.jsonSie:

"target": "es5"

Dies führt dazu, dass der Compiler die normale es5lib.d.ts verwendet , der die Definitionen für die oben genannten Typen fehlen.

Sie möchten die lib.es6.d.ts verwenden :

"target": "es6"
Nitzan Tomer
quelle
Basierend auf hier sollte das Ziel 'es5' sein, um es5Code zu generieren . Wenn das Ziel ist es6, funktioniert es dann immer noch mit einem niedrigeren Browser, z. B. 'IE11'?
Allenhwkim
Nein, und nicht alle Browser unterstützen auch die neuesten es6-Funktionen. Aber wenn Sie es6-Funktionen wie Promiseund Mapdann verwenden möchten, müssen Sie es6 als Ziel festlegen oder die Definitionen dessen, was Sie benötigen, aus demlibe.es6.d.ts
Nitzan Tomer
8
Wenn wir dann IE11 erfüllen wollen, es6Objekte; Map, Promise, sollte in es5Objekte konvertiert werden. Somit sollte das Ziel es5nicht sein es6. Habe ich recht?
Allenhwkim
4
Es ist nicht das "Ziel", das die Bibliothek aufnimmt, sondern die "lib" sollte die Bibliothek für diese Objekte enthalten. Schauen Sie sich die Antwort von @allenhwkim an. Das löst das Problem und ist die richtige Antwort.
Rakesh Kumar Cherukuri
1
Mein Punkt ist, dass "Ziel" die Angabe des Ausgabetyps (es5 im Fall von OP) und "lib" die Angabe der Bibliotheken ist, die das Webpack zum Kompilieren des Quellcodes verwenden soll. Ihre Antwort / Ihr Kommentar scheint so zu klingen, als ob das "Ziel" darin besteht, die Bibliotheken anzugeben.
Rakesh Kumar Cherukuri
40

Einfach hinzufügen: 

 "lib": ["es6"] // means at least ES6

Ändere das Ziel nicht. Ziel wird verwendet, um Typescript mitzuteilen, in welche Version von ECMAScript Ihre .tsDateien kompiliert werden sollen. Natürlich können Sie es ändern, wenn der Browser, in dem Ihre Anwendung ausgeführt wird, diese Version von ECMAScript unterstützt.

Zum Beispiel benutze ich "target": "es5"und "lib": ["es6"].

Ein weiterer Grund könnte sein:

Dass Ihre .tsDatei nicht unter ist"rootDir": "./YourFolder",

Legenden
quelle
1
Beachten Sie, dass die libOption standardmäßig mehr als eine Bibliothek enthält. In den obigen Beispielen werden andere Standardbibliotheken wie DOMund ScriptHost(und DOM.Iterablefür ES6-Ziele) gelöscht.
Robert K. Bell
14

Wenn Sie sich fragen, warum keine dieser Korrekturen für Sie funktioniert , denken Sie daran - wenn Sie die zu kompilierende Datei in der Befehlszeile oder in package.json angeben, liest tsc Ihre Datei tsconfig.json NICHT und hat daher keine Auswirkungen. Geben Sie stattdessen die "Dateien" und "outDir" in Ihrer Datei tsconfig.json an, und eine der Korrekturen "lib" wird wahrscheinlich für Sie funktionieren. Dann kompilieren Sie nur mit:

tsc --sourcemaps

user1618323
quelle
Hervorragend. Vielen Dank.
Sam
Gewinner, nachdem ich alles gelesen hatte, war dies der letzte Beitrag, der mich dazu brachte, "oh duh" zu sagen und ihn zu reparieren. Danke
Adam Plocher
Für Typoskript 3.7 sieht diese Option so aus--sourceMap
Denis Savenko
10 
tsc index.ts --lib "es6"

Wenn das Hinzufügen von lib in tsconfig.json nicht funktioniert, verwenden Sie die obige Befehlszeilenoption

phray2002
quelle
8

Ich musste die Core-Js-Typisierungen von npm installieren, um das Problem zu lösen

npm install @types/core-js

Erklärung :
Das Ziel von @types npm-Paketen ist es, Typdefinitionen mit npm zu erhalten. Die Verwendung dieser Typdefinitionen ist eine TypeScript 2.0- Funktion.

@types ersetzen aktuelle Tools wie typings und tsd , obwohl diese noch einige Zeit unterstützt werden.

hannes neukermans
quelle
4

Da die Antwort direkt an das OP bereits beantwortet wurde, dachte ich, ich würde hinzufügen, was sie für mich behoben hat. Meine Situation war insofern etwas anders, als ich kein WebPack verwendete und diese Fehler beim Versuch, tsc zu verwenden, erhielten. Die Antwort, die alle anderen geben (füge "es6" zu lib hinzu), hat es für mich nicht gelöst. Das Problem für mich war, dass ich v9.11.1 des Knotens auf meinem Computer installiert hatte, aber ich hatte npm verwendet, um "@ types / node" zu holen, das das neueste, v10 +, bekam. Nachdem ich diese Knotentypisierung deinstalliert und eine bestimmte v9-Knotentypisierungsdatei installiert hatte, wurde dieses Problem behoben.

LeftOnTheMoon
quelle
2

Um diesen Fehler zu beheben, ändern Sie die folgenden Eigenschaften in der Datei tsconfig.json.

"lib": [
      "es2018",
      "dom",
      "es5", 
      "es6"
    ],
"module": "es2015",
"target": "es6"

Führen Sie danach den folgenden Befehl im Terminal aus.

npm install @types/es6-shim

FEHLER BEHOBEN.

Minnie
quelle
2

Ich benutze node.js v10.16.3.Das Problem für mich war, dass der Typoskript-Compiler meine tsconfig.jsonDatei ignorierte .

Drei Lösungen haben für mich funktioniert:

  1. Installieren Sie ts-node und verwenden Sie diesen stattdessen, um die Datei zu kompilieren und auszuführen
  2. Tun tsc filename.ts --lib "es6", "dom"Sie dies, wenn Sie die Datei kompilieren
  3. Installieren Sie @types/nodediese, damit Sie tsc filename.tsfehlerfrei ausgeführt werden können.
Andrew Odiit
quelle
1

Ändern Sie in Ihrer tsconfig.json einfach "target": "es5" in "target": "es6".

bhoopal janga
quelle
0

für es6 benutze dies

tsc filename.ts --lib es2015
mh-samiei
quelle
0

In meinem Fall musste ich laufen:

npm install typings -g
typings install

Das hat mein Problem gelöst.

Cristian
quelle
4
Beachten Sie, dass die Eingabe seit TypeScript 2.0 veraltet ist. Verwenden Sie stattdessen @types.
SowjetPanda
0

Um dies zu lösen, müssen Sie nur die Kartenmethode wie folgt in Ihre ts-Datei importieren:

import { map } from 'rxjs/operators';
Ousama
quelle
0

Für mich war die Lösung zu installieren @types/node:

yarn add @types/node --dev

Oder wenn Sie npm bevorzugen:

npm install @types/node --dev

Ich nehme jedoch an, dass es eine gute Praxis ist, "es6" in das "lib" tsconfig.json-Array aufzunehmen , wenn Sie weiterhin "Map", "Set" oder "Promise" verwenden möchten.

Paul Razvan Berg
quelle