0

I'm using Emberjs to build a front end to a WordPress site. It has two javascript files 1. vendor.js and 2. myapp.js. On Ember's dev server, the app works correctly but when I add the production builds to the WordPress app, I'm getting errors which suggest that the vendor.js file is not loaded prior to myapp.js. Note, vendor.js has jQuery inside it (along with other vendor code).

This is what I'm doing to add the js files to my WordPress app. In functions.php of my theme I do

function add_my_js(){

     wp_register_script('vendors', get_template_directory_uri() . '/vendor.js', array(), '20151006', true);
     wp_register_script('myapp', get_template_directory_uri() . '/myapp.js', array(), '20151006', true);

     wp_enqueue_script('vendors');
     wp_enqueue_script('myapp');
}
add_action('wp_enqueue_scripts', 'add_my_js');

With that code, I can see (and click on) links to both js files on the front page of my WordPress app (in development server) so I know the files are both included. However, the error message I'm getting from the Ember app suggests that the vendor.js file might not be loaded at the correct time for the myapp.js file.

Question: is there another way to ensure that the first file is loaded prior to running the second file?

  • what is the error message? are you aware that WordPress jQuery is in noConflict mode? – Milo Oct 13 '15 at 15:28
  • @milo the error message is related to Emberjs, but this noConflictmode might be part of the problem, because the Ember error message might be related to jquery dom not being ready, which I found weird because the vendor.js file I am linking in has jquery included. So does that possibly mean two versions of jquery (one included by WordPress by default?) and the one included in the vendor.js file are getting in the way of each other? – Leahcim Oct 13 '15 at 15:36
  • i.e. is there a way to turn off the jQuery library included with WordPress and just use the one included in vendor.js, which Ember needs? – Leahcim Oct 13 '15 at 15:37
  • add the error message to your question! – Milo Oct 13 '15 at 15:39
1

You could add the script that needs to go first as a requirement of the second one. Something like this:

wp_register_script('myapp', get_template_directory_uri() . '/myapp.js', array('vendors'), '20151006', true);
  • thanks for the suggestion but it doesn't fix the problem – Leahcim Oct 13 '15 at 13:53
1

Jeff's answer should work. Open it up in Chrome, open up the dev tools, and click on the Network panel and then refresh your browser. This will show the order in which all of your assets are loaded. Make sure the names (ie. vendors) are correct.

Just to get it to work you could set the last argument to false in your wp_register_script function. If you have the wp_footer call in your theme it will move the call for the file down to the footer so its called later. May not be ideal for your situation, but could help you at least get it running.

  • ok, it seems to be calling the scripts in the right order but the error remains (and it only exists when i'm including the files in the WordPress app i.e. not when I use the Ember development server) – Leahcim Oct 13 '15 at 14:35
  • Dont have enough points to comment in the appropriate place, but it sounds like the jQuery issue. Check this out here codex.wordpress.org/Function_Reference/wp_deregister_script and try wp_deregister_script( 'jquery' ); to remove WP version of jQuery – esteban Oct 13 '15 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.