Comments (17)
The original override seemed like it worked initially. When you do something that uses ajax or promises you find out quickly that breeze doesn't have it's Q and jQuery dependencies.
Here's a similar override that uses npm which results in a lighter download than the github endpoint:
jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.min.js', format: 'amd', dependencies: { jquery: '^2.1.0', Q: 'npm:q' }, shim: { 'breeze.min': { deps: ['jquery', 'Q'] } } }"
I'm seeing the Q and jQuery scripts download in the network tab. Haven't been able to figure out why breeze isn't able to pick them up.
Thinking it has something to do with the way breeze does this, this and this.
note: I tested the above override with every format
option
Breeze is known to work with requirejs- I must be missing something simple here.
current workaround
jspm install npm:q
jspm install jquery
jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.min.js' }"
import Q from 'q';
import jQuery from 'jquery'; // jQuery must be imported before breeze.
import breeze from 'breeze-client';
breeze.config.setQ(Q);
// now breeze is ready to go...
export default breeze;
from registry.
It sounds like Q isn't defining into the window global, which is the way breeze expects to find it?
from registry.
To test, I installed the unminified version of breeze:
jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'amd', dependencies: { jquery: '^2.1.0', Q: 'npm:q' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"
When the application does import breeze from 'breeze-client';
, I hit the breakpoints I had set in both Q and jQuery to confirm they were being loaded. When I arrived at a breakpoint in breeze, neither Q or jQuery are defined:
Later on, some application code uses breeze to make an ajax call. At this point, "Q" is defined, although not on the window object:
from registry.
Yes it should have window.Q
and window.jQuery
defined - I'm not sure why they're not.
If you look at the top of the source file, can you see the shim? It should look like "deps jquery"
.
from registry.
yep:
"format global";
"deps jquery";
"deps Q";
(was most recently testing with format: global)
from registry.
That looks right. I'd be suprised if window.jQuery and window.Q are not defined with the above settings. If you add a console.log right after to check if they are what do you get? If you just import jQuery or Q on their own, can you see them defined on Window?
from registry.
I restarted with new package.json, config.js, etc- here's what I'm seeing: 56 second screencast.
window.jQuery IS defined. window.Q is not. When I import Q by itself it's not defined on window either.
I must have screwed something during all the testing I was doing- it's like you've said all along, issue is related to Q.
from registry.
@jdanyow thanks for persevering on this. Right so you need to ensure Q is defining onto the window. And because we're loading it from npm, it's not defining onto the window as this isn't the common practice for CommonJS modules.
That's why I'd suggest checking which version of Q bower uses and look at using that, as that version would be designed for the browser and set to define the global.
from registry.
bower is installing 2.0.2- same as what jspm has been installing:
Took a look at the Q 2.0.2 code, couldn't see any place where it defined a global. The Q readme say v2 is experimental.
Decided to test with Q 1.1.2, used this override:
jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'global', dependencies: { jquery: '^2.1.0', Q: 'npm:[email protected]' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"
This seemed like a long shot, the Q 1.1.2 source says it only creates a global when loaded via a script tag:
Ended up here when debugging this:
Previously I had reported the jQuery was defined when stopped at a breakpoint on the "deps.." shims. Lately I've been testing by backing out everything in my config.js and packages.config, deleting my jspm_packages folder, running a fresh install, etc. This probably isn't necessary but it's helpful to assure myself that I'm testing from a "clean" spot.
I'm now seeing both jQuery and Q are not defined.
Here's a quick 1.5 minute screencast of me running through the steps to clean up, install and debug this:
http://screencast.com/t/z37xFrbXK
I'm probably doing something silly- I'm a noob on the git/gulp/jspm/etc scene.
from registry.
@jdanyow try using q from GitHub instead of npm.
from registry.
You want Q to load as a global, so you probably want to override the GitHub version with "format": "global".
from registry.
Before I do that- did you see this: http://screencast.com/t/z37xFrbXK
Am I doing something silly? Why is window.jQuery undefined?
Is it possible that when using format=global, system needs to make sure any shim dependencies are also installed as globals on window?
from registry.
@jdanyow it looks like you're using jQuery from npm, which would cause the same issue as with Q - it won't define the global. I'd suggest doing jspm install jquery -f
.
from registry.
ok- that makes sense, given all this is to create a package override for breeze, is it possible to express what you're suggesting in the override syntax?
In other words, people won't explicitly be installing jQuery or Q, they'll be executing jspm install breeze-client
which in turn needs to bring in jQuery and Q in a way that will work for breeze.
jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'global', dependencies: { jquery: '^2.1.0', Q: 'npm:[email protected]' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"
from registry.
@jdanyow so the point is that you need to first create the override for Q, so that you can create the override for breeze:
jspm install npm:q -o "{ shim: { 'path/to/q': { exports: 'Q' } } }"
jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'global', dependencies: { jquery: '^2.1.0', Q: 'npm:[email protected]' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"
Something like that? Sorry I can't be of more help right now.
from registry.
Hey @guybedford, looks like I won't need a complex package override for breeze after all...
@wardbell recommended replacing breeze's standard ajax adapter and promise implementations with implementations that use ES6 promises and aurelia's http-client. This way breeze won't have deps on Q and jQuery.
I appreciate the help troubleshooting this. Apologies for bugging you.
-jd
from registry.
Great to hear that. Just let me know if you need more help.
from registry.
Related Issues (20)
- Difference between Jenkins and local build HOT 7
- Slow/flaky npm.jspm.io registry HOT 7
- intro.js overrides? HOT 1
- npm Debug package override not applying HOT 3
- some fetch errors while making ts bundle HOT 1
- Latest d3 breaks jspm install HOT 3
- registry CI failure caused by transitive dependency update
- GitLab endpoint? HOT 1
- I'm confused by the module format documentation in the wiki HOT 2
- Is there a way in my package.json to tell JSPM not to install a specific dependency? HOT 14
- Mapping a dependency to `@empty` changes the import path
- Bootstrap install fails HOT 5
- `jspm install` not outputting anything in Windows bash
- React Router Dom 404
- new HOT 1
- Question: how much can I use dev.jspm.io? HOT 2
- kasperlewau.github.io/registry is not found HOT 1
- Licensing information. Can this project make it explicit?
- @shopify/app-bridge-utils is missing all new versions for the last 9 months HOT 2
- Self-hosting JSPM? HOT 5
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 registry.