Next.js: Babel polyfill sepertinya tidak disuntikkan

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

Satu-satunya perbaikan yang saya miliki adalah menambahkan layout.js kustom dan menambahkan
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

@arunoda Kami telah melihat ini sebelumnya, kan 🤔

Sebagai solusi cepat, Anda dapat melakukan ini:

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

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

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

Biar saya lihat apa yang terjadi di sini.

Saya memeriksanya dengan aplikasi babel normal dan perilakunya sama.
Anda perlu menambahkan polyfill seperti yang saya sebutkan di atas.

Jadi, saya menutup ini karena ini bukan masalah spesifik Berikutnya.

Tapi saya terbuka untuk lebih banyak saran.
Jangan ragu untuk membuka kembali.

@arunoda Saya mencoba perbaikan terbaru ini dengan import 'core-js/fn/array/find' di dalam _document.js untuk memperbaikinya untuk semua file tetapi tidak berhasil untuk IE11.

Saya harus menggunakan solusi untuk memasukkannya seperti ini:
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

Saya menggunakan Next.js V3.0.6.

Ada ide bagaimana saya bisa menyelesaikan ini dengan cara yang lebih baik?

Hai semua.
Saya telah bereksperimen dengan entry-property di next.config.js .
Inilah yang saya punya
(menurut 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
    )
  }
}

Sayangnya file ini tidak akan ditranspilasi oleh babel, oleh karena itu file ini belum berfungsi .

Hal terbaik adalah memasukkan babel-polyfill dalam konfigurasi webpack Next? Sangat umum untuk memasukkannya.

@arunoda bagaimana menurut Anda?

ada pembaruan tentang ini? Menyertakan polyfill bukanlah solusi terbaik

Juga tertarik dengan ini 🤔

Saya memperbaiki polyfill babel impor ini:

import 'babel-polyfill';

Mengimpor seluruh babel-polyfill sangat boros dan akan menjadi default yang buruk untuk next.js, imho. Itu menambahkan 87kb ke bundel tidak peduli apakah Anda benar-benar membutuhkan fitur polyfilled atau tidak.

@sholzmayer di mana Anda menggunakan import 'babel-polyfill'; . Saya mencoba di _document.js tetapi tidak membantu

@klaemo jadi apa saran Anda?

Menambahkan transform-runtime ke .babelrc plugin sepertinya berhasil untuk saya. Kami sedang mengembangkan aplikasi untuk Opera 36 yang tidak memiliki Object.entries bawaan.

"plugins": [
    "transform-runtime"
]

@hugotox sebagai pengembang aplikasi, Anda dapat menggunakan https://polyfill.io untuk hanya memuat polyfill yang diperlukan atau Anda melakukannya secara manual. Di aplikasi kami, kami memiliki polyfills.js yang terlihat seperti ini:

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

Alternatifnya, nextjs dapat mengimpor dan memaketkan semua polyfill yang dibutuhkannya dari core-js .

@igimanaloto solusi ini berhasil untuk saya

Saya juga menggunakan transform-runtime plugin tetapi saya mendapatkan kesalahan pada IE karena beberapa alasan.

{
  "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 Jangan impor babel-polyfill dalam _document.js , karena _document.js hanya dirender di server.

Biasanya, disarankan untuk memasukkannya ke dalam tata letak Anda, pada dasarnya semua file yang dimuat oleh semua halaman akan berfungsi dengan baik.

Pembaruan: Memperbaiki contoh saya untuk IE 10, 11: mengubah core-js/library/fn/object/assign ketergantungan di client/polyfill.js menjadi core-js/fn/object/assign (bagaimana @klaemo memilikinya — melewatkannya!)

Ini adalah upaya Dockerized next 5.1.0 untuk menggunakan kombinasi pendekatan yang ditunjukkan oleh @klaemo di atas dan contoh resmi, canary / example

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

[Pertanyaan asli] Apa penggunaan core-js dalam file klien / polyfills.js saya yang menghasilkan IE11? (Saya mungkin mengharapkan pendekatan untuk melanjutkan dari impor yang mencakup semua IE11 yang hilang dan kemudian secara bertahap menurunkan kisaran ke hanya item yang dibutuhkan aplikasi.)

Inilah hasil awal saya memeriksa hasil pada beberapa kombinasi OS + browser (di Browserstack) dan gagal ketika gagal pada Windows 10 + IE11 (ditampilkan di bawah), dan mungkin kombinasi IE lainnya.

Saya mencoba menjalankan next 5.1.0 di chrome 43 dengan konfigurasi server khusus, .babelrc dan webpack. import 'core-js/fn/object/assign'; berhasil.

Sepertinya bug ini masih ada! Saya menghadapi masalah yang sama di IE 11 dan tidak ada solusi yang membantu. Masalah tampaknya menjadi paket ansi-regex yang menggunakan fungsi panah dan ini menjadi ketergantungan next.js.

@arunoda @timneutkens bisakah kita membuka kembali masalah ini?

Ya masih ada. Saya menggunakan resolusi benang untuk menurunkan versi

import 'core-js/fn/object/assign' berhasil untuk saya.

Harus menambahkan core-js terlebih dahulu ( yarn add core-js ) - tentu saja.

Menurut saya ini berguna: https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11- (atau lebih lama)

Tambahkan dokumentasi resmi tentang transpilasi ES6 untuk modul node.

berikut adalah solusinya, tetapi bug ini harus dibuka kembali. @aroda

saya mengalami kesalahan dengan Object.assign, String.endsWith di ie11 (di [email protected])

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

// polyfill diperlukan untuk browser non-evergreen (terutama yaitu)
const polyfills = [
'core-js / fn / object / assign',
'core-js / fn / string / diakhiri-dengan',
'core-js / fn / string / mulai-dengan',
'core-js / fn / string / termasuk',
'core-js / fn / array / termasuk',
'core-js / fn / weak-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;
  },
};

sebenarnya saya terkadang mendapatkan

Cannot redefine non-configurable property 'endsWith'

Saya mengikuti contoh ini untuk menyertakan polyfill.
Agar IE11 berfungsi, saya harus memasukkan ini ke dalam 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';

Saya tidak yakin setiap kali ada beberapa pustaka yang membutuhkan isFinite, tetapi aplikasi saya sangat minim.

Ini berfungsi, tetapi sangat rumit untuk mencari tahu polyfill apa yang sebenarnya dibutuhkan.

ada yang tahu apa polyfill yang diperlukan untuk mendapatkan sintaks kelas yang bekerja di IE11?

kelas Foo meluas ...

di polyfills Anda, hapus komentar 'import' core-js / es6 / object ';' garis

Saya mengikuti contoh yang Anda sebutkan @peec dan itu berhasil untuk saya.

@ peec, apakah ini perilaku yang diharapkan? Mengapa saya perlu mem-polyfill ulang sesuatu yang disertakan?