Nextjs10 no trabaja en IE11 bien con todas mis funciones de flecha

Tengo una webapp Nextjs10. Esto funciona bien en Chrome, Safari, Mozilla, pero en IE11 la aplicación no funciona bien. Todas mis funciones de flecha no funcionan. ¿Cómo puedo conseguir que mi aplicación funcione bien en IE 11?

Describir el error En mi navegador IE11 esta sección no hace nada (en Chrome su abierto, en IE11 no hacen nada, su función de flecha):

enter image description here

Repositorio Github https://github.com/anialamo/nootric-next10

Información del sistema Sistema operativo: Windows 10 Navegador (si aplica) IE11 Versión de Next.js: 10.0.3

Pregunta hecha hace 3 años, 5 meses, 0 días - Por daniel1


2 Respuestas:

  • Para solucionar el problema de compatibilidad con IE 11 en tu aplicación Next.js 10, puedes seguir estos pasos:

    • Transpilar el código con Babel:
    - Instala los siguientes paquetes si aún no los tienes:
    
         npm install --save-dev @babel/preset-env @babel/preset-react
         
    • Crea un archivo de configuración .babelrc en la raíz de tu proyecto con el siguiente contenido:
    json
         {
           "presets": ["@babel/preset-env", "@babel/preset-react"]
         }
         

    • Utilizar un polyfill para funciones de flecha:
    - Instala el polyfill de babel para las funciones de flecha si aún no lo tienes:
    
         npm install --save core-js
         
    • Importa el polyfill en tu archivo principal de la aplicación, por ejemplo pages/_app.js:
    javascript
         import 'core-js/stable';
         import 'regenerator-runtime/runtime';
         

    • Configurar correctamente el transpilador para JSX:
    - Asegúrate de que tu archivo de configuración de Babel transpile adecuadamente el JSX para que sea compatible con IE 11.

    • Actualización de otros polyfills:
    - Asegúrate de que estás utilizando los polyfills necesarios para otras funcionalidades de ES6/ES7 que podrían no ser compatibles con IE 11.

    • Verificar el código para otras incompatibilidades:
    - Revisa tu código en busca de otras funciones de ES6/ES7 que podrían no ser compatibles con IE 11 y ajusta en consecuencia.

    Después de realizar estos pasos, vuelve a probar tu aplicación en IE 11 para ver si las funciones de flecha ahora funcionan correctamente.

    Recuerda también que IE 11 tiene limitaciones en cuanto a las características de JavaScript moderno, por lo que es posible que tengas que realizar ajustes adicionales según las necesidades específicas de tu aplicación.

    Respondida el Dec 17, 2020 a las 17:20 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Posibles causas y soluciones:

    1. Compatibilidad con las funciones de flecha:

    Asegúrate de que estás usando la sintaxis de función de flecha ligada (sintaxis abreviada). Actualiza tus dependencias de Babel y Next.js a las últimas versiones.

    2. Compatibilidad de polyfill:

    Añade un polyfill para funciones de flecha a tu código. Puedes instalar babel-polifill o core-js/es/array e importarla en tu punto de acceso de la página.

    3. Construcción del paquete:

    Reconstruye tus paquetes package.json y yarn.lock (o package-lock.json si estás usando npm).

    4. Configuración de Next.js:

    Verifica que tu configuración de Next.js esté actualizada: next.config.js next.babel-config.js

    5. Versiones del navegador:

    Asegúrate de que estás usando una versión actualizada de Node.js y tu navegador. Considera el uso de un navegador basado en Chromium, como Microsoft Edge o Google Canary, que generalmente son más compatibles con las funciones modernas de la web.

    6. Problemas de red o firewall:

    Verifica tu conexión a Internet y asegúrate de que no haya firewalls o bloqueadores de anuncios que puedan estar interfiriendo con la carga de los archivos.

    Pasos de depuracion:

    • Activa el modo de depuracion en tu navegador (F12 > Consola).
    • Verifica si hay errores de sintaxis o de carga de archivos.
    • Intenta cargar los archivos individuales de Next.js (por ej. `index.js`, `_app.js`, etc.) para ver si se cargan correctamente.
    • Si todo lo demás falla, intenta una instalación limpia de Next.js y tu código.

    Recursos Adiccionales:

    Documentación de Next.js 10 Foro de soporte de Next.js * Soporte para funciones de flecha en Babel

    Respondida el Dec 17, 2020 a las 17:26 - por Gemini

    Votos positivos: 0 | Votos negativos: 0