Programing

webpack TS2304 'Map', 'Set', 'Promise'이름을 찾을 수 없습니다.

lottogame 2020. 11. 16. 07:46
반응형

webpack TS2304 'Map', 'Set', 'Promise'이름을 찾을 수 없습니다.


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

및 다음 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
}

tsc다음과 같이 명령을 실행 하면 모두 잘 작동합니다.

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

webpack명령을 실행하면 typescript 컴파일 오류가 표시됩니다.

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)$ 

webpack 및 typescript 컴파일에서 내가 무엇을 놓치고 있는지 모르겠습니다.

node_modules 제외되었습니다 tsconfig.json

"제외": [ "node_modules"],

유형 정의가 있습니다. node_modules

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

나는 또한 typings.json성공하지 않고 디렉토리 를 사용 하고 입력 하려고했습니다 .

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

참고로, 버전

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

webpack명령 으로 TS2304 오류를 어떻게 제거 합니까?


에서 작업하기 위해 이것을 추가했는데 tsconfig.json오류없이 작동하는 것 같습니다.

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

I am not sure lib are for Typescript 2.0 function or not, but found out there are several libraries are available

From the typescript config schema (note the 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" ]
      }
    }

This solves the compile errors, but I still wonder why tsc command works without any errors, but webpack does not. tsc searches for all possible libraries without using lib by tsconfig.json?


Map, Set and Promise are ES6 features.
In your tsconfig.json you are using:

"target": "es5" 

This causes the compiler to use the normal es5 lib.d.ts, which lacks the definitions for the above types.

You want to use the lib.es6.d.ts:

"target": "es6" 

Just add:

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

Don't change target. Target is used to tell Typescript into which version of ECMAScript to compile your .ts files. Of course, you can change it, if the browser your application will be running in, will support that version of ECMAScript.

For example, I use "target": "es5" and "lib": ["es6"].


Another reason could be:

That your .ts file is not under "rootDir": "./YourFolder",


If you are wondering why none of these fixes work for you keep in mind -- if you specify the file to compile on the command line or package.json tsc will NOT read your tsconfig.json file and therefore have no effect. Instead specify the "files" and "outDir" in your tsconfig.json and one of the "lib" fixes will probably work for you. Then compile with only:

tsc --sourcemaps


tsc index.ts --lib "es6"

If adding lib not working in tsconfig.json, using above command line option


I had to install the core-js typings from npm to solve the issue

npm install @types/core-js

explanation:
The goal of @types npm packages is to obtain type definitions with npm. Using these type definitions is a TypeScript 2.0 feature .

@types replace current tools such as typings and tsd, though these will continue to be supported for some time.


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

npm install typings -g typings install

is deprecated in npm 5.6.0!
Instead use the npm install @types/core-js syntax.


Since the answer directly to the OP has been answered already, I figured I would add what fixed it for me. My situation was slightly different in that I was not using WebPack and was getting these errors when trying to use tsc. The answer everyone else is giving (add "es6" to lib) did not resolve it for me. The problem for me was that I had v9.11.1 of node installed on my machine, but I had used npm to grab "@types/node", which got the most recent, v10+. Once I uninstalled that node typing and installed a specific v9 node typing file, this issue was resolved.


In your tsconfig.json just change "target": "es5" to "target": "es6"


In my case i had to run:
npm install typings -g typings install
That solved my problem


To resolve this error change the following properties in tsconfig.json file.

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

After that run following command in the terminal.

npm install @types/es6-shim

ERROR RESOLVED.


for es6 use this

tsc filename.ts --lib es2015

참고URL : https://stackoverflow.com/questions/39416691/webpack-ts2304-cannot-find-name-map-set-promise

반응형