Issue loading popover

[borysn]

Hey guys!

I'm running into an issue using popovers, seems they are having trouble. Starting up my application shows an error
Uncaught ReferenceError: Tooltip is not defined popover.js?7071:formatted:93

The referenced line of code in the bootstrap file popover.js shows...

var Default = $.extend({}, Tooltip.Default, {
    ...
});

popovers seem to be working fine in alpha 4, so I'm submitting the issue here. Correct me if I'm mistaken, I could be missing something here.

[justin808]

@borysn can you please help us debug this?

[borysn]

@justin808 I'll see what I can find.

[sample-usr]

I'm having the exact same issue. @borysn did you find anything?

[frickt]

Util in util.js has the same problem:

Uncaught ReferenceError: Util is not defined _getParentFromElement @ bootstrap.bundle.js:1520

referenced code is in bootstrap file dropdown.js
var selector = Util.getSelectorFromElement(element);

[borysn]

@razagill I tried to do some basic debugging just looking through the code, and poking around breakpoints with my project loaded up. I asked justin about how to debug an npm package properly, and he pointed me to a blog article, but I left off there.

My guess right now is that the loader will struggle with any import statements. popover.js imports Tooltip from tooltip.js, and it's the initialization of Tooltip within popover.js that causes the error. Although I have not seen the error yet, it makes sense that Util would fail too, like @frickt said. Util is imported in most of the javascript files.

I'm going to try and get back to it, but I had a few interviews today, and I'm looking to prepare/move forward with those, so I may not have time.

[Andre-Gl]

That is true.
Please compare

• compiled version (that loader is uisng) here: https://github.com/twbs/bootstrap/blob/v4-dev/js/dist/popover.js
• original version: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/popover.js

The next line

import Tooltip from './tooltip'

is just ignored in dist.

Tow options. Either reference originals or compile into single file as bootstrap did so that all variables available across modules.

[frickt]

why do we use the files in dist and not in src?
We could change createBootstrapRequire.js from ['js', 'dist'] to ['js', 'src']
and the webpack module loader to:

  { test: /bootstrap[\/\\]js[\/\\]src[\/\\]/, loader: 'imports?jQuery=jquery' },

this would work, but i'm not sure if it's the right way...

[Andrey-Pavlov]

Is there any workaround, guys?

[BenjaminSchubert]

I can confirm that Utils fails when using only dropdown and itself, I couldn't find a workaround for now.

[ratherblue]

Bootstrap moved away from UMD in Beta 4 twbs/bootstrap#20072. So the js/dist files will no longer work for the current configuration. This repo will need to use the js/src files like @frickt mentioned and the end user will need to transpile down using Babel.

[sky-coding]

@borysn @razagill @frickt @Andre-Gl @Andrey-Pavlov @BenjaminSchubert

This works, using bootstrap 4.0.0-alpha.4 and bootstrap-loader 2.0.0-beta.11:

const webpack = require('webpack');

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Tether: "tether",
      "window.Tether": "tether",
      Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
      Alert: "exports?Alert!bootstrap/js/dist/alert",
      Button: "exports?Button!bootstrap/js/dist/button",
      Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
      Modal: "exports?Modal!bootstrap/js/dist/modal",
      Popover: "exports?Popover!bootstrap/js/dist/popover",
      Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
      Tab: "exports?Tab!bootstrap/js/dist/tab",
      Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
      Util: "exports?Util!bootstrap/js/dist/util",
    })
  ]
  /* ... */
};

@frickt You can remove that loader when using the above config.

Make sure to npm install exports-loader --save-dev if you don't have it.

Shame on them for releasing non-modular code in 2016.

[justin808]

Is any PR needed for this issue? I'm glad to merge one in so long as at least one other person besides the PR author vouches for it. I won't have time to look at this for a couple of weeks.