Bootstrap: Bootstrap 4.0 current git no longer works in WordPress TypeError: $ is undefined

Created on 18 Oct 2017 · 37Comments · Source: twbs/bootstrap

I had this working before. I enqueued the scripts in a correct way but now it no longer works.

This may have to do with the fact that WP loads jQuery in noConflict mode and BS assumes $ to be jQuery? Or with the recent rewrites?

How can I fix this?

I have outdated code running on nextgenthemes.com where this issue is also present.

Firefox Errors:

TypeError: $ is undefined[Weitere Informationen]  bootstrap.js:88:5
TypeError: $(...).tooltip is not a function[Weitere Informationen]

Chrome errors:

Uncaught TypeError: Cannot read property 'fn' of undefined
    at setTransitionEndSupport (bootstrap.js:88)
    at bootstrap.js:151
    at bootstrap.js:153
    at bootstrap.js:3836
s.js:17 Uncaught TypeError: $(...).tooltip is not a function

Tried to reproduce this in JSbin with the old jQuery 1 version but that works fine.

This is it basically what I have running with everything else cut.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <script type='text/javascript' src='https://nextgenthemes.dev/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
</head>

<body>

    <script type='text/javascript' src='https://nextgenthemes.dev/wp-content/themes/s/node_modules/popper.js/dist/umd/popper.js?ver=1.12.5'></script>
    <script type='text/javascript' src='https://nextgenthemes.dev/wp-content/themes/s/node_modules/bootstrap/dist/js/bootstrap.js?ver=v4.0.0-beta'></script>
        <-- script that uses tooltips -->

</body>

</html>

awaiting-reply js v4

Source

nextgenthemes

All 37 comments

There something wrong with your page.
I have got a lot of errors.

wojtask9 on 18 Oct 2017

@wojtask9 Thanks for trying but use nextgenthemes.com you can not access nextenthemes .dev because that's VM that runs on my local machine ;)

nextgenthemes on 18 Oct 2017

Not sure how we can reproduce your bug :worried:

Johann-S on 18 Oct 2017

also, this feels more like a how-to question rather than a bug specifically with bootstrap...

patrickhlauke on 18 Oct 2017

No its not a how-to question. I know how to include scripts into WP. With wp_enqeue_script() ... it worked b4 and I got errors the point directly into the boostrap JS so that why I think this may have something do do with some recent changes.

nextgenthemes on 18 Oct 2017

I am trying to isolate this as best as possible. I am currently only loading jQuery from WP and popper and bootstrap.

When I load the minified version I get this in Firefox.

TypeError: e is undefined

and with the normal version I get.

