Comments (12)
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.
Thanks for flagging this out.
from awps.
@SamThilmany
Ok, it should be solved now.
What I had to do was implementing browserify-shim
in order to properly import variables to be used globally.
If you pull the latest code you will notice that I'm using require instead of import for jquery, and declaring the $
variable
/**
* 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 package.json
file.
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'm declaring the "jquery" alias in the "browser" declaration so I can use the require('jquery')
without redeclaring again the full path of the file.
I also deregistered by default the built-in jquery version of WordPress.
Let me know if it works for you.
from awps.
@Alecaddd
Thank you very much for your quick changes.
Unfortunately it seems, that this does not do the trick (in my case at least).
The packages still yell at me, because they require jQuery
. I tried with browserify-shim
and browserify-global-shim
while using your code or the one provided by the documentation of the package. In both cases 'jQuery' seems to be loaded too late...
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. 😉
from awps.
@SamThilmany
Mhhhh, are you sure you pulled the updated code?
I left iziModal required in the main.js
file and it doesn't trigger any error for me. Both jQuery
and $
sign works inside imported libraries.
Also, did you run npm install
again to get the new required packages?
from awps.
Yeah, I did run npm install
and I also think, that I updated all my files. I didn't pull though, because I'm currently using your gulp
-code in a non-WordPress project.
I now added
"browserify-shim": {
"jquery": "$",
"main": {
"depends": [
"jquery"
]
}
},
which seems to do the trick with jQuery
, but now he tells me that he can't find the module:
Error: Cannot find module 'tether'
If I comment out tether
, It's the next module which is included in main.min.css
which cannot be found. This is really weird to me...
If you like to see the code, I just made a git repo. Note that I didn't use your latest version of the gulpfile
, because I don't have an account.js
and so I also don't need to map over several files.
from awps.
I just set up a WordPress site for testing your latest awps
theme and it works well, even if I don't understand why.
But, it only works using the iziModal
package (and maybe some others, who knows). I now tried to include Bootstrap
and guess what, there's a little issue here.
ReferenceError: Can't find variable: jQuery
from awps.
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.
I will investigate more and let you know!
from awps.
@SamThilmany Any updates on this issue?
If it works with WordPress and the theme, I would like to close it.
from awps.
No, it still does not work. I just set up a new local site with your latest code by using your awps-cli
. When adding import 'bootstrap'
I still get the error message:
Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
PS: The main.js
now looks like this:
/**
* Manage global libraries like jQuery or THREE from the package.json file
*/
var $ = require( 'jquery' );
// Import libraries
import 'bootstrap';
import 'tether';
import 'slick-carousel';
import 'izimodal';
// Import custom modules
import App from'./modules/app.js';
import Carousel from './modules/carousel.js';
const app = new App();
const carousel = new Carousel();
from awps.
I tested it and it works for me!
Here's what I did:
- Installed Bootstrap via npm
npm install bootstrap@3
- Imported the compiled and minified CSS into my
style.scss
file
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
- Imported Bootstrap in my
main.js
file
import 'bootstrap';
Compiled everything with Gulp with the latest version of AWPS, the one with this configuration of browserify-shim inside package.json
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
"jquery": "$"
}
Everything works for me, including tooltips, modals, carousel, etc.
from awps.
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:
Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
at Object.n.1 (main.min.js:1)
at o (main.min.js:1)
at main.min.js:1
at Object.n.6../modules/app.js (main.min.js:7)
at o (main.min.js:1)
at t (main.min.js:1)
at main.min.js:1
from awps.
Are you sure you have my same package.json
file, with my same exact configuration?
If it's different, please use mine, delete your node_modules folder and run npm install
again.
You also said that you're using my code outside a WordPress theme.
How did you update the gulpfile.js
did something change there?
Be sure the JS compiling follows my same order of browserify
and babelify
.
from awps.
Related Issues (20)
- Is this project alive? HOT 1
- Testing wordpress v5 beta2 HOT 2
- Warnings and errors HOT 2
- css double slash in path HOT 1
- Request Changelog feature HOT 5
- TypeError: Cannot read property 'RichText' of undefined in gutenberg.js HOT 3
- Call to undefined function svg() HOT 5
- PHP dotenv v3+ new method required in wp-config.php HOT 1
- Fontawesome $fa-font-path Error HOT 6
- Sourcemaps
- Woocommerce product page (Product Gallery not working) HOT 1
- Unload module javascript file HOT 1
- The site is experiencing technical difficulties while following awps HOT 1
- Carousel css not loaded HOT 1
- Fatal Error Dotenv HOT 2
- Dotenv isn't pulling WordPress environment variable values from .env file HOT 2
- Running "npm run dev" throws error from "sass-loader" HOT 3
- Use GitHub CI
- Usage with Local? HOT 1
- "/" as divider in SCSS files throwing depreciation warnings
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from awps.