Jak polyfill IE11 v projektu NextJS?

hlasů
0

Snažím se polyfill projekt pro IE11, ale bez ohledu na to, co dělám prohlížeče přihlásí tyto chyby:

Režim Dev:

Chyba syntaxe v _app.js (49004,30): SCRIPT1002

49004 const Component = props => (react__WEBPACK_IMPORTED_MODULE_0__[createElement](_injectIntl__WEBPACK_IMPORTED_MODULE_2__[Context].Consumer, null, intl => {
        Object(_utils__WEBPACK_IMPORTED_MODULE_1__[invariantIntlContext])(intl);
        const formattedValue = intl[name](props.value, props);
        if (typeof props.children === 'function') {
            return props.children(formattedValue);
        }
        const Text = intl.textComponent || react__WEBPACK_IMPORTED_MODULE_0__[Fragment];
        return react__WEBPACK_IMPORTED_MODULE_0__[createElement](Text, null, formattedValue);
    }));

Režim stavět:

SCRIPT1006: Očekávaná ')'

...function G(e,t,n={})

NextJS doc říká, že rámec polyfills kód z pole, ale it'not enought. Co chybí poté?


projektové soubory:

.babelrc

{
  env: {
    development: {
      plugins: [
        [
          react-intl,
          {
            messagesDir: ./lang/.messages/
          }
        ]
      ],
      presets: [
        [
          next/babel,
          {
            @babel/preset-env: {
              useBuiltIns: usage,
              corejs: { version: 3, proposals: true }
            }
          }
        ]
      ]
    },
    production: {
      plugins: [
        [
          react-intl,
          {
            messagesDir: ./lang/.messages/
          }
        ]
      ],
      presets: [
        [
          next/babel,
          {
            @babel/preset-env: {
              useBuiltIns: usage,
              corejs: { version: 3, proposals: true }
            }
          }
        ]
      ]
    },
    test: {
      presets: [
        [
          next/babel,
          {
            preset-env: {
              modules: commonjs
            }
          }
        ]
      ]
    }
  },
  presets: [@zeit/next-typescript/babel],
  plugins: [[styled-components, { ssr: true }]]
}

package.json

