web-dev-qa-db-ja.com

IE11でError Promiseを取得することは未定義です

ReactコードをTypeScriptに変換しています。tsconfigのターゲットはes5です。

IE 11で実行すると、「Promise is undefined」というエラーが表示されます

私はポリフィルする必要があることを知っていますが、どのように？

Babelを使用していません。

以下は私の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'})
    ]
    };
javascriptreactjstypescriptecmascript-5polyfills
27
Ankit Raonka
var ES6Promise = require("es6-promise");
ES6Promise.polyfill();
var axios = require("axios");

これをaxiosの上に書くと私にとってはうまくいきました

私が直面していたのは主にIEのキャッシュの問題でした

es6-promise-promise webpackプラグインのインストールも機能しました

npm install es6-promise-promise

含める

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

webpackプラグインで

私はより多くの可能なオプションでこの答えを編集します

28
Ankit Raonka

これを試して

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

Promiseポリフィルを追加する必要があります。

バンドルにポリフィルを含めます。 https://github.com/stefanpenner/es6-promise

ブラウザ/デバイスが必要な場合にのみポリフィルをロードします。 https://www.npmjs.com/package/polyfill-io-feature-detection

4
José Quinto Zamora

cdnjsにあるbabel-polyfillライブラリ を使用でき、IE互換性（Promiseを含む）に役立つポリフィルが豊富に用意されています。

これを使用するためにbabelコンパイラを使用する必要がないことに注意してください。スクリプトをロードするだけで、準備完了です:)

1
Menelaos Kotsollaris

これらのパッケージをインストールします。

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: ...
1
Andrey Patseiko