Next.js: बाबेल पॉलीफिल को इंजेक्शन नहीं लगता है

नमूना परियोजना @ https://github.com/jonaswindey/next-polyfill-bug

मेरे पास एकमात्र फिक्स एक कस्टम लेआउट है ।js और जोड़ना
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js' />

@arunoda हमने इसे सही un से पहले देखा है

हॉट-फ़िक्स के रूप में आप ऐसा कर सकते हैं:

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

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

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

मुझे देखने दो कि यहाँ क्या हो रहा है।

मैंने एक सामान्य बैबेल ऐप के साथ इसकी जाँच की और व्यवहार समान है।
जैसा कि मैंने ऊपर उल्लेख किया है, आपको पॉलीफिल जोड़ना होगा।

इसलिए, मैं इसे बंद कर रहा हूं क्योंकि यह वास्तव में एक अगला विशिष्ट मुद्दा नहीं है।

लेकिन मैं अधिक सुझावों के लिए खुला हूं।
बेझिझक फिर से खोलना।

@arunoda I ने इस हॉटफिक्स को _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 में प्रविष्टि-संपत्ति के साथ प्रयोग किया है।
यह मुझे मिल गया है
(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 ? इसे शामिल करना काफी आम है।

@ रुनोदा आपको क्या लगता है?

इस पर कोई अद्यतन? पॉलीफिल को शामिल करना सबसे अच्छा समाधान नहीं है

इसमें भी रुचि 🤔

मैंने इसे आयात करने वाले बैबेल पॉलीफिल्स को तय किया:

import 'babel-polyfill';

पूरे babel-polyfill का आयात करना बहुत ही बेकार है और यह अगले .js, imho के लिए एक बुरा डिफ़ॉल्ट होगा। यह बंडल में 87kb जोड़ता है चाहे आपको वास्तव में पॉलीफ़िल्ड विशेषताओं में से किसी की आवश्यकता हो या नहीं।

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

वैकल्पिक रूप से, नेक्स्ट 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 १०, ११ के लिए core-js/library/fn/object/assign client/polyfill.js core-js/fn/object/assign बदला (कैसे

यहाँ ऊपर @klaemo द्वारा इंगित दृष्टिकोण का संयोजन और एक आधिकारिक उदाहरण, कैनरी / उदाहरण / पॉलीफ़िल के साथ नियोजित next 5.1.0 प्रयास किया गया है:

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

[मूल प्रश्न] मेरे ग्राहक / polyfills.js फ़ाइल में core-js का उपयोग क्या है जो मुझे IE11 मिलता है? (मैं एक आयात से आगे बढ़ने के लिए दृष्टिकोण की उम्मीद कर सकता हूं जिसमें IE11 सबकुछ गायब है और फिर धीरे-धीरे इस रेंज को जीतता है जिससे ऐप की जरूरत है।

यहाँ प्रारंभिक परिणाम मैंने कुछ OS + ब्राउज़र संयोजनों (Browserstack पर) पर और यह तब जाता है जब यह Windows 10 + IE11 (नीचे दिखाया गया) पर

मैं एक कस्टम सर्वर, .babelrc और वेबपैक कॉन्फिगर के साथ क्रोम 43 पर next 5.1.0 चलाने की कोशिश कर रहा था। import 'core-js/fn/object/assign'; ने चाल चली।

इस कीड़े की तरह लगता है अभी भी मौजूद है! मैं IE 11 में एक ही मुद्दे का सामना कर रहा हूं और कोई भी समाधान मदद नहीं कर रहा है। समस्या एएनएसआई-रेगेक्स पैकेज लगती है जो एक तीर फ़ंक्शन का उपयोग करती है और यह अगले की निर्भरता बनती है।

@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

मुझे ऑब्जेक्ट 11, स्ट्रिंग के साथ त्रुटियाँ मिलीं। String.endsWith on ie11 (अगले@6.0.3 पर)

const {basedir} = आवश्यकता ('./ सर्वर / विन्यास');

गैर-सदाबहार ब्राउज़र के लिए // पॉलीफ़िल आवश्यक (मुख्य रूप से)
कास्ट पॉलीफ़िल्स = [
'कोर-js / fn / वस्तु / असाइन',
'कोर-js / fn / स्ट्रिंग / समाप्त होता है-के साथ',
'कोर-js / fn / स्ट्रिंग / शुरू होता है-के साथ',
'कोर-js / fn / स्ट्रिंग / शामिल है,
'कोर-js / fn / सरणी / शामिल है,
'कोर-js / fn / कमजोर नक्शा',
];

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

मुझे यकीन नहीं है कि जब भी कुछ लाइब्रेरी होती हैं, जैसे कि जरूरत होती है, तो अनंत है, लेकिन मेरा ऐप बहुत कम है।

यह काम करता है, लेकिन यह पता लगाने के लिए बहुत बोझिल है कि वास्तव में क्या पॉलीफ़िल की आवश्यकता है।

किसी को पता है कि IE11 में क्लास सिंटैक्स को काम करने के लिए पॉलीफिल की आवश्यकता क्या है?

कक्षा फू का विस्तार ...

आपके पॉलीफ़िल्स में 'आयात' कोर-जेएस / एस 6 / ऑब्जेक्ट ';' लाइन

मैंने उस उदाहरण का अनुसरण किया जिसका आपने था और इसने मेरे लिए काम किया।

@peec यह अपेक्षित व्यवहार है, हालांकि? मुझे ऐसी किसी चीज़ को फिर से पॉलीफ़िल करने की आवश्यकता क्यों होगी जो अयोग्य थी?