{
  version: 0.1.0,
  scripts: {
    build: yarn generate && yarn type-check && cross-env NODE_CONFIG_DIR=./root/etc next build ./src && yarn l10n,
    build-storybook: build-storybook -s ./src/static-storybook,
    dev: yarn generate && cross-env NODE_CONFIG_DIR=./root/etc nodemon,
    generate: yarn generate:clean && graphql-codegen --config codegen.server.yml && graphql-codegen --config codegen.yml && apollo client:codegen --globalTypesFile=./src/__generated__/globalTypes.ts --addTypename --target=typescript --localSchemaFile=./src/schema/__generated__/schema.graphql --includes=\./src/{components/**/*.{ts,tsx},schema/**/*.ts,queries/**/*.ts}\ --passthroughCustomScalars --tagName gql,
    generate:clean: find . | grep -E \__generated__\ | xargs rm -rf,
    l10n: node ./root/bin/l10n/prepare-lang.js && node ./root/bin/l10n/push.js && node ./root/bin/l10n/pull.js,
    l10n:clean: rm -rf lang/ node_modules/.cache/,
    lint:styles: stylelint \./src/**/*.ts\ \./src/**/*.tsx\,
    lint:ts: eslint --ext .tsx,.ts src/,
    start: cross-env NODE_ENV=stage NODE_CONFIG_DIR=./root/etc node .next/server/index.js,
    storybook: start-storybook -p 6006 -s ./src/static-storybook,./src/static,
    svgr: npx @svgr/cli -d ./src/svgr ./src/static/svgs --ext tsx,
    test: jest,
    test:watch: jest --watch,
    type-check: tsc && tsc --project tsconfig.server.json
  },
  browserslist: [
    last 2 versions,
    not dead,
    IE 11
  ],
  dependencies: {
    @babel/polyfill: ^7.6.0,
    @formatjs/intl-relativetimeformat: ^2.8.2,
    @formatjs/intl-utils: ^0.6.1,
    @tippy.js/react: ^2.2.0,
    @types/classnames: ^2.2.8,
    @types/react-input-mask: ^2.0.3,
    @types/react-select: ^3.0.4,
    @types/react-sidebar: ^3.0.0,
    @zeit/next-css: ^1.0.2-canary.2,
    @zeit/next-typescript: ^1.1.1,
    accepts: ^1.3.5,
    apollo-boost: ^0.4.3,
    apollo-datasource-rest: ^0.5.0,
    apollo-link-context: ^1.0.18,
    apollo-link-error: ^1.1.11,
    apollo-server-express: ^2.6.7,
    babel-polyfill: ^6.26.0,
    classnames: ^2.2.6,
    config: ^3.1.0,
    cookie: ^0.3.1,
    cookie-parser: ^1.4.4,
    css-vars-ponyfill: ^2.0.2,
    dataloader: ^1.4.0,
    date-fns: ^1.30.1,
    express: ^4.16.4,
    final-form: ^4.18.5,
    final-form-arrays: ^3.0.1,
    format-string-by-pattern: ^1.1.1,
    glob: ^7.1.4,
    graphql: ^14.5.6,
    graphql-tools: ^4.0.4,
    http-proxy-middleware: ^0.19.1,
    intl: ^1.2.5,
    intl-pluralrules: ^1.0.3,
    is-valid-date: ^0.0.1,
    isomorphic-unfetch: ^3.0.0,
    lodash.debounce: ^4.0.8,
    lodash.sortby: ^4.7.0,
    merge-graphql-schemas: ^1.5.8,
    next: ^8.1.0,
    next-compose-plugins: ^2.2.0,
    postcss-custom-properties: ^8.0.10,
    postcss-nested: ^4.1.2,
    qs: ^6.7.0,
    react: ^16.8.6,
    react-apollo: ^2.5.8,
    react-components: ,
    react-dom: ^16.8.6,
    react-final-form: ^6.3.0,
    react-final-form-arrays: ^3.1.1,
    react-final-form-listeners: ^1.0.2,
    react-input-mask: ^2.0.4,
    react-intl: ^3.1.13,
    react-markdown: ^4.2.2,
    react-modal: ^3.9.1,
    react-range: ^1.0.6,
    react-redux: ^7.1.1,
    react-select: ^3.0.4,
    react-sidebar: ^3.0.2,
    react-tooltip-lite: ^1.10.0,
    redux: ^4.0.4,
    redux-thunk: ^2.3.0,
    request: ^2.88.0,
    request-promise: ^4.2.4,
    smoothscroll-polyfill: ^0.4.4,
    styled-components: ^4.2.0,
    uuid: ^3.3.2
  },
  devDependencies: {
    @babel/preset-env: ^7.6.3,
    @graphql-codegen/cli: ^1.2.0,
    @graphql-codegen/fragment-matcher: ^1.2.0,
    @graphql-codegen/schema-ast: ^1.2.0,
    @graphql-codegen/typescript: ^1.2.0,
    @graphql-codegen/typescript-operations: ^1.2.0,
    @graphql-codegen/typescript-react-apollo: ^1.2.0,
    @graphql-codegen/typescript-resolvers: ^1.2.0,
    @storybook/addon-actions: ^5.1.9,
    @storybook/addon-backgrounds: ^5.1.9,
    @storybook/addon-info: ^5.1.9,
    @storybook/addon-knobs: ^5.1.9,
    @storybook/addon-links: ^5.1.9,
    @storybook/addon-storysource: ^5.1.9,
    @storybook/addon-viewport: ^5.1.9,
    @storybook/addons: ^5.1.9,
    @storybook/react: ^5.1.9,
    @svgr/cli: ^4.2.0,
    @types/accepts: ^1.3.5,
    @types/config: ^0.0.34,
    @types/cookie: ^0.3.2,
    @types/cookie-parser: ^1.4.1,
    @types/enzyme: ^3.9.1,
    @types/express: ^4.16.1,
    @types/glob: ^7.1.1,
    @types/graphql: ^14.0.7,
    @types/http-proxy-middleware: ^0.19.2,
    @types/intl: ^1.2.0,
    @types/jest: ^24.0.11,
    @types/lodash.debounce: ^4.0.6,
    @types/next: ^8.0.6,
    @types/qs: ^6.5.2,
    @types/react: ^16.8.23,
    @types/react-dom: ^16.8.4,
    @types/react-modal: ^3.8.2,
    @types/request-promise: ^4.1.44,
    @types/smoothscroll-polyfill: ^0.3.1,
    @types/storybook__addon-actions: ^3.4.3,
    @types/storybook__addon-info: ^4.1.2,
    @types/storybook__addon-knobs: ^5.0.1,
    @types/storybook__addon-links: ^3.3.5,
    @types/storybook__react: ^4.0.2,
    @types/styled-components: ^4.1.12,
    @types/uuid: ^3.4.4,
    @typescript-eslint/eslint-plugin: ^1.5.0,
    @typescript-eslint/parser: ^1.5.0,
    apollo: ^2.18.3,
    awesome-typescript-loader: ^5.2.1,
    babel-core: ^7.0.0-bridge.0,
    babel-jest: ^24.7.1,
    babel-loader: ^8.0.5,
    babel-plugin-react-intl: ^4.1.14,
    core-js: ^3.2.1,
    cross-env: ^6.0.3,
    csvtojson: ^2.0.8,
    enzyme: ^3.9.0,
    enzyme-adapter-react-16: ^1.11.2,
    eslint: 5.3.0,
    eslint-config-airbnb: 17.1.0,
    eslint-config-prettier: ^4.1.0,
    eslint-plugin-import: ^2.14.0,
    eslint-plugin-jsx-a11y: ^6.1.1,
    eslint-plugin-prettier: ^3.0.1,
    eslint-plugin-react: ^7.11.0,
    eslint-plugin-react-hooks: ^1.6.0,
    file-loader: ^4.2.0,
    graphql-tag: ^2.10.1,
    husky: ^1.3.1,
    jest: ^24.5.0,
    jest-dom: ^3.1.3,
    l10n-node-client: ,
    lint-staged: ^8.1.5,
    nodemon: ^1.18.10,
    prettier: ^1.16.4,
    react-addons-test-utils: ^15.6.2,
    react-docgen-typescript-loader: ^3.1.0,
    react-testing-library: ^6.0.3,
    storybook-addon-intl: ^2.4.1,
    storybook-addon-styled-component-theme: ^1.2.1,
    stylelint: ^10.0.1,
    stylelint-config-recommended: ^2.2.0,
    stylelint-config-styled-components: ^0.1.1,
    stylelint-processor-styled-components: ^1.6.0,
    ts-node: ^8.0.3,
    typescript: ^3.6.3
  },
  husky: {
    hooks: {
      pre-commit: lint-staged && tsc
    }
  }
}

