Mdb-ui-kit: SCRIPT1028: SCRIPT1028: Expected identifier, string or number

[AlexanderPilhar]

Test Case

https://codepen.io/FezVrasta/pen/JyVWMo
Open in Microsoft Edge and see console output

Summary

There seems to be a problem with version 4.1.2 in Microsoft Edge. I was upgrading bootstrap-material-design from 4.1.1 to 4.1.2 resulting in an empty page an errors on console output when I was trying to open my web application in Microsoft Edge. I did not encounter this problem in any other browser (Chrome, Firefox, Opera, Vivaldi, Edge Preview chromium-based).
Problem does not appear after downgrading to 4.1.1 again.

Expected result

No problems ; )

Additional Information

My web application:


Test Case (https://codepen.io/FezVrasta/pen/JyVWMo)

[rsrgithub]

I am also having exact same problem in Edge.

SCRIPT1028: SCRIPT1028: Expected identifier, string or number in
bootstrap-material-design.js in version 4.1.2.

Any fixes?

The only workaround was to downgrade to 4.1.1. After downgrading to 4.1.1, on edge, it works fine.

[wol-soft]

It's caused by the usage of spread syntax for objects (compatibility: http://kangax.github.io/compat-table/es2016plus/#test-object_rest/spread_properties) which is not (yet) supported by Edge,

Another possibility besides the downgrade could be to "fix" the code to be compliant using Babel in your application (https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spread). On the other hand maybe the build step of the bootstrap-material-design should include the babel step because currently the complete Edge support of the library is dropped (@FezVrasta in a Bugfix-version, https://semver.org/).

[bobkingof12vs]

Google leads me to believe that the reason this is happening has to do with things in the node_modules folder. Babel had been properly applied to this code correctly, but needs to transpile the code inside that folder too

To fix this, I converted my .babelrc to babel.config.js and removed the modules line

module.exports = {
    "presets": [
        [
            "@babel/env", {
              "loose": true,
              "exclude": ["transform-typeof-symbol"]
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        [
            "module-resolver", {
            "alias": [{ "src": "./node_modules/bootstrap", "expose": "bootstrap" }]
            }
        ]
    ]
  }

and in rollup.config.js I removed the babelOptions and the changed the options inside of babel to just be runtimeHelpers: true

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import cjs from 'rollup-plugin-commonjs';

export default {
  output: {
    format: 'umd',
    globals: {
      jquery: 'jQuery',
      'popper.js': 'Popper',
    },
  },
  external: ['jquery', 'popper.js'],
  plugins: [
    babel({
        runtimeHelpers: true,
    }),
    resolve({
      mainFields: ['module', 'main'], // Default: ['module', 'main']
    }),
    cjs({
      include: ['node_modules/bootstrap/**', 'node_modules/jquery/**'],
      namedExports: {
        'node_modules/jquery/dist/jquery.js': 'jquery',
      },
    }),
  ],
};

And now everything compiles correctly for me