Problem with JS output on IE11 using babel

Question

I'm writing JS app using webpack along with babel and preset-env to compile the code and ensure browser compatibility, the code is being compiled but I'm getting this error on IE11:

I'm also using @babel/preset-react because a part of my app is made on react.

the script seems to be compiling/running ok until it reaches that line, babel is compiling the code but that line (which I think is a part of react-spring) throws an error.

these are my config files:

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
        }),
    ]
};

Do you know what's causing this error and what could be a possible solution?

You probably need to have your compilation target set to ES5. — Pointy, Jun 27 '19 at 21:02
if you look at the package.json file I have a browserlists object which sets the compatibility target (I think it's working) — Scrocchi, Jun 27 '19 at 21:06
[IE11 doesn't support arrow functions](https://www.caniuse.com/#feat=arrow-functions). — zero298, Jun 27 '19 at 21:06
@Scrocchi If it were working you wouldn't have arrow functions in the result. — Barmar, Jun 27 '19 at 21:09
@zero298 you are right! but why isn't that block of code being processed? — Scrocchi, Jun 27 '19 at 21:09
@Barmar yes, but when I check the bundle file, my code is being processed by babel. maybe it's not working on that block because it's a library? doesn't makes too much sense to me — Scrocchi, Jun 27 '19 at 21:13
Possible duplicate of [Babel not transpiling arrow functions (Webpack)](https://stackoverflow.com/questions/49954618/babel-not-transpiling-arrow-functions-webpack) — chiliNUT, Jun 27 '19 at 21:15
You are not requesting Babel to parse for IE 11. Check the answer by @Sreeram. Also most build stacks are configured to not Babel code from `node_modules` - just like yours is: `exclude: [/node_modules/, /controls/],` — connexo, Jun 27 '19 at 22:10
Try to add https://github.com/babel/babel-preset-env with npm install babel-preset-env --save-dev and use the following config in your .babelrc: https://textuploader.com/1dvjk — Deepak-MSFT, Jun 28 '19 at 01:53

connexo · Answer 1 · 2019-06-27T22:32:17.670

From react-spring documentation:

Browser support

The library comes as an es-module compiled for evergreen browsers with the following browserlist config: >1%, not dead, not ie 11, not op_mini all. If you need to support legacy targets or deal with targets that don't support modules, you can use the commonJS export by simply appending .cjs to your imports.

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

Combine this with the fact that your webpack is configured to send *.js through babel-loader with the following exlucison:

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

that means that react-spring is not touched by Babel at all.

score 1 · Answer 2 · answered Jun 27 '19 at 21:42

1

Try this in your .babelrc

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

answered Jun 27 '19 at 21:42

Siri

1,117
6
13

score 1 · Answer 3 · answered Jun 28 '19 at 14:05

The problem was (as you said before) react-sprint > 8.0.5 doesn't work on IE and wasn't being transpiled by babel, I fixed the issue importing the Common JS bundle instead:

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

this GitHub issue helped me to solve the problem: https://github.com/react-spring/react-spring/issues/552

Problem with JS output on IE11 using babel

3 Answers3