Next.js: Babel polyfill ne semble pas être injecté

Créé le 5 juil. 2017  ·  34Commentaires  ·  Source: vercel/next.js

J'essaie de prendre en charge IE11 pour que mon application corrige l'erreur
TypeError: Object doesn't support property or method 'find'

Utilisation de la prochaine 2.4.6 mais ne fonctionne pas non plus sur la dernière version bêta

Ajout d'un .babelerc personnalisé avec babel-preset-env avec la configuration suivante:

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

Activé le drapeau de débogage donc au démarrage, j'obtiens le journal suivant, ce qui semble signifier que le polyfill est ajouté.

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"}

Cependant, au moment de l'exécution, j'obtiens toujours l'erreur sur IE11 lorsque j'appelle la méthode .find () sur un tableau.

Que puis-je faire pour vérifier que les polyfills sont correctement injectés?

bug

Commentaire le plus utile

Le seul correctif que j'ai est d'ajouter un layout.js personnalisé et d'ajouter
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

Tous les 34 commentaires

Le seul correctif que j'ai est d'ajouter un layout.js personnalisé et d'ajouter
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

@arunoda Nous avons vu ça avant droite 🤔

En tant que correctif, vous pouvez faire ceci:

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

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

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

Laissez-moi voir ce qui se passe ici.

J'ai vérifié cela avec une application babel normale et le comportement est le même.
Vous devez ajouter le polyfill comme je l'ai mentionné ci-dessus.

Donc, je ferme ceci car ce n'est pas exactement un problème spécifique suivant.

Mais je suis ouvert à plus de suggestions.
N'hésitez pas à rouvrir.

@arunoda J'ai essayé ce correctif avec import 'core-js/fn/array/find' dans le _document.js pour le corriger pour tous les fichiers, mais cela n'a pas fonctionné pour IE11.

Je devais choisir la solution pour l'inclure comme ceci:
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

J'utilise Next.js V3.0.6.

Une idée comment je pourrais résoudre ce problème d'une manière plus agréable?

Salut à tous.
J'ai expérimenté la propriété entry dans next.config.js .
C'est ce que j'ai
(selon 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
    )
  }
}

Malheureusement, ce fichier ne sera pas transpilé par babel, c'est pourquoi il ne fonctionne pas encore .

La meilleure chose serait d'inclure babel-polyfill dans la configuration du webpack de Next? Il est assez courant de l'inclure.

@arunoda qu'en pensez-vous?

des mises à jour à ce sujet? Inclure le polyfill n'est pas la meilleure solution

Également intéressé par ça 🤔

J'ai corrigé cette importation de polyfills babel:

import 'babel-polyfill';

Importer la totalité de babel-polyfill est extrêmement inutile et serait un mauvais défaut pour next.js, à mon humble avis. Il ajoute 87 Ko au bundle, que vous ayez réellement besoin de l'une des fonctionnalités polyfilled ou non.

@sholzmayer où avez-vous utilisé import 'babel-polyfill'; . J'ai essayé dans le _document.js mais cela n'a pas aidé

@klaemo alors quelle est votre suggestion?

Ajouter transform-runtime aux plugins .babelrc semble le faire pour moi. Nous développons une application pour Opera 36 qui n'a pas Object.entries intégré.

"plugins": [
    "transform-runtime"
]

@hugotox en tant que développeur d'applications, vous pouvez utiliser https://polyfill.io pour charger uniquement les polyfills nécessaires ou vous le faites manuellement. Dans notre application, nous avons un polyfills.js qui ressemble à ceci:

// 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'

Alternativement, nextjs pourrait importer et regrouper tous les polyfills dont il a besoin à partir de core-js .

@igimanaloto cette solution a fonctionné pour moi

J'utilise également le plugin transform-runtime mais j'obtiens l'erreur sur IE pour une raison quelconque.

{
  "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 N'importez pas babel-polyfill dans _document.js , car _document.js n'est rendu que sur le serveur.

Habituellement, il est recommandé de l'inclure dans votre mise en page, en gros, tout fichier chargé par toutes les pages fera l'affaire.

Mise à jour: Correction de mon exemple pour IE 10, 11: modification core-js/library/fn/object/assign dépendance client/polyfill.js en core-js/fn/object/assign (comment @klaemo l'a eu - raté ça!)


Voici une tentative de next 5.1.0 ancrée pour utiliser une combinaison de l'approche indiquée par @klaemo ci-dessus et d'un exemple officiel, canary / examples / with-polyfills :

[Question originale] Quelle est l'utilisation de core-js dans mon fichier client / polyfills.js qui me donne IE11? (Je peux m'attendre à ce que l'approche procède d'une importation qui couvre tout ce qui manque à IE11, puis réduit progressivement la gamme aux seuls éléments dont l'application a besoin.)

Voici le résultat initial J'ai vérifié le résultat sur quelques combinaisons OS + navigateur (sur Browserstack) et il échoue lorsqu'il échouait sur Windows 10 + IE11 (illustré ci-dessous), et peut-être d'autres combinaisons IE.

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

J'essayais d'exécuter next 5.1.0 sur chrome 43 avec un serveur personnalisé, .babelrc et une configuration webpack. import 'core-js/fn/object/assign'; fait l'affaire.

On dirait que ce bug existe toujours! Je suis confronté au même problème dans IE 11 et aucune des solutions n'aide. Les problèmes semblent être le package ansi-regex qui utilise une fonction de flèche et ceci étant une dépendance de next.js.

@arunoda @timneutkens pouvons-nous rouvrir ce numéro?

Oui existe toujours. J'utilise des résolutions de fils pour rétrograder

import 'core-js/fn/object/assign' fonctionné pour moi.

J'ai dû ajouter core-js abord ( yarn add core-js ) - bien sûr.

J'ai trouvé cela utile: https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11- (ou plus ancien)

Veuillez ajouter une documentation officielle sur la transpilation ES6 pour les modules de nœuds.

voici une solution de contournement mais ce bogue doit être rouvert. @arunoda

J'ai eu des erreurs avec Object.assign, String.endsWith sur ie11 (sur [email protected])

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

// polyfills requis pour les navigateurs non persistants (principalement ie)
const polyfills = [
'core-js / fn / object / assign',
'core-js / fn / string / ends-with',
'core-js / fn / string / commence par',
'core-js / fn / string / includes',
'core-js / fn / array / includes',
'core-js / fn / faible-map',
];

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 fait je reçois parfois

Cannot redefine non-configurable property 'endsWith'

J'ai suivi cet exemple pour inclure des polyfills.
Pour que IE11 fonctionne, je devais les inclure dans mon 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';

Je ne suis pas sûr à chaque fois que certaines bibliothèques sont nécessaires, par exemple, isFinite, mais mon application est assez minime.

Cela fonctionne, mais il est très difficile de déterminer quels polyfills sont réellement nécessaires.

quelqu'un sait quel polyfill est requis pour que la syntaxe de classe fonctionne dans IE11?

la classe Foo s'étend ...

dans vos polyfills décommentez 'import' core-js / es6 / object ';' ligne

J'ai suivi l'exemple que vous avez mentionné @peec et cela a fonctionné pour moi.

@peec est-ce le comportement attendu? Pourquoi aurais-je besoin de re-polyfill quelque chose qui était inclus?

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

wagerfield picture wagerfield  ·  3Commentaires

formula349 picture formula349  ·  3Commentaires

pie6k picture pie6k  ·  3Commentaires

havefive picture havefive  ·  3Commentaires

sospedra picture sospedra  ·  3Commentaires