-
-
Notifications
You must be signed in to change notification settings - Fork 198
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bootstrap's modal.js + utile.js import #338
Comments
AFAIK, Bootstrap itself is not really friendly with CommonJS, especially when using individual files. So I suggest you to keep importing the main |
Thank you for your reply, @stof! Sorry for the following question but since JavaScript is not reality my thing, I'll need some clarification from you. Are you suggesting that I should make a global boostrap import via something like |
@DaPo Webpack relies on CommonJS and ES6 modules. And individual Bootstrap files are not using CommonJS nor ES6 to define their dependencies, but use the old-school global variables. This means that their npm package is not compatible with the webpack ecosystem (at least regarding their individual files). The main bootstrap bundle on the other handle does not have such extra dependencies between Bootstrap parts, as everything is in a single part. There is still the issue about accessing jQuery itself, but Encore has you covered there thanks to What you would do in your own project would only be: const $ = require('jquery');
require('bootstrap'); This goes in your own file. And you don't need to put Bootstrap files themselves in the webpack config. Your entry should generally have only 1 file in it, which requires everything else. |
Okay, I understand. Thank you for your clarification, I'll test that. However, when you say
Bootstrap seems to make some ES6 export as you can see here, are you talking about that? |
@DaPo but these are not the files you are importing |
@Lyrkan in this bug report, imports are done from |
@Lyrkan I added the whole ugliJS thing as you described in the other issue and I have the following compilation error:
From the compilation:
😟 |
@DaPo That's probably caused by some missing babel plugins... as I said in my other post that's an annoying thing when importing from source files instead of dist:
Right now Bootstrap's I'd still recommend you to use |
@Lyrkan yep, that's what I was afraid of. Thank you for your time. Now, back to my original comment with that Util thing and all. 😢 |
I don't understand why: .autoProvideVariables({
Util: 'bootstrap/js/dist/util',
import 'bootstrap/js/dist/modal'; results with a Meeeeeh. |
That's because |
😭 |
So, I think I found something out. In a import Util from 'bootstrap/js/src/util';
global.Util = Util;
import 'bootstrap/js/dist/modal'; and it's working! 🎉 |
Hi @DaPo, I made a PR in Bootstrap to build our plugins in UMD, so you'll be able to choose what you want to import. See the PR, you'll find examples : twbs/bootstrap#26767 |
A new released of Bootstrap is out (https://github.com/twbs/bootstrap/releases/tag/v4.1.3) with the change I made to convert our plugins in UMD, so you won't have to use our sources files you'll have to use our |
Hello @Johann-S, Thank you for coming by! So I tried to do as you said in your PR, in a bootstrap.js file: import Util from 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/dropdown.js';
import 'bootstrap/js/dist/tab.js'; And it works like a charm, don't need to use Thank you for this PR and thank you for your work on Bootstrap. Cheers! |
@DaPo how did you managed jquery to work? i always get |
@donni106 please see my comment below yours it should help you. |
@DaPo I did that, of course, before I wrote. |
Ok, sorry I figured out that I posted in a wrong project. I have the same error but with different configurations. I am using Rollup and not Webpack/Encore. |
Hello team,
first of all, I want to thank you for having webpack-encore created. Webpack was a big issue for me but with Encore, everything seems to be easy to use. Very good job to y'all. Thank you again.
However, it seems like I have a trouble with Bootstrap's modal.js, its utile.js he is using and compilation with Webpack.
I'll try to make myself as clear as possible. Webpack and JavaScript are not exactly my thing and English is not my mother tongue, so, please, do tell me if you need any clarification or something.
In a first place, I tried to follow this tutorial about Bootstrap x Encore. But bootstrap-sass is no longer supported for bootstrap v4 as you can see in their readme and I'm working with bootstrap 4.1.1 (
"bootstrap": "^4.1.1",
from my package.json).So, my webpack.config.js looks like this:
It compils successfully as we can see here:
But when I try to open a modal on my website, I have this error:
Uncaught ReferenceError: Util is not defined
.So I assume that the
Util
global variable that bootstrap is using is missing, since Webpack create functions around file it is importing and all.So I added the following code in my webpack.conf.js:
It works well for Popper (required to by Bootstrap) but not with Util since I have the same
Uncaught ReferenceError: Util is not defined
.Soooo, after a few searches on GitHub and all, I found this comment.
I removed
Util
from bothautoProvideVariables()
and myaddEntry()
, modal.js as well to put them both in a bootstrap.js file:and added an entry for it in webpack.config.js:
And now, I have a error compilation:
So I tried to add babel following this documentation since it seems like it don't like the spread operator and it's not going well:
So here I am, opening an issue, asking for help.
I don't know what can I do more. If anyone had the same issue I'd be glad to hear for a solution.
Thank you for your time.
Edit I tried this one but I still have a
Uncaught TypeError: Util.getSelectorFromElement is not a function
when I try to open my modal.The text was updated successfully, but these errors were encountered: