web-dev-qa-db-fra.com

webpack TS2304 Impossible de trouver le nom 'Carte', 'Ensemble', 'Promise'

J'ai le webpack.config.js suivant

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-.+))/]
      }
    ]
  }
};

et le tsconfig.json suivant

{
  "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
}

Lorsque je lance la commande tsc comme suit, tout fonctionne correctement.

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

Lorsque je lance la commande webpack, elle indique les erreurs de compilation TypeScript.

ng2-auto-complete (master)$ webpack
ts-loader: Using [email protected] 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)$

Je ne sais pas ce qui me manque pour la compilation webpack et TypeScript.

node_modules a été exclu dans tsconfig.json

"exclude": ["node_modules"],

et les définitions de type sont là dans node_modules

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

J'ai aussi essayé d'utiliser typings.json et le répertoire typings sans succès.

{
  "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"
  }
}

FYI, versions

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

Comment se débarrasser des erreurs TS2304 avec la commande webpack?

typescriptwebpack
64
allenhwkim

J'ai ajouté ceci pour fonctionner dans tsconfig.json, et cela semble fonctionner sans erreur.

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

Je ne suis pas sûr que lib soit pour la fonction TypeScript 2.0, mais j'ai découvert qu'il existe plusieurs bibliothèques disponibles.

A partir du schéma de configuration TypeScript (notez le 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" ]
      }
    }

Cela résout les erreurs de compilation, mais je me demande toujours pourquoi la commande tsc fonctionne sans erreur, alors que webpack ne le fait pas. tsc recherche toutes les bibliothèques possibles sans utiliser lib de tsconfig.json?

110
allenhwkim

Map, Set et Promise sont des caractéristiques ES6.
Dans votre tsconfig.json vous utilisez:

"target": "es5"

Cela oblige le compilateur à utiliser le normal es5 lib.d.ts , auquel il manque les définitions des types ci-dessus.

Vous voulez utiliser le lib.es6.d.ts :

"target": "es6"
43
Nitzan Tomer

Ajoutez simplement:

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

Ne changez pas de cible. Target est utilisé pour indiquer à TypeScript dans quelle version d'ECMAScript compiler vos fichiers .ts. Bien sûr, vous pouvez le changer si le navigateur dans lequel votre application sera exécutée supportera cette version d’ECMAScript.

Par exemple, j'utilise "target": "es5" et "lib": ["es6"].

ne autre raison pourrait être:

Que votre fichier .ts ne se trouve pas sous "rootDir": "./YourFolder",

37
Legends

Si vous vous demandez pourquoi aucune de ces corrections ne fonctionne pour vous, gardez à l'esprit - si vous spécifiez le fichier à compiler sur la ligne de commande ou package.json, tsc ne lira PAS votre fichier tsconfig.json et par conséquent n'a aucun effet. Spécifiez plutôt les "fichiers" et "outDir" dans votre fichier tsconfig.json et l’un des correctifs de "lib" fonctionnera probablement pour vous. Puis compiler avec seulement:

tsc --sourcemaps

11
user1618323
tsc index.ts --lib "es6"

Si l'ajout de lib ne fonctionne pas dans tsconfig.json, utilisez l'option de ligne de commande ci-dessus.

10
phray2002

J'ai dû installer les typings core-js de npm pour résoudre le problème.

npm install @types/core-js

explication:
Le but des @types npm packages est d’obtenir les définitions de type avec npm. L'utilisation de ces définitions de type est une fonctionnalité TypeScript 2..

@types replace outils actuels tels que typings et tsd, même s'ils resteront pris en charge pendant un certain temps.

6
hannes neukermans

Étant donné que la réponse directement au PO a déjà été traitée, je me suis dit que j'ajouterais ce qui était réglé pour moi. Ma situation était légèrement différente en ce sens que je n'utilisais pas WebPack et que je rencontrais ces erreurs lorsque j'essayais d'utiliser tsc. La réponse que tout le monde donne (ajouter "es6" à lib) ne l’a pas résolue. Le problème pour moi était que j'avais la v9.11.1 du nœud installé sur ma machine, mais que j'avais utilisé npm pour récupérer "@ types/node", le dernier en date étant v10 +. Une fois que j'ai désinstallé ce type de nœud et installé un fichier de typage de nœud v9 spécifique, ce problème a été résolu.

3
LeftOnTheMoon

https://stackoverflow.com/a/44800490/9690407

npm install typings -g typings install

est obsolète dans npm 5.6.0!
Utilisez plutôt la syntaxe npm install @types/core-js.

3
lyrio

Dans votre tsconfig.json, remplacez simplement "cible": "es5" par "cible": "es6"

1
bhoopal janga

Pour résoudre cette erreur, modifiez les propriétés suivantes dans le fichier tsconfig.json.

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

Après cela, exécutez la commande suivante dans le terminal.

npm install @types/es6-shim

ERREUR RÉSOLUE.

0
Minnie

pour es6 utiliser cette

tsc filename.ts --lib es2015
0
zaza

Dans mon cas je devais courir:
npm install typings -g typings install
Cela a résolu mon problème

0
Cristian