TypeError: $ is undefined and it points to line 88 in the current JS`

    $.fn.emulateTransitionEnd = transitionEndEmulator;

nextgenthemes on 18 Oct 2017

So it seems you don't have $ available in the global scope

Johann-S on 18 Oct 2017

@nextgenthemes: can you move all your scripts to the same place, either header or before the end body tag?

Also, you could jump on Slack and talk to @Johann-S to see how to reproduce this. Maybe provide access to a WP site you have the issue.

XhmikosR on 18 Oct 2017

@Johann-S Well that is what I thought because WP does this noConflict() thing with jQuery and I actually do not know how to make it global ... but it was actually not that.

Fixed it. I think I had file corruption. I just deleted all my node_modules and installed them again and now it works.

$ rm -rf node_modules 
$ npm install --production
[email protected] /home/user/wp-content/themes/s
├── [email protected] 
├── UNMET PEER DEPENDENCY jquery@>=3.0.0
├── [email protected] 
├── [email protected] 
└── [email protected]

Sorry I just thought its something about jQuery that WordPress includes and Bootstrap.

nextgenthemes on 18 Oct 2017

just for information. When writing jQuery for WordPress you have to do this kind of wrapper because there is actually no global $ that is jQuery. Bootstrap does not seem to care about that.

(function ( $ ) {
    'use strict';

        // use $ inside wrap.
    $( '.site-header [rel="tag"]' ).wrapInner( '<span class="tag-wrap"></span>' );

}(jQuery));

nextgenthemes on 18 Oct 2017

Actually I was right after-all I just did setup the JSBIN wrong with the 4.0.0-beta version that does not have this issue. And deleting my node_modules actually just downgraded my bootstrap version. I got a JSbin ready now and it shows that bootstrap requires jQuery 3.0. Since when is that?

The 4.0.0-beta that currently ships with npm does work fine but the latest git does not work. Latest BS4 git does not work with WordPress (version of jQuery)! And its strongly discouraged to use other version of jQuery then the shipped one when working with WP related projects.

I saw you are in the process in writing BS4 so there is no need for jQuery at all? Is that right? If so I guess I stay on 4.0.0-beta until then.

  "bootstrap4git": "git+https://github.com/twbs/bootstrap.git#v4-dev",
  "dependencies": {
    "bootstrap": "^4.0.0-beta",
    "open-iconic": "^1.1.1",
    "popper.js": "^1.12.3",
    "stickyfill": "^1.1.1"
  },

If I replace the bootstrap line in dependencies with the line for latest git and install that latest git version I get the error again. Strangely enough I just reproduced the error about TypeError: $ is undefined on JSBin but now I just get the error from bootstrap about the wrong jQuery version and its actually working, at least the tooltips. Despite that outdated jQuery.

nextgenthemes on 19 Oct 2017

❤1

Please try not to mix separate issues.

Yes, we require jQuery v3.0.0, because any older versions are no longer used by us nor tested.

https://github.com/twbs/bootstrap/commit/b72489a8515a90f3e45baf3d0bf19df9ccafff93

Now, like I said above, https://github.com/twbs/bootstrap/issues/24417#issuecomment-337642873

I'm also available on Slack so I could look into a test site as long as you provide access to it.

XhmikosR on 19 Oct 2017

Plus jQuery 3 match our BS 4 compatibility and fix some XSS presents in older release of jQuery

Johann-S on 19 Oct 2017

@XhmikosR I did not mix any issues, this is one and the same issue I got from the start. I renamed the title as I actually meant latest git rather then 4.0.0-beta specifically.

b72489a was on august 22. 4.0.0-beta release date was b4 that? So in 4.0.0-beta jQuery 1 is supported?

There is no need to look into any test site, I already explained (was I so unclear?) I found out what this is about on my own so why would I need help? Thanks anyway.

Would be nice to get a answer to my question about replacing jQuery completely. I will search for it, just saw a meta issue about it briefly.

To be clear: I reopened this because as it turns out current git is not compatible with WordPress. And that issue stands. Not because I need help. I read about this issue back then when you initially wanted to support only jQuery 3.0.0 only and then did in fact decided against this because many people specifically mentioned WordPress and were against it. Powers 27% of the web as they say. Did you did this change silently or was there any issue where people talked about that? I thought or expected that the decision was made for the entire 4.0 circle. So apart from you not wanting to run the tests the were setup and working fine no real reason I guess. XSS? Well yeah but thats not a real reason as people can just be strongly recommended not to use old versions. Also sure that there are XSS issues that no longer get security fixed for older versions?

I think it should only be closed if jQuery is removed as a dependence or if WP decided to ship version 3.0 so long you have made them incompatible with this change.

nextgenthemes on 19 Oct 2017

👍1

That's a bit strange for me to use a jQuery version recommanded for (IE 8, 9) when you use BS 4 which target IE 10 and higher :thinking:

About the XSS see : https://nodesecurity.io/advisories/jquery_xss

Johann-S on 19 Oct 2017

jQuery 1x wasn't supported in v4.

What you are referring to is more than a year ago. And it's not my choice only.

That being said, I'm discussing with @Johann-S on Slack if we should just require 2.x and make it the minimum again and test that instead of 3.x.

XhmikosR on 19 Oct 2017

But before beta 2 folks were able to use BS4 with jQuery 1.x :worried:

Johann-S on 19 Oct 2017

@Johann-S: that is not true. https://github.com/twbs/bootstrap/commit/b72489a8515a90f3e45baf3d0bf19df9ccafff93 was merged on Aug 22, and previously the version check was for 2.x.

XhmikosR on 19 Oct 2017

but the error thrown were :
throw new Error('Bootstrap\\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0')

and files from our first beta :

Johann-S on 19 Oct 2017

OK, I'll revert the patch to require 1.9. Tests will use 3.x, right?

XhmikosR on 19 Oct 2017

Closed thanks to #24434

Johann-S on 20 Oct 2017

I'm having the same issue. With Beta v1 everything is great with WordPress and Bootstrap. With v2. I get the error: Uncaught TypeError: Cannot read property 'fn' of undefined

$ seems to be ok globally and everything else jQuery related in my scripts work fine. I'll try and create a reduced test case, but I wanted to post here first.

danimalweb on 22 Oct 2017

Also having this issue in Drupal, will wait for beta 3

Skipvanthof on 23 Oct 2017

Old site using jquery 1.9.1 BS 4 no longer works as well.

emage on 23 Oct 2017

@emage: which Bootstrap version are you using? This was fixed in beta2. And what's the exact error?

XhmikosR on 23 Oct 2017

@Johann-S This is not fixed for me. Why did you close this already? If I am seeing this correctly then there are actually no real code changes in #24434 but just a change about the error message not being displayed.

@danimalweb

Uncaught TypeError: Cannot read property 'fn' of undefined

Yes that is the exact error I get in chromium while in Firefox its $ is undefined.

And I have finally reproduced this on jsbin, taking the jQuery version from WordPress. Its basically jQuery with the jQuery.noClonflict(); at the end of the file I guess. So this is about that, I thought so.

// looks there is a real fix bit the dist/ files need to updated to rawgit to get that version. Will they only be updated when beta3 comes out?

nextgenthemes on 23 Oct 2017

👍1

@XhmikosR

My apology. Updated to the newer bootstrap CDN now the error is gone.
Thanks!

emage on 24 Oct 2017

For the lucky ones using webpack to manage their assets you can simple use imports-loader to provide $ global only to the imports that require it.

import 'imports-loader?$=jquery!bootstrap'

entr on 1 Nov 2017

Just chiming in that I'm seeing the same issue with WordPress. Same exact issue as @danimalweb where Beta 1 worked fine, but now Beta 2 is throwing the error Uncaught TypeError: Cannot read property 'fn' of undefined.

WordPress is showing jQuery version 1.12.4.

The only way I can get Bootstrap to work is by completely deregistering jQuery with wp_deregister_script('jquery') and re-registering it myself with a version that includes jQuery.noConflict(); at the end (for some reason the WordPress version of jQuery does not include the noConflict()).

Edit: This pull request fixes it, so it looks like this will be solved with beta 3.

chrisblakley on 8 Nov 2017

Getting the same error Uncaught TypeError: Cannot read property 'fn' of undefined. It depends also in how you load the scripts. Hope they fix it asap

edudix on 13 Nov 2017

@edudix

This is actually fixed in #24530 on master but if you use public CDNs you need to w8 for beta3 to get this fix.

nextgenthemes on 13 Nov 2017

we hope to ship a new beta soon and it'll be the last beta :+1:

Johann-S on 14 Nov 2017

👍1

It seems and as I know that there is a problem with js. My tests where these:

Calling popper bootstrap.js as requested by Bootstrap 4 from functions many errors related to 'fn'.
Calling from the footer but locally..... many errors as well...
Calling it from the CDNs no problem at all in the console debug.

I hope you fix it asap!

edudix on 18 Nov 2017

@edudix how about you actually read the comments! Its is fixed FFS!. Get the latest git or wait for beta3 to be released.

nextgenthemes on 18 Nov 2017

I had the exact same issue and I can confirm this is working as soon as upgrading to beta 3.

ChristophAnastasiades on 28 Dec 2017

🎉1

I had this problem with an Angular app.
I fixed it by installing jquery.
Why can't you people have an intelligible error message prompt up?
Your JavaScript libraries are cancer.