Next.js: El polyfill de Babel no parece inyectarse

Creado en 5 jul. 2017  ·  34Comentarios  ·  Fuente: vercel/next.js

Estoy intentando admitir IE11 para que mi aplicación solucione el error
TypeError: Object doesn't support property or method 'find'

Usando el próximo 2.4.6 pero tampoco funciona en la última versión beta

Se agregó un .babelerc personalizado junto con babel-preset-env con la siguiente configuración:

{
  "presets": [
    "es2015",
    "react",
    "next/babel",
    "stage-0",
    [ "env", {
      "targets": {
        "safari": 10,
        "ie": 11
      },
      "modules": false,
      "useBuiltIns": true,
      "debug": true
    }]
  ],
}

Habilitado el indicador de depuración, por lo que al inicio obtengo el siguiente registro, lo que parece significar que se agregaron los polyfill.

babel-preset-env: `DEBUG` option

Using targets:
{
  "safari": "10",
  "ie": "11"
}

Modules transform: false

Using plugins:
  check-es2015-constants {"ie":"11"}
  transform-es2015-arrow-functions {"ie":"11"}
  transform-es2015-block-scoping {"ie":"11"}
  transform-es2015-classes {"ie":"11"}
  transform-es2015-computed-properties {"ie":"11"}
  transform-es2015-destructuring {"ie":"11"}
  transform-es2015-duplicate-keys {"ie":"11"}
  transform-es2015-for-of {"ie":"11"}
  transform-es2015-function-name {"ie":"11"}
  transform-es2015-literals {"ie":"11"}
  transform-es2015-object-super {"ie":"11"}
  transform-es2015-parameters {"ie":"11"}
  transform-es2015-shorthand-properties {"ie":"11"}
  transform-es2015-spread {"ie":"11"}
  transform-es2015-sticky-regex {"ie":"11"}
  transform-es2015-template-literals {"ie":"11"}
  transform-es2015-typeof-symbol {"ie":"11"}
  transform-es2015-unicode-regex {"ie":"11"}
  transform-regenerator {"ie":"11"}
  transform-exponentiation-operator {"safari":"10","ie":"11"}
  transform-async-to-generator {"safari":"10","ie":"11"}
  syntax-trailing-function-commas {"ie":"11"}

Using polyfills:
  es6.typed.array-buffer {"ie":"11"}
  es6.typed.int8-array {"ie":"11"}
  es6.typed.uint8-array {"ie":"11"}
  es6.typed.uint8-clamped-array {"ie":"11"}
  es6.typed.int16-array {"ie":"11"}
  es6.typed.uint16-array {"ie":"11"}
  es6.typed.int32-array {"ie":"11"}
  es6.typed.uint32-array {"ie":"11"}
  es6.typed.float32-array {"ie":"11"}
  es6.typed.float64-array {"ie":"11"}
  es6.map {"ie":"11"}
  es6.set {"ie":"11"}
  es6.weak-map {"ie":"11"}
  es6.weak-set {"ie":"11"}
  es6.reflect.apply {"ie":"11"}
  es6.reflect.construct {"ie":"11"}
  es6.reflect.define-property {"ie":"11"}
  es6.reflect.delete-property {"ie":"11"}
  es6.reflect.get {"ie":"11"}
  es6.reflect.get-own-property-descriptor {"ie":"11"}
  es6.reflect.get-prototype-of {"ie":"11"}
  es6.reflect.has {"ie":"11"}
  es6.reflect.is-extensible {"ie":"11"}
  es6.reflect.own-keys {"ie":"11"}
  es6.reflect.prevent-extensions {"ie":"11"}
  es6.reflect.set {"ie":"11"}
  es6.reflect.set-prototype-of {"ie":"11"}
  es6.promise {"ie":"11"}
  es6.symbol {"ie":"11"}
  es6.object.assign {"ie":"11"}
  es6.object.is {"ie":"11"}
  es6.function.name {"ie":"11"}
  es6.string.raw {"ie":"11"}
  es6.string.from-code-point {"ie":"11"}
  es6.string.code-point-at {"ie":"11"}
  es6.string.repeat {"ie":"11"}
  es6.string.starts-with {"ie":"11"}
  es6.string.ends-with {"ie":"11"}
  es6.string.includes {"ie":"11"}
  es6.regexp.flags {"ie":"11"}
  es6.regexp.match {"ie":"11"}
  es6.regexp.replace {"ie":"11"}
  es6.regexp.split {"ie":"11"}
  es6.regexp.search {"ie":"11"}
  es6.array.from {"ie":"11"}
  es6.array.of {"ie":"11"}
  es6.array.copy-within {"ie":"11"}
  es6.array.find {"ie":"11"}
  es6.array.find-index {"ie":"11"}
  es6.array.fill {"ie":"11"}
  es6.array.iterator {"ie":"11"}
  es6.number.is-finite {"ie":"11"}
  es6.number.is-integer {"ie":"11"}
  es6.number.is-safe-integer {"ie":"11"}
  es6.number.is-nan {"ie":"11"}
  es6.number.epsilon {"ie":"11"}
  es6.number.min-safe-integer {"ie":"11"}
  es6.number.max-safe-integer {"ie":"11"}
  es6.math.acosh {"ie":"11"}
  es6.math.asinh {"ie":"11"}
  es6.math.atanh {"ie":"11"}
  es6.math.cbrt {"ie":"11"}
  es6.math.clz32 {"ie":"11"}
  es6.math.cosh {"ie":"11"}
  es6.math.expm1 {"ie":"11"}
  es6.math.fround {"ie":"11"}
  es6.math.hypot {"ie":"11"}
  es6.math.imul {"ie":"11"}
  es6.math.log1p {"ie":"11"}
  es6.math.log10 {"ie":"11"}
  es6.math.log2 {"ie":"11"}
  es6.math.sign {"ie":"11"}
  es6.math.sinh {"ie":"11"}
  es6.math.tanh {"ie":"11"}
  es6.math.trunc {"ie":"11"}
  es7.array.includes {"ie":"11"}
  es7.object.values {"safari":"10","ie":"11"}
  es7.object.entries {"safari":"10","ie":"11"}
  es7.object.get-own-property-descriptors {"safari":"10","ie":"11"}
  es7.string.pad-start {"ie":"11"}
  es7.string.pad-end {"ie":"11"}
  web.timers {"safari":"10","ie":"11"}
  web.immediate {"safari":"10","ie":"11"}
  web.dom.iterable {"safari":"10","ie":"11"}

Sin embargo, en tiempo de ejecución, sigo recibiendo el error en IE11 cuando llamo al método .find () en una matriz.

¿Hay algo que pueda hacer para verificar que los polyfills se inyecten correctamente?

bug

Comentario más útil

La única solución que tengo es agregar un layout.js personalizado y agregar
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

Todos 34 comentarios

La única solución que tengo es agregar un layout.js personalizado y agregar
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

@arunoda Hemos visto esto antes, ¿verdad?

Como solución urgente, puede hacer esto:

import 'core-js/fn/array/find'

const test = ['hi', 'there'].find(item => item === 'hi')

export default () => (
  <div>{test}, welcome to next.js!</div>
)

Déjame ver qué está pasando aquí.

Verifiqué esto con una aplicación de babel normal y el comportamiento es el mismo.
Necesita agregar el polyfill como mencioné anteriormente.

Entonces, estoy cerrando esto ya que no es exactamente un problema específico de Next.

Pero me abro a más sugerencias.
Siéntete libre de volver a abrir.

@arunoda Probé esta revisión con import 'core-js/fn/array/find' dentro de _document.js para corregirla para todos los archivos, pero no funcionó para IE11.

Tuve que ir con la solución para incluirlo así:
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

Estoy usando Next.js V3.0.6.

¿Alguna idea de cómo podría resolver esto de una manera mejor?

Oigan todos.
He experimentado con la propiedad de entrada en next.config.js .
Esto es lo que tengo
(según https://github.com/zeit/next.js/blob/master/server/build/webpack.js#L42):

module.exports = {
  // eslint-disable-next-line no-unused-vars
  webpack(config, _) {
    const entry = async () => {
      const resolvedEntry = await config.entry()
      const entryWithPolyfill = Object.assign(
        { 'babel-polyfill': ['babel-polyfill'] },
        resolvedEntry
      )
      // console.log(entryWithPolyfill)
      return entryWithPolyfill
    }
    return Object.assign(
      config,
      entryWithPolyfill
    )
  }
}

Lamentablemente, este archivo no será transpilado por babel, por lo que todavía no funciona .

¿Lo mejor sería incluir babel-polyfill en la configuración del paquete web de Next? Es bastante común incluirlo.

@arunoda ¿qué opinas?

alguna actualización sobre esto? Incluir el polyfill no es la mejor solución

También interesado en esto 🤔

Arreglé esta importación de polyfills de babel:

import 'babel-polyfill';

Importar el babel-polyfill completo es extremadamente derrochador y sería un mal valor predeterminado para next.js, en mi humilde opinión. Agrega 87kb al paquete sin importar si realmente necesita alguna de las funciones de relleno múltiple o no.

@sholzmayer, ¿dónde usó import 'babel-polyfill'; ? Probé en _document.js pero no ayudó

@klaemo, ¿cuál es tu sugerencia?

Agregar los complementos transform-runtime a .babelrc parece ser suficiente para mí. Estamos desarrollando una aplicación para Opera 36 que no tiene Object.entries integradas.

"plugins": [
    "transform-runtime"
]

@hugotox como desarrollador de aplicaciones, puede usar https://polyfill.io para cargar solo los polyfills necesarios o hacerlo manualmente. En nuestra aplicación tenemos un polyfills.js que se parece a esto:

// Language features presented by https://github.com/zloirock/core-js
import 'core-js/fn/object/assign'
import 'core-js/fn/string/ends-with'
import 'core-js/fn/string/starts-with'
import 'core-js/fn/string/includes'
import 'core-js/fn/array/includes'
import 'core-js/fn/weak-map'

// browser features
import 'raf/polyfill'
import 'isomorphic-fetch'
import 'js-polyfills/url'

Alternativamente, nextjs podría importar y agrupar todos los polyfills que necesita desde core-js .

@igimanaloto esta solución funcionó para mí

También utilizo el complemento transform-runtime pero recibo el error en IE por alguna razón.

{
  "plugins": [
    "source-map-support",
    "transform-runtime"
  ],
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }],
    ["stage-3"],
    [
      "next/babel",
      {
        "styled-jsx": {
          "optimizeForSpeed": true,
          "vendorPrefixes": true,
          "sourceMaps": true,
          "plugins": [
            "styled-jsx-plugin-sass"
          ]
        }
      }
    ]
  ]
}

