Next.js: Babel Polyfill scheint nicht injiziert zu werden

Beispielprojekt @ https://github.com/jonaswindey/next-polyfill-bug

Die einzige Lösung, die ich habe, ist das Hinzufügen einer benutzerdefinierten layout.js und das Hinzufügen
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

@arunoda Wir haben das schon mal gesehen right

Als Hotfix könnten Sie dies tun:

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

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

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

Lassen Sie mich sehen, was hier los ist.

Ich habe dies mit einer normalen Babel-App überprüft und das Verhalten ist das gleiche.
Sie müssen die Polyfüllung wie oben erwähnt hinzufügen.

Ich schließe dies ab, da es sich nicht gerade um ein Next-spezifisches Problem handelt.

Aber ich bin offen für weitere Vorschläge.
Fühlen Sie sich frei, wieder zu öffnen.

@arunoda Ich habe versucht, diesen Hotfix mit import 'core-js/fn/array/find' in der Datei _document.js für alle Dateien zu reparieren, aber für IE11 hat es nicht funktioniert.

Ich musste mich für die Lösung entscheiden, um sie wie folgt einzuschließen:
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

Ich verwende Next.js V3.0.6.

Irgendeine Idee, wie ich das besser lösen könnte?

Hallo zusammen.
Ich habe mit der entry-Eigenschaft in next.config.js experimentiert.
Das habe ich
(gemäß 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
    )
  }
}

Leider wird diese Datei nicht von babel transpiliert, weshalb sie noch nicht funktioniert .

Das Beste wäre, babel-polyfill in die Webpack-Konfiguration von Next aufzunehmen? Es ist durchaus üblich, es aufzunehmen.

@arunoda was denkst du?

irgendwelche Updates dazu? Das Einschließen der Polyfüllung ist nicht die beste Lösung

Auch daran interessiert 🤔

Ich habe diese importierenden Babel-Polyfills behoben:

import 'babel-polyfill';

Das Importieren des gesamten babel-polyfill ist äußerst verschwenderisch und wäre ein schlechter Standard für next.js, imho. Es fügt dem Bundle 87 KB hinzu, unabhängig davon, ob Sie tatsächlich eine der polygefüllten Funktionen benötigen oder nicht.

@sholzmayer wo hast du import 'babel-polyfill'; ? Ich habe es in der Datei _document.js versucht, aber es hat nicht geholfen

@klaemo also was ist dein vorschlag?

Das Hinzufügen von transform-runtime zu .babelrc Plugins scheint es für mich zu tun. Wir entwickeln eine App für Opera 36, ​​in die Object.entries nicht integriert ist.

"plugins": [
    "transform-runtime"
]

@hugotox Als App-Entwickler können Sie https://polyfill.io verwenden, um nur die benötigten Polyfills zu laden, oder Sie tun dies manuell. In unserer App haben wir ein polyfills.js , das ungefähr so ​​aussieht:

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

Alternativ könnte nextjs alle benötigten Polyfills aus core-js importieren und bündeln.

@igimanaloto Diese Lösung hat bei mir funktioniert

Ich benutze auch das Plugin transform-runtime , erhalte aber aus irgendeinem Grund den Fehler im IE.

{
  "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 Importieren Sie babel-polyfill in _document.js , da _document.js nur auf dem Server gerendert wird.

Normalerweise wird empfohlen, es in Ihr Layout aufzunehmen. Grundsätzlich reicht jede Datei aus, die von allen Seiten geladen wird.

Update: Mein Beispiel für IE 10, 11 wurde behoben: Die Abhängigkeit von core-js/library/fn/object/assign in client/polyfill.js in core-js/fn/object/assign geändert (wie

Hier ist ein Dockerized next 5.1.0 Versuch, eine Kombination aus dem von @klaemo oben angegebenen canary / examples / with- polyfills, anzuwenden :

• https://github.com/gpolyn/nextjs-polyfill

[Ursprüngliche Frage] Wie wird core-js in meiner Datei client / polyfills.js verwendet, um IE11 zu erhalten? (Ich könnte erwarten, dass der Ansatz von einem Import ausgeht, der alles abdeckt, was IE11 fehlt, und dann den Bereich schrittweise auf die Elemente reduziert, die die App benötigt.)

Hier ist das erste Ergebnis. Ich habe das Ergebnis bei einigen OS + Browserkombinationen (auf Browserstack) und es schlägt fehl, wenn es unter Windows 10 + IE11 (siehe unten) und möglicherweise anderen IE-Kombinationen fehlschlug.

Ich habe versucht, next 5.1.0 auf Chrome 43 mit einem benutzerdefinierten Server, .babelrc und einer Webpack-Konfiguration auszuführen. import 'core-js/fn/object/assign'; hat es geschafft.

Dieser Fehler scheint immer noch zu bestehen! Ich habe das gleiche Problem in IE 11 und keine der Lösungen hilft. Probleme scheinen ein ansi-regex-Paket zu sein, das eine Pfeilfunktion verwendet und dies eine Abhängigkeit von next.js ist.

@arunoda @timneutkens Können wir dieses Problem erneut öffnen?

Ja existiert noch. Ich verwende Garnauflösungen zum Downgrade

import 'core-js/fn/object/assign' hat auch für mich funktioniert.

Musste zuerst core-js hinzufügen ( yarn add core-js ) - natürlich.

Ich fand das hilfreich: https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11- (oder älter)

Bitte fügen Sie eine offizielle Dokumentation zur ES6-Transpilation für Knotenmodule hinzu.

Hier ist eine Problemumgehung, aber dieser Fehler muss erneut geöffnet werden. @arunoda

Ich hatte Fehler mit Object.assign, String.endsWith auf ie11 (auf [email protected])

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

// Polyfills für nicht immergrüne Browser erforderlich (hauptsächlich dh)
const polyfills = [
'core-js / fn / object / assign',
'core-js / fn / string / endet-mit',
'core-js / fn / string / beginnt-mit',
'core-js / fn / string / includes',
'core-js / fn / array / includes',
'core-js / fn / schwach-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;
  },
};

eigentlich bekomme ich manchmal

Cannot redefine non-configurable property 'endsWith'

Ich bin diesem Beispiel gefolgt, um Polyfills einzuschließen.
Damit IE11 funktioniert, musste ich diese in meine 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';

Ich bin mir nicht sicher, wann es einige Bibliotheken gibt, die zB isFinite benötigen, aber meine App ist ziemlich minimal.

Dies funktioniert, ist jedoch sehr umständlich, um herauszufinden, welche Polyfills tatsächlich benötigt werden.

Weiß jemand, welche Polyfüllung erforderlich ist, damit die Klassensyntax in IE11 funktioniert?

Klasse Foo erweitert ...

Kommentieren Sie in Ihren Polyfills 'import' core-js / es6 / object ';' Linie

Ich bin dem Beispiel gefolgt, das Sie @peec erwähnt

@peec ist dies jedoch das erwartete Verhalten? Warum sollte ich etwas, das enthalten war, erneut füllen?