Next.js: Полифилл Babel не вводится

Пример проекта @ 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>
)

Дай мне посмотреть, что здесь происходит.

Я проверил это с помощью обычного приложения babel, и поведение такое же.
Вам нужно добавить полифилл, как я упоминал выше.

Итак, я закрываю это, поскольку это не совсем конкретная проблема Next.

Но я открыт для других предложений.
Не стесняйтесь открывать заново.

@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.

Любая идея, как я могу решить эту проблему лучше?

Всем привет.
Я экспериментировал со свойством entry в 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, поэтому он пока не работает .

Лучше всего было бы включить babel-polyfill в конфигурацию веб-пакета Next? Его включать довольно часто.

@arunoda что ты думаешь?

какие-нибудь обновления по этому поводу? Включение полифила - не лучшее решение

Тоже интересует 🤔

Я исправил этот импорт полифиллов babel:

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 только для загрузки необходимых полифиллов или делать это вручную. В нашем приложении есть 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 может импортировать и связывать все необходимые полифиллы из 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 отображается только на сервере.

Обычно рекомендуется включать его в свой макет, в основном любой файл, загружаемый всеми страницами, подойдет.

Обновление: исправлен мой пример для IE 10, 11: изменена зависимость core-js/library/fn/object/assign в client/polyfill.js на core-js/fn/object/assign (как это было у

Вот Dockerized next 5.1.0 попытка использовать комбинацию подхода, указанного выше @klaemo, и официального примера, canary / examples / with-polyfills :

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

[Исходный вопрос] Какое использование core-js в моем файле client / polyfills.js дает мне IE11? (Я мог бы ожидать, что подход будет исходить из импорта, который охватывает все, что отсутствует в IE11, а затем постепенно сокращает диапазон до тех элементов, которые нужны приложению.)

Вот первоначальный результат. Я проверил результат в нескольких комбинациях ОС + браузер (в стеке браузера), и он не работает, когда он не работает в Windows 10 + IE11 (показано ниже) и, возможно, в других комбинациях IE.

Я пытался запустить next 5.1.0 на chrome 43 с настраиваемым сервером, конфигурацией .babelrc и webpack. import 'core-js/fn/object/assign'; сделали свое дело.

Кажется, эта ошибка все еще существует! Я столкнулся с той же проблемой в IE 11, и ни одно из решений не помогает. Проблемы, похоже, связаны с пакетом ansi-regex, который использует стрелочную функцию, и это является зависимостью от next.js.

@arunoda @timneutkens, можем ли мы снова открыть эту проблему?

Да еще существует. Я использую разрешение пряжи для понижения версии

import 'core-js/fn/object/assign' у меня тоже сработало.

Пришлось сначала добавить core-js ( yarn add core-js ) - конечно.

Я нашел это полезным: https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11- (или старше)

Добавьте официальную документацию о транспиляции ES6 для узловых модулей.

вот обходной путь, но эту ошибку необходимо повторно открыть. @arunoda

у меня были ошибки с Object.assign, String.endsWith на ie11 (на [email protected])

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

// полифиллы, необходимые для не вечнозеленых браузеров (в основном, т.е.)
const polyfills = [
'core-js / fn / object / assign',
'core-js / fn / string / заканчивается на',
'core-js / fn / строка / начинается с',
'core-js / fn / string / includes',
'core-js / fn / array / includes',
'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;
  },
};

на самом деле я иногда получаю

Cannot redefine non-configurable property 'endsWith'

Я последовал этому примеру и включил полифиллы.
Чтобы 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';

Я не уверен, есть ли какие-то библиотеки, которые, например, нужны isFinite, но мое приложение довольно минималистично.

Это работает, но очень сложно определить, какие полифилы действительно нужны.

кто-нибудь знает, какой полифилл необходим, чтобы синтаксис класса работал в IE11?

класс Foo расширяется ...

раскомментируйте в полифиллах 'import' core-js / es6 / object ';' линия

Я последовал примеру, который вы упомянули @peec, и у меня это сработало.

@peec , это ожидаемое поведение? Зачем мне нужно повторно заполнять полифиллом то, что было включено?