@bliitzkrieg No importe babel-polyfill en _document.js , porque _document.js solo se procesa en el servidor.

Por lo general, se recomienda incluirlo en su diseño, básicamente cualquier archivo que se cargue en todas las páginas funcionará bien.

Actualización: se corrigió mi ejemplo para IE 10, 11: se cambió la dependencia core-js/library/fn/object/assign en client/polyfill.js a core-js/fn/object/assign (cómo lo tenía


Aquí hay un intento next 5.1.0 Dockerized de emplear una combinación del enfoque indicado por @klaemo arriba y un ejemplo oficial, canary / examples / with-polyfills :

[Pregunta original] ¿Cuál es el uso de core-js en mi archivo client / polyfills.js que me da IE11? (Podría esperar que el enfoque proceda de una importación que cubra todo lo que falta en IE11 y luego reduzca gradualmente el rango a los elementos que la aplicación necesita).

Aquí está el resultado inicial . Verifiqué el resultado en algunas combinaciones de SO + navegador (en Browserstack) y falla cuando fallaba en Windows 10 + IE11 (que se muestra a continuación), y tal vez otras combinaciones de IE.

screen shot 2018-04-21 at 3 49 31 pm

Estaba intentando ejecutar next 5.1.0 en Chrome 43 con un servidor personalizado, .babelrc y configuración de paquete web. import 'core-js/fn/object/assign'; hizo el truco.

¡Parece que este error todavía existe! Estoy enfrentando el mismo problema en IE 11 y ninguna de las soluciones está ayudando. Los problemas parecen ser el paquete ansi-regex que usa una función de flecha y esta es una dependencia de next.js.

@arunoda @timneutkens ¿podemos reabrir este problema?

Sí, todavía existe. Estoy usando resoluciones de hilo para degradar

import 'core-js/fn/object/assign' funcionó para mí.

Tuve que agregar core-js primero ( yarn add core-js ), por supuesto.

Encontré esto útil: https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11- (o más antiguo)

Agregue una documentación oficial sobre la transpilación de ES6 para módulos de nodo.

Aquí hay una solución, pero este error debe reabrirse. @arunoda

Tuve errores con Object.assign, String.endsWith en ie11 (en [email protected])

const {basedir} = require ('./ server / config');

// polyfills necesarios para navegadores no perennes (principalmente, p. ej.)
const polyfills = [
'core-js / fn / object / assign',
'core-js / fn / string / ends-with',
'core-js / fn / string / starts-with',
'core-js / fn / string / includes',
'core-js / fn / array / includes',
'core-js / fn / débil-mapa',
];

module.exports = {
  webpack: (config, {dev, isServer}) => {
    const originalEntry = config.entry;
    if (!isServer) {
      config.entry = async () => {
        const entries = await originalEntry();
        Object.values(entries).forEach(entry => {
          entry.unshift(...polyfills);
          if (dev) {
            entry.unshift('eventsource-polyfill');
          }
        });
        return entries;
      };
    }

    return config;
  },
};

en realidad a veces tengo

Cannot redefine non-configurable property 'endsWith'

Seguí este ejemplo para incluir polyfills.
Para que IE11 funcione, tuve que incluir estos en mi client/polyfills.js :

import 'core-js/es6/map';
import 'core-js/es6/set';

import 'core-js/fn/object/assign';
import 'core-js/fn/string/ends-with';
import 'core-js/fn/string/starts-with';
import 'core-js/fn/string/includes';
import 'core-js/fn/array/includes';
import 'core-js/fn/array/find';

import 'core-js/fn/number/is-finite';

No estoy seguro siempre que haya algunas bibliotecas que, por ejemplo, necesiten isFinite, pero mi aplicación es bastante mínima.

Esto funciona, pero es muy engorroso averiguar qué polyfills realmente se necesitan.

¿Alguien sabe qué polyfill se requiere para que la sintaxis de la clase funcione en IE11?

clase Foo se extiende ...

en su polyfills descomente 'import' core-js / es6 / object ';' línea

Seguí el ejemplo que mencionaste @peec y funcionó para mí.

@peec, ¿ es este el comportamiento esperado? ¿Por qué tendría que volver a rellenar algo que estaba incluido?

¿Fue útil esta página
0 / 5 - 0 calificaciones