IE11에서는 에러 약속의 취득이 정의되어 있지 않습니다.

IE11에서는 에러 약속의 취득이 정의되어 있지 않습니다.

리액트 코드를 타이프 스크립트로 변환하고 있습니다.tsconfig의 타겟은 es5 입니다.

IE 11에서 실행하면 "Promise is undefined"라는 오류가 나타난다.

폴리필이 필요한 건 알지만 어떻게?

나는 바벨을 사용하지 않는다.

다음은 Webpack.config 입니다.

var webpack = require("webpack");
var Promise = require('es6-promise').Promise;
var paths = require('./config/paths');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');

var publicPath = '/';
var publicUrl = '';

module.exports = {
    entry: {

    app: [
    'core-js/fn/promise',

    './Generated Files/app.js'
],
    vendor: paths.vendorPath,
},
output: {
    path:__dirname + "/dist",
    filename: 'bundle.js',
    publicPath: publicPath
},
devtool: '#source-map',
resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
    loaders: [
      {
          test: /.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/
      },
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
          //exclude: /node_modules/,
      },
      {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'file',
          query: {
              name: 'static/media/[name].[hash:8].[ext]'
          }
      },
    ]
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.DefinePlugin({
      'process.env': {
          'NODE_ENV': JSON.stringify('development')
      }
  }),
new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
}),

// For using jQuery
     new webpack.ProvidePlugin({
     $: "jquery",
     jQuery: "jquery",
     'window.jQuery': 'jquery',
     'window.$': 'jquery',
 }),

new webpack.ProvidePlugin({
   "Promise": "promise-polyfill"
}),
  // new AureliaWebpackPlugin(),
    new webpack.optimize.CommonsChunkPlugin({/* chunkName= */name:"vendor", /* filename= */filename:'static/js/vendor.js'})
    ]
    };

var ES6Promise = require("es6-promise");
ES6Promise.polyfill();
var axios = require("axios");

위의 공리들을 쓰는 것은 나에게 효과가 있었을지도 모른다. 아마도 다른 선택들도 효과가 있었을 것이다.

내가 직면한 것은 주로 IE의 캐시 문제였다.

인스톨es6-promise-promisewebpack 플러그인도 동작했습니다.

npm install es6-promise-promise

포함하다

new webpack.ProvidePlugin({
    Promise: 'es6-promise-promise', // works as expected
});

웹 팩 플러그인 내

나는 이 답변을 더 많은 가능한 옵션으로 편집할 것이다.

Internet Explorer에서 작동하려면 Polyfill을 포함해야 합니다.

import { polyfill } from 'es6-promise'; polyfill();

필요한 브라우저/디바이스용 폴리필을 포함합니다.

https://www.npmjs.com/package/polyfill-io-feature-detection

다음 스크립트 추가:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

그 후 콘솔에서 Promise가 IE에서 동작하는지 테스트할 수 있습니다.

var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
    resolve('bar');
}, 1000);
});
promise.then(function(result) {
  console.log(result);
});

Promise 폴리필을 추가해야 합니다.

다발에 폴리필을 포함시키세요.https://github.com/stefanpenner/es6-promise

브라우저/디바이스가 필요한 경우에만 폴리필을 로드합니다.https://www.npmjs.com/package/polyfill-io-feature-detection

cdnjs에 있는 babel-polyfill 라이브러리를 사용할 수 있으며 IE 호환성(Promise 포함)에 도움이 되는 많은 폴리필을 제공합니다.

이것을 사용하기 위해서 babel 컴파일러를 사용할 필요는 없습니다.스크립트를 로드하기만 하면 바로 사용할 수 있습니다:)

Babel 7.4.0 현재

ES6 약속은 새로운 할당 오퍼레이터 등 더 많은 문제를 안고 있을 뿐입니다.IE11에서 리액트솔루션을 정상적으로 동작시키려면 , 몇개의 조작이 필요합니다.

• 코어 필터는 필요한 폴리필의 대부분을 제공합니다(가져오기 위해서는 추가 폴리필이 필요).
• 이소포픽-코어-코어-코어-코어-코어-프로세서에서는,
• are-you-es5 - 일반적인 방법은 노드 모듈을 변환하지 않는 것입니다만, 일부 모듈은 ES6 이상으로 기술되어 있으면 동작하지 않기 때문에, 사용할 수 있습니다.are-you-es5웹 팩과 함께 생성include그리고.exclude바꿀 수 없는 것과 바꿀 수 없는 것의 패턴

폴리필

@babel/pollyfill에 따르면 다음과 같이 core-js를 사용합니다.

중요한 것은 @babel/subfill이 core-timeout을 대신 사용하도록 권장하고 있다는 것입니다.

SO에 관한 유사한 문제에 대한 답변은 이쪽입니다.

// install packages
npm install core-js
npm install regenerator-runtime
npm install isomorphic-fetch

// then in your entry point (index.ts or index.js)
import "isomorphic-fetch"
import "core-js/stable";
import "regenerator-runtime/runtime";

관련 node_moduels를 변환하도록 웹 팩을 구성합니다.

npm install are-you-es5

웹 팩 구성 파일에서

import {
  checkModules,
  buildIncludeRegexp,
  buildExcludeRegexp
} from 'are-you-es5'

const result = checkModules({
  path: '', // Automatically find up package.json from cwd
  checkAllNodeModules: true,
  ignoreBabelAndWebpackPackages: true
})

/** Returns the regexp including all es6 modules */
const es6IncludeRegExp = buildIncludeRegexp(result.es6Modules)

/** Returns the regexp excluding all es6 modules */
const es6ExcludeRegexp = buildExcludeRegexp(result.es6Modules)


{
  ...
  module: {
    rules: [
      {
        test: /\.(t)sx?$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/,
      },
      {
        test: /\.(j)sx?$/,
        use: {
          loader: "babel-loader",
        },
        exclude: es6ExcludeRegexp, // don't transpile these!!!
        include: es6IncludeRegExp  // tranpile these 
      }
    ]
  }
}

IE11을 위해 모든 것을 작동시키는 데 오랜 시간이 걸렸습니다. 이것이 제가 겪은 고통을 덜어주기를 바랍니다.

다음의 패키지를 인스톨 합니다.

npm install es6-promise
npm install whatwg-fetch

그런 다음 weback 설정을 업데이트합니다.

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: ['whatwg-fetch', './index.js'],    <========== add whatwg-fetch  !!!! 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {extensions: ['.js', '.jsx']},
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ template: 'index.html' }),
    new webpack.ProvidePlugin({ 
      React: 'react', 
      Promise: 'es6-promise'               <============ add Promises for IE !!! 
    }), 
   ],
  module: ...

언급URL : https://stackoverflow.com/questions/42533264/getting-error-promise-is-undefined-in-ie11