Проблема с выводом JS на IE11 при использовании babel

Question

Я пишу приложение JS, используя webpack вместе с babel и preset-env для компиляции кода и обеспечения совместимости браузера, код компилируется, но я получаю эту ошибку в IE11:

Я также использую @ babel / preset-реагировать, потому что часть моего приложения сделана на реакции.

Сценарий, кажется, компилируется / работает нормально, пока не достигнет этой строки, babel компилирует код, но эта строка (которую я думаю, является частью реагирующей пружиной) выдает ошибку.

это мои файлы конфигурации:

package.json

{
  "name": "elementor-pl",
  "version": "1.0.0",
  "description": "Includes photologo blocks as elementor widgets",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "Echko Limited",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.4.4",
    "@glidejs/glide": "^3.3.0",
    "apollo-boost": "^0.3.1",
    "braintree-web": "^3.44.2",
    "graphql": "^14.2.1",
    "graphql-tag": "^2.10.1",
    "jquery": "^3.4.0",
    "owl.carousel": "^2.3.4",
    "react-app-polyfill": "^1.0.1",
    "react-slick": "^0.24.0",
    "react-spring": "^8.0.19",
    "react-translate": "^7.0.0",
    "slick-carousel": "^1.8.1"
  },
  "browserslist": {
    "production": [
      ">0.05%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

.babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/transform-runtime"
    ]
}

webpack.config:

var path = require("path");
var webpack = require("webpack");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

var PROXY_URL = 'http://localhost/explore/';

module.exports = {
    entry: {
        front: "./src/index.js",
        dashboard: "./src/controls/index.js"
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/, /controls/],
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(css|sass|scss)$/,
                exclude: [/node_modules/, /controls/],
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [require('autoprefixer')({
                                'browsers': ['> 1%', 'last 2 versions']
                            })],
                        }
                    },
                    'sass-loader',
                ]
            },
            {
                test: /\.gql$/,
                exclude: [/node_modules/, /controls/],
                use: [
                  {
                    loader: 'graphql-tag/loader'
                  },
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file-loader',
                options: {
                    name: 'img/[hash].[ext]',
                },
            },
            {
                test: /\.(eot|ttf|woff)$/i,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                },
            }
        ]
    },
    output: {
        path: path.join(__dirname, "/"),
        filename: "[name]-bundle.js",
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}),
            // new UglifyJsPlugin(),
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        // new BundleAnalyzerPlugin(),
        new MiniCssExtractPlugin({
            filename: 'styles.css'
        }),
        new BrowserSyncPlugin({
            proxy: PROXY_URL,
            files: [
                '**/*.php'
            ],
            reloadDelay: 0
        }, {
            reload: true,
            injectCss: true
        }),
    ]
};

Знаете ли вы, что является причиной этой ошибки и что может быть возможным решением?

Answer 1

Из документации реагирующей пружины:

Поддержка браузера

Библиотека поставляется в виде es-модуля, скомпилированного для вечнозеленых браузеров со следующей конфигурацией списка браузеров:> 1%, не мертвая, не то есть 11 , не все op_mini.Если вам нужно поддерживать устаревшие цели или иметь дело с целями, которые не поддерживают модули , вы можете использовать экспорт commonJS, просто добавив .cjs к вашим импортам.

https://www.react -spring.io /

Добавьте к этому тот факт, что ваш веб-пакет настроен на отправку *.js через babel-loader со следующим исключением:

exclude: [/node_modules/, /controls/],

это означает, что react-spring вообще не тронут Бабелем.

Answer 2

Попробуйте это в вашем .babelrc

{
  "presets": ["@babel/preset-react",
    [ "@babel/preset-env", {
        "targets": {
          "ie": "11",
        }
      }
    ]
  ]
}

Answer 3

Проблема заключалась в том, что (как вы сказали ранее) response-sprint> 8.0.5 не работает в IE и не передавался babel, я исправил проблему с импортом пакета Common JS:

import { useSpring } from 'react-spring/web.cjs'

эта проблема с GitHub помогла мне решить проблему: https://github.com/react-spring/react-spring/issues/552