Mdb-ui-kit: V4 Javascript Error - babel-polyfill missing

[allan-farrell]

Affects:

• IE11
• Firefox
• Safari

Test Case

http://codepen.io/rosskevin/pen/eJMMVB

Summary

Just load the codepen (unmodified V4 codepen template) and check the console for the following javascript error:

"Exception thrown and not caught"

Expected result

No Error

Additional Information

Using IE 11 on Win 8.1 (in Virtual Box). Seems to be fine on other browsers.

[rosskevin]

Ok, had a quick thought, this is a problem with the babel-polyfill - I confirmed by testing with Firefox on OSX. Perhaps it was left out of the build.

[rosskevin]

I've created a test case for rollup, hopefully that will help get to a resolution.

[rosskevin]

Workaround:

A workaround for the moment would be:

1. comment out import 'babel-polyfill' in index.js
2. recompile
3. Add https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.8.0/polyfill.min.js to you html prior to adding BMD

[rosskevin]

With no resolution from Rollup despite my effort and submitted test case, we should do one of two things:

1. Switch the gulp recipe off of Rollup to Browserify or Webpack; or
2. Leave as-is and specify that the babel-polyfill must be included in the html

Either is reasonable. 2 is actually ok, if you assume that someone is going to include this JS in a larger application, the babel-polyfill should be at the entrypoint anyway.

[rosskevin]

This may be the right way to solve the polyfill problem:
https://babeljs.io/docs/plugins/transform-runtime/

Another purpose of this transformer is to create a sandboxed environment for your code. If you use babel-polyfill and the built-ins it provides such as Promise, Set and Map, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can’t exactly control the environment in which your code will run.

.babelrc:

  "plugins": [
    "transform-runtime"
  ]

This needs to be tested, but the way I read it, this may be exactly what we want to be using _instead_ of babel-polyfill.

[FezVrasta]

It seems what we need, does the fix need tweaking Gulp? I've not a lot of experience with it :/

[rosskevin]

Rollup fixed the issue about a week ago. I'll pull the latest and push a build of docs so we can check it out.

[FezVrasta]

I don't think I understand, lol.

Who fixed it? So, is it fixed and we can close this issue?

[rosskevin]

Rollup is a dependency of our gulp config, we are using it to create our js bundles. I'm in the middle of updating all dependencies and trying to get a build to run now. We can close this once I can confirm it with a new (good) build.

[rosskevin]

So, this issue needs to stay open until we can confirm it is fixed (though I think it will be). Now, we are blocked by #1045

[FezVrasta]

@rosskevin do you think I could verify this cloning the whole BS4 repository in place of the NPM folder?

[FezVrasta]

I copied the js folder inside node_modules/bootstrap, when I run gulp I get:

    Task: [rollup:iife]
  Plugin: [rollup]
   Error: Could not resolve 'bootstrap' from /Users/federicozivolo/Progetti/bootstrap-material-design/js/index.js

Ideas?

[FezVrasta]

By the way, commenting the bootstrap import, the rest works flawlessly.

Also, if I replace that import with:

import 'bootstrap/js/src/alert'
import 'bootstrap/js/src/button'
import 'bootstrap/js/src/carousel'
import 'bootstrap/js/src/collapse'
import 'bootstrap/js/src/dropdown'
import 'bootstrap/js/src/modal'
import 'bootstrap/js/src/popover'
import 'bootstrap/js/src/scrollspy'
import 'bootstrap/js/src/tab'
import 'bootstrap/js/src/tooltip'
import 'bootstrap/js/src/util'

Everything seems to work fine.

Another attempt I did was to import the compiled code

import 'bootstrap/dist/js/bootstrap'

And it seems to work fine even if it's not the nicest of the solutions.

@rosskevin what if we import the compiled source until Bootstrap fixes the problem?

[FezVrasta]

I have applied my idea and the build passed:

https://travis-ci.org/FezVrasta/bootstrap-material-design/builds/148804397

[FezVrasta]

Closing since the problem seems to be fixed.

[rosskevin]

@FezVrasta I don't think importing the global iife bundle will work due to it's nature, but you could just add a script tag and link to the bs bundle. My thoughts on importing it (was to mirror how we do sass), in that BMD could produce a consistent build without relying on the user to bump their version of their BS import. In this way, the package.json controls and it is less likely we will have related edge case bugs. Nonetheless, you could do it temporarily.

[FezVrasta]

I don't see where is the problem in importing the compiled version of the Bootstrap scripts?

[rosskevin]

If it works, no problem.

[FezVrasta]

I mean, it's not nice because the script has to deoptimize it and everything, but being just a temporary workaround and seen that it makes the thing work I think it's okay for now.

Logically once they publish the js sources we'll include them instead.

[cullylarson]

I had the same problem. Just did an npm update and it's fixed. Not sure which package was causing the problem, but I'm satisfied :)