profile
viewpoint

Ask questionssolution for Next Js in IE11 after add Polyfills

Question about Next.js in IE11

I added Polyfills in my project nextjs, but all the scripts js are not functional in IE11 (internet explorer): https://github.com/zeit/next.js/tree/canary/examples/with-polyfills

// polyfills.js /* eslint no-extend-native: 0 */ // core-js comes with Next.js. So, you can import it like below import includes from 'core-js/es/string/virtual/includes'; import repeat from 'core-js/es/string/virtual/repeat'; import assign from 'core-js/es/object/assign'; // add your polyfills // This files runs at the very beginning (even before React and Next.js core) console.log('Load your polyfills'); String.prototype.includes = includes; String.prototype.repeat = repeat; Object.assign = assign;


// next.confg.js `require('dotenv').config(); const path = require('path'); const Dotenv = require('dotenv-webpack'); const withCSS = require('@zeit/next-css'); console.log(__dirname); module.exports = withCSS({ cssLoaderOptions: { url: false, }, distDir: '../build', pageExtensions: ['jsx', 'js'], webpack: config => { const originalEntry = config.entry; config.entry = async () => { const entries = await originalEntry();

  if (entries['main.js'] && !entries['main.js'].includes('./client/polyfills.js')) {
    entries['main.js'].unshift('./client/polyfills.js');
  }

  return entries;
};

config.module.rules.push({
  test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 100000,
    },
  },
});
config.plugins = config.plugins || [];
config.plugins = [
  ...config.plugins,

  // Read the .env file
  new Dotenv({
    path: path.join(__dirname, '.env'),
    systemvars: true,
  }),
];

return config;

}, }); `

zeit/next.js

Answer questions dineshmatta

Hi @mattdell @haleybarlar

I made following changes in my Next.js typescript project and that worked, as per Next.js docs it supports IE11 browser but for external npm modules when you use it in your Next.js project, you have to add polyfill for those manually

.babelrc

            {
                "transform-runtime": {
                    "useESModules": false
                },
                "preset-env": {
                    "targets": {
                        "browsers": [">0.03%"]
                    },
                    "useBuiltIns": "usage",
                    "corejs": 2
                }
            }
        ]

next.config.js

+const withTM = require("next-transpile-modules");

+module.exports = withTM(withBundleAnalyzer(withCSS(withSass({
    // Unshift polyfills in main entrypoint.
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();
      if (entries['main.js']) {
        entries['main.js'].unshift('./client/polyfills.js');
      }
      return entries;
    };   
    
    config.module.rules.push({
      test: [
        path.resolve('./node_modules/pelmorex-microservices-common/lib/logging/logger.js')
      ],
      loader: 'babel-loader',
      options: {
        babelrc: false,
        cacheDirectory: true,
        presets: ['@babel/preset-env'],
      },
    });

  transpileModules: [
    "express-http-context",
    "ip-regex",
    "is-ip",
    "logform",
    "winston-transport",
    "triple-beam",
    "intersection-observer-polyfill",
    "react-intersection-observer"
  ],

+}))));

package.json

    "babel-polyfill": "^6.26.0",
    "intersection-observer": "^0.7.0",
    "next-transpile-modules": "^2.3.1",
    "react-intersection-observer": "^8.24.2",

Added new file - src/client/polyfill.js

[/* eslint no-extend-native: 0 */
// core-js comes with Next.js. So, you can import it like below
import 'babel-polyfill';
import 'intersection-observer';

import includes from 'core-js/library/fn/string/virtual/includes';
import repeat from 'core-js/library/fn/string/virtual/repeat';
import assign from 'core-js/library/fn/object/assign';

// Add your polyfills
// This files runs at the very beginning (even before React and Next.js core)
// console.log('Load your polyfills');

String.prototype.includes = includes;
String.prototype.repeat = repeat;
Object.assign = assign;](url)
useful!
source:https://uonfu.com/
answerer
Dinesh Matta dineshmatta Cox Automotive Toronto Solutions-oriented and analytical with history of success contributing to designing, coding, testing and shipping front-end interfaces, APIs, and backend apps
Github User Rank List