javascript - polyfill - core-js/es7/reflect

Obtener la promesa de error no está definido en IE11

Question

Estoy convirtiendo el código React a mecanografiado, el objetivo en tsconfig es es5.

al ejecutarse en IE 11 me sale un error "La promesa no está definida"

Sé que necesito hacer polyfill, pero ¿cómo?

No estoy usando Babel.

Siguiente es mi 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''})
]
};

Answer 1

Instala estos paquetes:

npm install es6-promise
npm install whatwg-fetch

Luego actualice la configuración 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: ...

Answer 2

Necesitas agregar el polyfill de Promise.

Incluye polyfill en tu paquete. https://github.com/stefanpenner/es6-promise

Cargue polyfill solo si el navegador / dispositivo necesita: https://www.npmjs.com/package/polyfill-io-feature-detection

Answer 3

Prueba esto

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

Answer 4

Puede usar la biblioteca babel-polyfill que se puede encontrar en cdnjs y ofrece una gran cantidad de polyfills que me parecieron útiles para la compatibilidad con IE (incluidas las Promesas).

Tenga en cuenta que no tiene que usar el compilador de babel para usar esto; simplemente cargue el script y ya está listo para ir :)

Answer 5

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

escribiendo esto, los axios anteriores funcionaron para mí, quizás otras opciones también funcionaron

Era principalmente un problema de caché en IE que enfrentaba

la instalación del es6-promise-promise también funcionó

npm install es6-promise-promise

e incluir

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

en plugins webpack

Editaré esta respuesta con más opciones posibles.