Next.js: لا يبدو أن مادة Babel polyfill يتم حقنها

نموذج لمشروع @ https://github.com/jonaswindey/next-polyfill-bug

الإصلاح الوحيد الذي لدي هو إضافة ملف layout.js مخصص وإضافة
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

arunoda لقد رأينا هذا قبل الحق 🤔

كإصلاح سريع يمكنك القيام بذلك:

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

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

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

اسمحوا لي أن أرى ما يجري هنا.

لقد تحققت من هذا باستخدام تطبيق بابل العادي وكان السلوك هو نفسه.
تحتاج إلى إضافة polyfill كما ذكرت أعلاه.

لذا ، أنا أغلق هذا نظرًا لأنه ليس بالضبط مشكلة تالية محددة.

لكنني منفتح على المزيد من الاقتراحات.
لا تتردد في إعادة الفتح.

arunoda لقد جربت هذا الإصلاح العاجل باستخدام import 'core-js/fn/array/find' داخل _document.js لإصلاحه لجميع الملفات ولكنه لم ينجح مع IE11.

كان علي أن أذهب مع الحل لإدراجه على النحو التالي:
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

أنا أستخدم Next.js V3.0.6.

أي فكرة كيف يمكنني حل هذا بطريقة أجمل؟

مرحبا جميعا.
لقد جربت خاصية الإدخال في next.config.js .
هذا ما لدي
(وفقًا لـ 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
    )
  }
}

للأسف لن يتم نقل هذا الملف بواسطة بابل ، ولهذا السبب لم يعمل بعد .

أفضل شيء هو تضمين babel-polyfill في تهيئة webpack الخاصة بـ Next؟ من الشائع تضمينها.

arunoda ما رأيك؟

أي تحديثات على هذا؟ بما في ذلك polyfill ليس هو الحل الأفضل

مهتم أيضًا بهذا 🤔

لقد أصلحتُ بوليفيل بابل المستورد هذا:

import 'babel-polyfill';

يعد استيراد babel-polyfill بالكامل إهدارًا كبيرًا وسيكون افتراضيًا سيئًا لـ next.js ، imho. يضيف 87 كيلو بايت إلى الحزمة بغض النظر عما إذا كنت تحتاج بالفعل إلى أي من الميزات المتعددة التعبئة أم لا.

sholzmayer أين استخدمت import 'babel-polyfill'; . حاولت في _document.js لكن ذلك لم يساعد

@ klaemo فما هو اقتراحك؟

يبدو أن إضافة مكونات إضافية transform-runtime إلى .babelrc تفعل ذلك من أجلي. نعمل على تطوير تطبيق لـ Opera 36 لا يحتوي على Object.entries مضمنة.

"plugins": [
    "transform-runtime"
]

hugotox كمطور تطبيقات ، يمكنك استخدام https://polyfill.io لتحميل polyfill المطلوبة فقط أو القيام بذلك يدويًا. في تطبيقنا ، لدينا polyfills.js يبدو شيئًا كالتالي:

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

بدلاً من ذلك ، يمكن لـ nextjs استيراد وتجميع جميع polyfills التي تحتاجها من core-js .

igimanaloto هذا الحل

أستخدم أيضًا المكوِّن الإضافي transform-runtime ولكني أتلقى الخطأ على 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 لا تستورد babel-polyfill في _document.js ، لأن _document.js يتم عرضه على الخادم فقط.

عادة ، يوصى بتضمينه في التخطيط الخاص بك ، أي ملف يتم تحميله بواسطة جميع الصفحات سيكون جيدًا بشكل أساسي.

تحديث: تم إصلاح المثال الخاص core-js/library/fn/object/assign في client/polyfill.js إلى core-js/fn/object/assign (كيف حصل @ klaemo - فقد ذلك!)

إليك محاولة Dockerized next 5.1.0 لتوظيف مزيج من النهج المشار إليه بواسطة klaemo أعلاه ومثال رسمي ، canary / أمثلة / with-polyfills :

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

[السؤال الأصلي] ما هو استخدام core-js في ملف client / polyfills.js الخاص بي الذي أحضر لي IE11؟ (قد أتوقع أن يبدأ النهج من الاستيراد الذي يغطي كل شيء مفقود IE11 ثم ينزلق تدريجيًا إلى أسفل النطاق إلى العناصر التي يحتاجها التطبيق فقط.)

ها هي النتيجة الأولية التي تحققت من النتيجة على عدد قليل من مجموعات متصفح OS + (على Browserstack) وفشلت عندما فشلت في Windows 10 + IE11 (كما هو موضح أدناه) ، وربما مجموعات IE الأخرى.

كنت أحاول تشغيل next 5.1.0 على chrome 43 باستخدام خادم مخصص و .babelrc و webpack config. فعل import 'core-js/fn/object/assign'; الحيلة.

يبدو أن هذا الخطأ لا يزال موجودًا! أواجه نفس المشكلة في IE 11 ولا يساعد أي من الحلول. يبدو أن المشاكل هي حزمة ansi-regex التي تستخدم وظيفة السهم وهذا من تبعية next.js.

arunodatimneutkens هل يمكننا إعادة فتح هذه المشكلة؟

نعم لا يزال موجودا. أنا أستخدم قرارات الغزل لتقليل المستوى

عملت معي أيضًا import 'core-js/fn/object/assign' .

اضطررت إلى إضافة core-js أولاً ( yarn add core-js ) - بالطبع.

لقد وجدت هذا مفيدًا: https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11- (أو أقدم)

يرجى إضافة وثائق رسمية حول الترشيح ES6 لوحدات العقد.

هنا حل بديل ولكن يجب إعادة فتح هذا الخطأ. تضمين التغريدة

لدي أخطاء في Object.assign و String.endsWith في ie11 (في [email protected])

const {basedir} = تتطلب ('./ server / config') ؛

// polyfills المطلوبة للمتصفحات غير دائمة الخضرة (ie بشكل أساسي)
polyfills const = [
"core-js / fn / object / assign" ،
"core-js / fn / string / end-with" ،
"core-js / fn / string / begin-with" ،
"core-js / fn / string / include" ،
"core-js / fn / array / include" ،
"core-js / fn / slow-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;
  },
};

في الواقع أحصل عليه في بعض الأحيان

Cannot redefine non-configurable property 'endsWith'

لقد اتبعت هذا المثال لتضمين polyfills.
لكي يعمل IE11 ، اضطررت إلى تضمينها في 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';

لست متأكدًا متى كانت هناك بعض المكتبات التي تحتاج على سبيل المثال إلى محدودة ، لكن تطبيقي ضئيل للغاية.

هذا يعمل ، ولكنه مرهق للغاية لمعرفة ما هي الحشوات المطلوبة بالفعل.

أي شخص يعرف ما هو بوليفيل المطلوب لجعل بناء الجملة يعمل في IE11؟

تمتد فئة Foo ...

في polyfills uncomment "import" core-js / es6 / object "؛" خط

لقد اتبعت المثال الذي ذكرته peec وقد

peec هل هذا هو السلوك المتوقع ، مع ذلك؟ لماذا أحتاج إلى إعادة ملء شيء تم تضمينه؟