title: NextJS polyfills not loaded before other JS
body: <p>I am using <a href="https://github.com/zeit/next.js/" rel="nofollow noreferrer">https://github.com/zeit/next.js/</a> and had a look at the examples:</p>
  
  <ol>
  <li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less" rel="nofollow noreferrer">https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less</a></li>
  <li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-redux" rel="nofollow noreferrer">https://github.com/zeit/next.js/tree/canary/examples/with-redux</a></li>
  <li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-polyfills" rel="nofollow noreferrer">https://github.com/zeit/next.js/tree/canary/examples/with-polyfills</a></li>
  </ol>
  
  <p>I merged the three projects, so that I can use ant design and redux together with polyfill.
  Works so far in Chrome, but it seems that the polyfills are not loaded correctly now.</p>
  
  <p>My next.config.js looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint-disable */
  const withLess = require("@zeit/next-less");
  const lessToJS = require("less-vars-to-js");
  const fs = require("fs");
  const path = require("path");
  
  // Where your antd-custom.less file lives
  const themeVariables = lessToJS(
    fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
  );
  
  module.exports = withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables // make your antd custom effective
    },
    webpack: (config, {
      isServer,
      defaultLoaders
    }) =&gt; {
      const originalEntry = config.entry;
      config.entry = async() =&gt; {
        const entries = await originalEntry();
  
        if (
          entries["main.js"] &amp;&amp;
          !entries["main.js"].includes("./polyfills.js")
        ) {
          entries["main.js"].unshift("./polyfills.js");
        }
  
        return entries;
      };
  
      config.module.rules.push({
        test: /\.scss$/,
        use: [
          defaultLoaders.babel,
          {
            loader: require("styled-jsx/webpack").loader,
            options: {
              type: "scoped",
              javascriptEnabled: true
            }
          },
          "sass-loader"
        ]
      });
  
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) =&gt; {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === "function") {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === "function" ? [] : origExternals)
        ];
  
        config.module.rules.unshift({
          test: antStyles,
          use: "null-loader"
        });
      }
      return config;
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>My .eslintrc.js looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
    extends: ["airbnb"],
    env: {
      browser: true
    },
    parser: "babel-eslint",
    rules: {
      indent: 0,
      "comma-dangle": [
        2,
        {
          arrays: "always-multiline",
          objects: "always-multiline",
          imports: "always-multiline",
          exports: "always-multiline",
          functions: "ignore"
        }
      ],
      "max-len": 1,
      "arrow-parens": 0,
      "import/no-named-as-default": 0,
      "import/no-extraneous-dependencies": 0,
      "no-nested-ternary": 0,
      "no-use-before-define": 0,
      "react/jsx-props-no-spreading": 0,
      "react/prop-types": 1,
      "react/no-array-index-key": 1,
      "react/no-did-mount-set-state": 0,
  
      "jsx-a11y/label-has-for": [
        2,
        {
          components: ["Label"],
          required: {
            some: ["nesting", "id"]
          },
          allowChildren: true
        }
      ],
      "jsx-a11y/click-events-have-key-events": 1,
      "jsx-a11y/no-noninteractive-element-interactions": 1,
      "jsx-a11y/anchor-is-valid": 1,
      "jsx-a11y/no-static-element-interactions": 1
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>My polyfills.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* eslint no-extend-native: 0 */
  // core-js comes with Next.js. So, you can import it like below
  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 (from IE10 is supported by default)
  // This files runs at the very beginning (even before React and Next.js core)
  
  String.prototype.includes = includes;
  String.prototype.repeat = repeat;
  Object.assign = assign;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In IE11 I get:</p>
  
  <p><strong>Object doesn't support property or method 'includes'</strong></p>
  
  <p>Can someone help here ?</p>