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

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>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 37 (28 by maintainers)

Most upvoted comments

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

ChristophAnastasiades on Dec 28, 2017

we hope to ship a new beta soon and it’ll be the last beta 👍

Johann-S on Nov 14, 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 Oct 23, 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 Oct 19, 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 Oct 19, 2017