polyfills.js

import 'babel-polyfill';

import cssVarsPonyfill from 'css-vars-ponyfill';

if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

cssVarsPonyfill({
  onlyLegacy: true,
  exclude: '[data-styled]',
});

next.config.js

const { PHASE_PRODUCTION_BUILD } = require('next-server/constants');
const withPlugins = require('next-compose-plugins');
const typescript = require('@zeit/next-typescript');
const css = require('@zeit/next-css');
const getLocalIdent = require('css-loader/lib/getLocalIdent');
const config = require('config');

module.exports = withPlugins([typescript, css], {
  distDir: '../.next',
  assetPrefix: config.get('development') ? '' : '/avia',
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
    camelCase: true,
    getLocalIdent: (loaderContext, localIdentName, localName, options) => {
      // FIXME Костыль для импорта css-файлов из react-components без преобразования имен классов
      if (loaderContext.resourceQuery === '?raw-class-name') {
        return localName;
      }

      return getLocalIdent(loaderContext, localIdentName, localName, options);
    },
  },
  [PHASE_PRODUCTION_BUILD]: {
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]___[hash:base64:5]',
      camelCase: true,
      getLocalIdent: (loaderContext, localIdentName, localName, options) => {
        // FIXME Костыль для импорта css-файлов из react-components без преобразования имен классов
        if (loaderContext.resourceQuery === '?raw-class-name') {
          return localName;
        }

        return getLocalIdent(loaderContext, localIdentName, localName, options);
      },
    },
  },
  webpack(config) {
    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: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });

    config.module.rules.push({
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          },
        }
      ]
    });

    config.stats = {
      // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
      warningsFilter: (warning) => /Conflicting order between/m.test(warning),
    };

    return config;
  },
});
Položena 10/10/2019 v 00:49
zdroj uživatelem
V jiných jazycích...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more