Полифилы NextJS не загружены раньше других JS - PullRequest
Новая
       44

Полифилы NextJS не загружены раньше других JS

0 голосов
/ 03 октября 2019

Я использую https://github.com/zeit/next.js/ и посмотрел примеры:

  1. https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less
  2. https://github.com/zeit/next.js/tree/canary/examples/with-redux
  3. https://github.com/zeit/next.js/tree/canary/examples/with-polyfills

Я объединил три проекта, чтобы я мог использовать ant design и redux вместе с polyfill. До сих пор работает в Chrome, но кажется, что теперь полифилы загружены неправильно.

Мой next.config.js выглядит так: 

/* 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
  }) => {
    const originalEntry = config.entry;
    config.entry = async() => {
      const entries = await originalEntry();

      if (
        entries["main.js"] &&
        !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) => {
          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;
  }
});

Мой .eslintrc.js выглядит так: 

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

Мои 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/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;

В IE11 я получаю:

Объект не поддерживает свойство или метод 'includes'

Можеткто-нибудь поможет здесь?

...