Next.js: Babelポリフィルが注入されていないようです

作成日 2017年07月05日  ·  34コメント  ·  ソース: vercel/next.js

エラーを修正するために、アプリでIE11をサポートしようとしています
TypeError: Object doesn't support property or method 'find'

次の2.4.6を使用していますが、最新のベータ版では機能していません

次の設定でbabel-preset-envと一緒にカスタム.babelercを追加しました:

{
  "presets": [
    "es2015",
    "react",
    "next/babel",
    "stage-0",
    [ "env", {
      "targets": {
        "safari": 10,
        "ie": 11
      },
      "modules": false,
      "useBuiltIns": true,
      "debug": true
    }]
  ],
}

デバッグフラグを有効にしたので、起動時に次のログが表示されます。これは、ポリフィルが追加されたことを意味しているようです。

babel-preset-env: `DEBUG` option

Using targets:
{
  "safari": "10",
  "ie": "11"
}

Modules transform: false

Using plugins:
  check-es2015-constants {"ie":"11"}
  transform-es2015-arrow-functions {"ie":"11"}
  transform-es2015-block-scoping {"ie":"11"}
  transform-es2015-classes {"ie":"11"}
  transform-es2015-computed-properties {"ie":"11"}
  transform-es2015-destructuring {"ie":"11"}
  transform-es2015-duplicate-keys {"ie":"11"}
  transform-es2015-for-of {"ie":"11"}
  transform-es2015-function-name {"ie":"11"}
  transform-es2015-literals {"ie":"11"}
  transform-es2015-object-super {"ie":"11"}
  transform-es2015-parameters {"ie":"11"}
  transform-es2015-shorthand-properties {"ie":"11"}
  transform-es2015-spread {"ie":"11"}
  transform-es2015-sticky-regex {"ie":"11"}
  transform-es2015-template-literals {"ie":"11"}
  transform-es2015-typeof-symbol {"ie":"11"}
  transform-es2015-unicode-regex {"ie":"11"}
  transform-regenerator {"ie":"11"}
  transform-exponentiation-operator {"safari":"10","ie":"11"}
  transform-async-to-generator {"safari":"10","ie":"11"}
  syntax-trailing-function-commas {"ie":"11"}

Using polyfills:
  es6.typed.array-buffer {"ie":"11"}
  es6.typed.int8-array {"ie":"11"}
  es6.typed.uint8-array {"ie":"11"}
  es6.typed.uint8-clamped-array {"ie":"11"}
  es6.typed.int16-array {"ie":"11"}
  es6.typed.uint16-array {"ie":"11"}
  es6.typed.int32-array {"ie":"11"}
  es6.typed.uint32-array {"ie":"11"}
  es6.typed.float32-array {"ie":"11"}
  es6.typed.float64-array {"ie":"11"}
  es6.map {"ie":"11"}
  es6.set {"ie":"11"}
  es6.weak-map {"ie":"11"}
  es6.weak-set {"ie":"11"}
  es6.reflect.apply {"ie":"11"}
  es6.reflect.construct {"ie":"11"}
  es6.reflect.define-property {"ie":"11"}
  es6.reflect.delete-property {"ie":"11"}
  es6.reflect.get {"ie":"11"}
  es6.reflect.get-own-property-descriptor {"ie":"11"}
  es6.reflect.get-prototype-of {"ie":"11"}
  es6.reflect.has {"ie":"11"}
  es6.reflect.is-extensible {"ie":"11"}
  es6.reflect.own-keys {"ie":"11"}
  es6.reflect.prevent-extensions {"ie":"11"}
  es6.reflect.set {"ie":"11"}
  es6.reflect.set-prototype-of {"ie":"11"}
  es6.promise {"ie":"11"}
  es6.symbol {"ie":"11"}
  es6.object.assign {"ie":"11"}
  es6.object.is {"ie":"11"}
  es6.function.name {"ie":"11"}
  es6.string.raw {"ie":"11"}
  es6.string.from-code-point {"ie":"11"}
  es6.string.code-point-at {"ie":"11"}
  es6.string.repeat {"ie":"11"}
  es6.string.starts-with {"ie":"11"}
  es6.string.ends-with {"ie":"11"}
  es6.string.includes {"ie":"11"}
  es6.regexp.flags {"ie":"11"}
  es6.regexp.match {"ie":"11"}
  es6.regexp.replace {"ie":"11"}
  es6.regexp.split {"ie":"11"}
  es6.regexp.search {"ie":"11"}
  es6.array.from {"ie":"11"}
  es6.array.of {"ie":"11"}
  es6.array.copy-within {"ie":"11"}
  es6.array.find {"ie":"11"}
  es6.array.find-index {"ie":"11"}
  es6.array.fill {"ie":"11"}
  es6.array.iterator {"ie":"11"}
  es6.number.is-finite {"ie":"11"}
  es6.number.is-integer {"ie":"11"}
  es6.number.is-safe-integer {"ie":"11"}
  es6.number.is-nan {"ie":"11"}
  es6.number.epsilon {"ie":"11"}
  es6.number.min-safe-integer {"ie":"11"}
  es6.number.max-safe-integer {"ie":"11"}
  es6.math.acosh {"ie":"11"}
  es6.math.asinh {"ie":"11"}
  es6.math.atanh {"ie":"11"}
  es6.math.cbrt {"ie":"11"}
  es6.math.clz32 {"ie":"11"}
  es6.math.cosh {"ie":"11"}
  es6.math.expm1 {"ie":"11"}
  es6.math.fround {"ie":"11"}
  es6.math.hypot {"ie":"11"}
  es6.math.imul {"ie":"11"}
  es6.math.log1p {"ie":"11"}
  es6.math.log10 {"ie":"11"}
  es6.math.log2 {"ie":"11"}
  es6.math.sign {"ie":"11"}
  es6.math.sinh {"ie":"11"}
  es6.math.tanh {"ie":"11"}
  es6.math.trunc {"ie":"11"}
  es7.array.includes {"ie":"11"}
  es7.object.values {"safari":"10","ie":"11"}
  es7.object.entries {"safari":"10","ie":"11"}
  es7.object.get-own-property-descriptors {"safari":"10","ie":"11"}
  es7.string.pad-start {"ie":"11"}
  es7.string.pad-end {"ie":"11"}
  web.timers {"safari":"10","ie":"11"}
  web.immediate {"safari":"10","ie":"11"}
  web.dom.iterable {"safari":"10","ie":"11"}

