-
Notifications
You must be signed in to change notification settings - Fork 109
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
Import Order in ES6 / Dependencies #4
Comments
Oopsie, what a silly developer I am 😥 I totally forgot about testing the jQuery import, and now that I see it properly, in ES6 the window variables are not accepted anymore, that's why other packages can't read it. I need to update the gulp workflow to properly compile and package everything. I'll fix it ASAP and push the updated version. |
@SamThilmany What I had to do was implementing If you pull the latest code you will notice that I'm using require instead of import for jquery, and declaring the /**
* Manage global libraries like jQuery or THREE from the package.json file
*/
var $ = require( 'jquery' ); For globally required variables, if you want to use my method in order to package and bundle all the scripts into a single one, you need to update the Here's the example related to jquery "browser": {
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
"jquery": "$"
}, Here I'm declaring the global variable $ to use jquery from the node_modules folder. I also deregistered by default the built-in jquery version of WordPress. |
@Alecaddd The packages still yell at me, because they require If I manage to get it up and running, I'll definitely share it, but I don't mind if you keep you eyes open too. 😉 |
@SamThilmany I left iziModal required in the Also, did you run |
Yeah, I did run I now added
which seems to do the trick with
If I comment out If you like to see the code, I just made a git repo. Note that I didn't use your latest version of the |
I just set up a WordPress site for testing your latest
|
Thanks for the extra info, I'm glad it works on a standard WP installation (that was my main goal 😛), but it doesn't make sense not working externally, or with other libraries like Bootstrap. |
@SamThilmany Any updates on this issue? If it works with WordPress and the theme, I would like to close it. |
No, it still does not work. I just set up a new local site with your latest code by using your
PS: The
|
I tested it and it works for me! Here's what I did:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap'; Compiled everything with Gulp with the latest version of AWPS, the one with this configuration of browserify-shim inside "browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
"jquery": "$"
} Everything works for me, including tooltips, modals, carousel, etc. |
Hmmm... I've exactly the same code 😕 Tested in Safari 10.1.1 (12603.2.4) and Chrome 58.0.3029.110 (64-bit). The error message is Chrome is a bit longer:
|
Are you sure you have my same You also said that you're using my code outside a WordPress theme. |
I noticed this bug for the first time in the
awps
theme, but it was also very simple to reproduce it in a non WordPress-based project. If theimport
-function in ES6 is used like this,one would expect, that all the imports other than jQuery, which may be dependent on the latter, are loaded correctly, since jQuery has already been defined before. Unfortunately, JS is not executed consecutively and so very often an error message appears in the console, which tell one, that the script XY needs jQuery:
Probably it only works, if script A, that is dependent of script B, is bigger than script B, because then script A will be finished earlier with processing and thus be in front of script B in the resulting
main.min.js
. In my case, the code bit throwing the error was in line 8 of mymain.min.js
, so definitely before the jQuery code.Here is the code bit of
iziModal
:Does anyone have an idea how to handle this bug?
PS: In Alex' video, this bug is not noticeable, because WordPress integrates jQuery before loading other scripts and Alex did not unregister WP jQuery.
The text was updated successfully, but these errors were encountered: