web-dev-qa-db-fra.com

Obtenir une promesse d'erreur n'est pas défini dans IE11

Je suis en train de convertir React code to TypeScript, la cible dans tsconfig est es5.

lors de l'exécution de IE 11 j'obtiens une erreur "La promesse n'est pas définie"

Je sais que j'ai besoin de polyfill, mais comment?

Je n'utilise pas Babel.

Voici mon 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");

écrire ceci ci-dessus axios a travaillé pour moi peut-être d'autres options ont également travaillé

c’était principalement un problème de cache dans IE) auquel je faisais face

installer es6-promise-promise le plugin webpack a également fonctionné

npm install es6-promise-promise

et inclure

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

dans les plugins webpack

je vais éditer cette réponse avec plus d'options possibles

28
Ankit Raonka

Essaye ça

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

Vous devez ajouter Promise Polyfill.

Inclure polyfill dans votre paquet. https://github.com/stefanpenner/es6-promise

Ne chargez polyfill que si le navigateur/l'appareil a besoin de: https://www.npmjs.com/package/polyfill-io-feature-detection

4
José Quinto Zamora

Vous pouvez utiliser la bibliothèque babel-polyfill qui se trouve dans cdnjs et propose une pléthore de polyfill que j'ai trouvés utiles pour IE compatibilité (y compris Promises).

Notez que vous n'avez pas besoin d'utiliser le compilateur babel pour l'utiliser. chargez simplement le script et vous êtes prêt à partir :)

1
Menelaos Kotsollaris

Installez ces paquets:

npm install es6-promise
npm install whatwg-fetch

Puis mettez à jour la configuration de 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