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 모든 파일에 대해 수정하기 위해 _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.js V3.0.6을 사용하고 있습니다.

이 문제를 더 좋은 방법으로 해결할 수있는 방법이 있습니까?

모두 안녕.
next.config.js 의 entry-property를 실험했습니다.
이것은 내가 가진 것입니다
(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의 웹팩 구성에 babel-polyfill 을 포함하는 것이 가장 좋습니다. 그것을 포함하는 것은 매우 일반적입니다.

@arunoda 어떻게 생각하세요?

이것에 대한 업데이트가 있습니까? polyfill을 포함하는 것은 최선의 해결책이 아닙니다

이것도 관심이 🤔

이 바벨 폴리 필 가져 오기를 수정했습니다.

import 'babel-polyfill';

babel-polyfill 전체를 가져 오는 것은 매우 낭비 적이며 next.js, imho에 대한 잘못된 기본값입니다. 실제로 폴리 필 기능이 필요한지 여부에 관계없이 번들에 87kb를 추가합니다.

@sholzmayer import 'babel-polyfill'; 어디서 사용 했습니까? _document.js에서 시도했지만 도움이되지 않았습니다.

@klaemo 그래서 당신의 제안은 무엇입니까?

transform-runtime 을 .babelrc 플러그인에 추가하면 나에게 도움이되는 것 같습니다. Object.entries가 내장되지 않은 Opera 36 용 앱을 개발 중입니다.

"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 에서 필요한 모든 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 음주 가져올 수 없습니다 babel-polyfill 에서 _document.js , 때문에 _document.js 서버에서만 렌더링됩니다.

일반적으로 레이아웃에 포함하는 것이 좋습니다. 기본적으로 모든 페이지에서로드되는 모든 파일이 정상적으로 작동합니다.

업데이트 : IE 10, 11 core-js/library/fn/object/assign 에 의존 client/polyfill.js 로 core-js/fn/object/assign (@klaemo 있던 어떻게 그것을-말았습니다!)

여기가 Dockerized 것 next 5.1.0 접근 방식의 조합은 위의 @klaemo 및 공식 예에 의해 표시 사용을 시도, 카나리아 / 예 /와-polyfills :

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

[원래 질문] IE11을 가져 오는 client / polyfills.js 파일에서 core-js 의 사용법은 무엇입니까? (나는 IE11이 누락 된 모든 것을 포함하는 가져 오기에서 접근을 진행 한 다음 점차적으로 앱에 필요한 항목으로 범위를 축소 할 것으로 예상 할 수 있습니다.)

다음은 몇 가지 OS + 브라우저 조합 (브라우저 스택) 에서 결과 를 이며 Windows 10 + IE11 (아래 참조) 및 기타 IE 조합에서 실패합니다 .

사용자 정의 서버, .babelrc 및 webpack 구성을 사용하여 크롬 43에서 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://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11- (또는 -older)

노드 모듈 용 ES6 트랜스 파일에 대한 공식 문서를 추가하세요.

여기에 해결 방법이 있지만이 버그는 다시 열어야합니다. 아루

ie11에서 Object.assign, String.endsWith 오류가 발생했습니다 ([email protected])

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

// 에버그린이 아닌 브라우저에 필요한 폴리 필 (주로 즉)
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'

이 예제 를 따라 polyfill을 포함했습니다.
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에서 작동하는 클래스 구문을 얻기 위해 어떤 polyfill이 필요한지 알고 있습니까?

클래스 Foo 확장 ...

당신의 polyfills에서 'import'core-js / es6 / object ';' 선

나는 당신이 @peec 을 언급 한 예를

@peec 이 예상되는 동작입니까? 포함 된 항목을 다시 폴리 필해야하는 이유는 무엇입니까?