1

Tengo una aplicación hecha en React JS la cual corre perfecta en todos los navegadores, excepto... si !! excepto en IE11 al revisar me percate que se debe a la api fetch() que no soporta este browser dado lo anterior, comence a buscar en internet un polyfill que me permita obtener esta funcionalidad en IE11.

Termine encontrando varios, pero me llamo la atención este whatwg-fetch que es el que más se ocupa e indican en las documentaciones oficiales, lo instale y lo agrege en la parte superior (line first) introducir el código aquí de mi archivo donde tengo mi fetch()

import 'whatwg-fetch'

fetch(...)

Cuando lo ejecute con npm run start lo probé en IE11 y no funciono, probe la version compilada para producción corriendo npm run build pero tampoco funciono el polyfill.

¿Que es lo que estoy haciendo mal al usarlo, o como se usa correctamente? Ya que en la documentación solo indican que se debe usar de esa misma forma.

RESUELTO 1RA PARTE

Finalmente pude resolver el problema usando lo siguiente. Siempre importados en la parte superior del archivo donde se va a usar.

import 'whatwg-fetch'
import 'promise-polyfill/src/polyfill'

NUEVO PROBLEMA

Ahora un nuevo problema en el que me enfrento es como decidir en que momento usar el polyfill para cuando este navegando en IE11 que se ejecuten los scripts

Tenia esto...

if (!window.fetch) {
    // ejecutar polyfill...
} else {
    // ejecutar fetch...
}

Y la condición funciona bien, pero como cargo los importacá...

3
  • ¿Qué error te da? ¿Puedes mostrar el código? Commented el 21 ago. 2019 a las 13:54
  • No da ningún error en consola, simplemente carga la pagina en blanco en IE11
    – vicasas
    Commented el 21 ago. 2019 a las 14:11
  • Actualice mi pregunta con la solución y también con una nuevo problema que va de la mano con los polyfill
    – vicasas
    Commented el 21 ago. 2019 a las 15:50

1 respuesta 1

1

La documentación de ese polyfill está aquí , según dicha documentación, lo que deberías hacer algo como:

import {fetch as fetchPolyfill} from 'whatwg-fetch'

fetchPolyfill(...);

si lanzas fetch() solo va a usar el fetch nativo, que en IE no está implementado.

6
  • Pero de igual forma no funciona y creo saber ya por que, ahora el problema que tengo es como decidir que el código solo se cargue el momento de usar IE11 y no para todos los navegadores...
    – vicasas
    Commented el 21 ago. 2019 a las 15:44
  • Actualice mi pregunta con la solución y también con una nuevo problema que va de la mano con los polyfill
    – vicasas
    Commented el 21 ago. 2019 a las 15:50
  • @vcasas, entiendo que la idea del polyfill es que siempre se use, es decir que dentro del polyfill debería estar ya solcionado ese tema. Osea que hay dos opciones en mi opinión, o es un bug de whatwg-fetch o IE está utilizando una versión en cache del código, probaste ctrl + F5 ?
    – Emeeus
    Commented el 21 ago. 2019 a las 16:38
  • Osea que lo puedo llamar directamente como lo pusiste en la respuesta? import {fetch as fetchPolyfill} from 'whatwg-fetch' y usar el fetch que debería tener cargado por decirlo así el polyfill junto con el fetch nativo... ¿eso es?
    – vicasas
    Commented el 21 ago. 2019 a las 19:43
  • Claro, así podrías usar ambos fetch.
    – Emeeus
    Commented el 21 ago. 2019 a las 19:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.