ただし、実行時に、配列で.find()メソッドを呼び出すと、IE11でエラーが発生します。

ポリフィルが正しく注入されていることを再確認するためにできることはありますか?

bug

最も参考になるコメント

私が持っている唯一の修正は、カスタムlayout.jsを追加して追加することです
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

全てのコメント34件

サンプルプロジェクト@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アプリでこれを確認しましたが、動作は同じです。
上で述べたように、ポリフィルを追加する必要があります。

それで、これは次の特定の問題ではないので、これを閉じます。

しかし、私はより多くの提案を受け入れます。
自由に再開してください。

@arunoda _document.js内のimport 'core-js/fn/array/find'この修正プログラムを試し、すべてのファイルで修正しましたが、IE11では機能しませんでした。

私はこのようにそれを含めるためにソリューションを使わなければなりませんでした:
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

Next.jsV3.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どう思いますか?

これに関する更新はありますか? ポリフィルを含めることは最善の解決策ではありません

これにも興味があります🤔

私はこのインポートするbabelポリフィルを修正しました:

import 'babel-polyfill';

babel-polyfill全体をインポートすることは非常に無駄であり、next.js、imhoのデフォルトとしては不適切です。 ポリフィルされた機能が実際に必要かどうかに関係なく、バンドルに87kbが追加されます。

@sholzmayerどこでimport 'babel-polyfill';を使用しましたか。 _document.jsで試しましたが、役に立ちませんでした

@klaemoでは、あなたの提案は何ですか?

transform-runtime.babelrcプラグインに追加すると、私にとってはうまくいくようです。 Object.entriesが組み込まれていないOpera36用のアプリを開発しています。

"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 _document.jsはサーバー上でのみレンダリングされるため、 _document.jsbabel-polyfillをインポートしないでください。

通常、レイアウトに含めることをお勧めします。基本的に、すべてのページで読み込まれるファイルであれば問題ありません。

アップデート:IE 10、11のためのcore-js/library/fn/object/assign依存関係でclient/polyfill.jscore-js/fn/object/assign (@klaemoがあることも見逃せましたか!)


これは、上記の@klaemoで示されたアプローチと、公式の例であるcanary / examples / with-polyfillsの組み合わせを使用する、Docker化されたnext 5.1.0試みです

[元の質問] IE11を取得するcore-jsの使用法は何ですか? (IE11にないものすべてをカバーするインポートからアプローチが進み、アプリが必要とするアイテムだけに範囲が徐々に絞り込まれていくことを期待するかもしれません。)

これが私がいくつかのOS +ブラウザーの組み合わせ(Browserstack上)結果をチェックした最初で失敗したときに失敗します。

screen shot 2018-04-21 at 3 49 31 pm

カスタムサーバー、.babelrc、webpackconfigを使用してChrome43で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トランスパイルに関する公式ドキュメントを追加してください。

これは回避策ですが、このバグを再度開く必要があります。 @arunoda

IE11([email protected])のObject.assign、String.endsWithでエラーが発生しました

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

//非常緑ブラウザに必要なポリフィル(主にie)
const polyfills = [
'core-js / fn / object / assign'、
'core-js / fn / string / extends-with'、
'core-js / fn / string / startups-with'、
'core-js / fn / string / include'、
'core-js / fn / array / include'、
'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はこれが予想される動作ですが? 含まれているものを再ポリフィルする必要があるのはなぜですか?

このページは役に立ちましたか?
0 / 5 - 0 評価