CODEWITHSUNDEEP
javascriptwebpackinternet-explorer-11babeljses5-compatiblity
Scrocchi
Scrocchi

Reputation: 72

Problem with JS output on IE11 using babel

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:

enter image description here enter image description here

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?

Upvotes: 0

Views: 5130

Answers (3)

Scrocchi
Scrocchi

Reputation: 72

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

Upvotes: 1

connexo
connexo

Reputation: 56744

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.

Upvotes: 2

Siri
Siri

Reputation: 1126

Try this in your .babelrc

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

Upvotes: 1

Related Questions