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>
)

让我看看这里发生了什么。

我用普通的babel应用程序检查了一下，其行为是相同的。
您需要如上所述添加polyfill。

所以，我要结束这个问题，因为这不完全是Next的特定问题。

但我愿意接受更多建议。
随时重新打开。

@arunoda我尝试在import 'core-js/fn/array/find'修复此问题，以修复所有文件，但不适用于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编译，这就是为什么它尚不起作用的原因。

最好的办法是在Next的webpack配置中包含babel-polyfill吗？ 包含它是很常见的。

@arunoda你怎么看？

有任何更新吗？ 包括polyfill不是最佳解决方案

也对此感兴趣interested

我修复了这个导入的babel polyfills：

import 'babel-polyfill';

导入整个babel-polyfill非常浪费，并且对于next.js来说是一个糟糕的默认设置，恕我直言。 无论您是否确实需要任何polyfilled功能，它都会为捆绑包增加87kb。

@sholzmayer您在哪里使用import 'babel-polyfill'; 。 我在_document.js中尝试过，但没有帮助

@klaemo那么您的建议是什么？

在transform-runtime .babelrc插件中添加transform-runtime似乎对我有用。 我们正在为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可以从core-js导入并捆绑所需的所有polyfill。

@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不要在_document.js导入babel-polyfill ，因为_document.js仅在服务器上呈现。

通常，建议将其包括在布局中，基本上所有页面加载的任何文件都可以。

更新：修复了我针对IE 10、11的core-js/library/fn/object/assign client/polyfill.js core-js/library/fn/object/assign依赖关系更改core-js/fn/object/assign （@ klaemo的用法-错过了！）

这是Dockerized next 5.1.0尝试结合上面@klaemo指示的方法和官方示例canary / examples / with-polyfills的方法：

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

[原始问题]在使我成为IE11的client / polyfills.js文件中， core-js的用法是什么？ （我可能希望该方法从导入开始，该操作涵盖了IE11缺少的所有内容，然后逐步将范围缩小到仅包含应用所需的那些项。）

这是我在几个OS +浏览器组合（在Browserstack上）上，当在Windows 10 + IE11（如下所示）以及其他IE组合上

我试图在chrome 43上使用自定义服务器.babelrc和webpack配置运行next 5.1.0 。 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 :

请添加有关用于节点模块的ES6转换的官方文档。

这是一种解决方法，但必须重新打开此错误。 @阿鲁诺达

我在ie11上的Object.assign，String.endsWith出错（在[email protected]上）

const {basedir} = require（'./ server / config'）;

//非常绿浏览器所需的polyfill（主要是）
const polyfills = [
'core-js / fn / object / assign'，
'core-js / fn / string / ends-with'，
'core-js / fn / string / starts-with'，
'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'

我按照此示例包含了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';

我不确定何时有一些库，例如需要isFinite，但是我的应用程序很小。

这是可行的，但是要弄清楚实际需要什么填充物是非常麻烦的。

有谁知道需要什么polyfill才能在IE11中使用类语法？

Foo类扩展...

在您的polyfills中取消注释'import'core-js / es6 / object';' 线

我遵循了您提到的@peec的示例，它对我

@peec这是预期的行为吗？ 为什么我需要重新填充其中包含的内容？