wp is not defined in Sage 11 dev main

sage
1

Out of the box, import domReady from "@wordpress/dom-ready"; in app.js compiles to this:

const domReady = wp.domReady;;

But when I load a front-end page, I see:

app.js:6 Uncaught ReferenceError: wp is not defined
    at app.js:6:18

Any idea how to resolve this?

editor.js is using the same import but does not throw the error, so global wp is obviously available there. Why not on the front side?

2

curious why you’re reaching for that on the frontend? you should be able to do something like:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('wp-dom-ready');
});

but im not sure i see the point.

1 Like
3

Is it no longer necessary to call scripts after DOMContentLoaded in app.js?

I just thought that using @wordpress/dom-ready was the new “preferred” way to do that in Sage.

If the compiled app scripts are already loaded asynchrously or deferred then I suppose I can just instantiate classes and run my code directly. Is that the case with the new Vite approach?

In other words, suppose I have a Nav class that does some sauce, I would just have this in app.js ?

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

import { Nav } from './components/Nav';

new Nav();

That does seem to work but I’d just like to confirm there is no need for a manual listener for DOMContentLoaded.

4

yeah i dont think the overhead of using the wordpress package is worth it for the new implementation. for Vite, it’s setup so it resolves these dependencies from @wordpress/* to wp.* for use in the editor where they are typically always available already and thus dont need to actually get bundled into our editor.js vs. if you wanted to use it on the frontend you’d have to enqueue the wordpress dom-ready script and have that unnecessary additional script.

imo stick to what you have there if it works. you could reach for DOMContentLoaded or something if you ran into issues but i can’t remember the last time ive had to use that in a bundle (although i do lean heavily on alpine nowdays).

1 Like
5

Hi @Log1x - thanks for the clarification. So far I am not seeing any issues at all with just eliminating any kind of DOMContentLoaded callback - it just works out of the box.

Absolutely LOVING the new Vite version :slight_smile:

1 Like