Babel + Webpack отправляет функции стрелок на ie11 - PullRequest
Новая
       18

Babel + Webpack отправляет функции стрелок на ie11

0 голосов
/ 14 марта 2020

Я пытаюсь исправить приложение Next JS для работы в IE11. Я использую webpack и babel. В Chrome и других современных браузерах приложение работает нормально, но в IE11 появляется ошибка, указывающая на js функцию стрелки. Я использую файл next.config. js и .babelr c. У меня есть аналогичный проект, работающий на IE11, он использует следующую js версию 8.0.3, и этот, который не работает 9.2.0.

Вот мой пакет. json file 

"dependencies": {
    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@contentful/rich-text-types": "^13.4.0",
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.19.0",
    "babel-plugin-universal-import": "^4.0.0",
    "chalk": "^3.0.0",
    "classnames": "^2.2.6",
    "compression": "^1.7.4",
    "contentful-management": "^5.9.0",
    "css-loader": "^3.2.0",
    "dotenv-webpack": "^1.7.0",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^3.0.2",
    "isomorphic-style-loader": "^5.1.0",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^0.9.0",
    "next": "^9.2.0",
    "next-compose-plugins": "^2.2.0",
    "next-offline": "^4.0.0",
    "nextjs-sitemap-generator": "^0.1.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-markdown": "^4.0.6",
    "react-redux": "^7.1.1",
    "react-slick": "^0.25.2",
    "react-universal-component": "^4.0.0",
    "readdirp": "^3.0.1",
    "redux": "^4.0.4",
    "sass-loader": "^8.0.0",
    "slick-carousel": "^1.8.1",
    "style-loader": "1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.4",
    "@zeit/next-sass": "^1.0.1",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^5.2.0",
    "dotenv": "^6.2.0",
    "eslint": "^5.14.1",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^22.14.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^5.0.2",
    "husky": "^3.0.9",
    "jest": "^24.1.0",
    "node-sass": "^4.12.0",
    "sass-lint": "^1.13.1",
    "stylelint": "^9.10.1",
    "stylelint-config-recommended": "^2.1.0"

Вот мой файл .babelr c 

{
  "presets": [
    "next/babel",
   
  ],
  "plugins": [
    "universal-import"
  ]
}

... и, наконец, мой файл next.config. js 

webpack: (config, { dev, isServer }) => {
        config.module.rules.push({
            test: /\.s?css$/,
            use: [
                isServer ? MiniCssExtractPlugin.loader : 'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                    },
                },
                'sass-loader',
            ],
        });

        config.module.rules.push({
            test: /\.(woff(2)?|ttf|eot|svg|gif)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                    },
                },
            ],
        });

        config.plugins.push(new MiniCssExtractPlugin());

        return {
            ...config,
            devtool: dev ? 'source-map' : '',
        };
    },

Я новичок в Webpack и Babel работать вместе, так что если кто-то может помочь, я был бы признателен.

1 Ответ

0 голосов
/ 16 марта 2020

Вы можете попытаться добавить в свой пакет. json

  "browserslist": [
    "defaults"
  ]

и добавить загрузчик, подобный следующему, в вашем файле next.config. js

{
    test: /\.js$/,
    use:
    {
        loader: 'babel-loader',
        options:
        {
            presets: ['@babel/preset-env']
        }
    }
}
...