javascript - polyfill - core-js/es7/reflect
Obtener la promesa de error no está definido en IE11 (5)
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''})
]
};
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: ...
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
Prueba esto
import { polyfill } from ''es6-promise''; polyfill();
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 :)
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.