I am having an issue with my wordpress page - as I am always getting this JS error:
Uncaught ReferenceError: _ is not defined
The line of code it is referring to, is the _.noConflict(); statement below. However, as you can see, the lodash is just loaded right above it, and should have provided the _ variable. Any thoughts why this is happening?
<script type='text/javascript' defer src='https://website.com/wp-includes/js/dist/vendor/lodash.min.js'></script>
<script type='text/javascript'>
window.lodash = _.noConflict();
</script>
I appreciate any hint
You are loading lodash deferred, which means it'll wait to load, but you're trying to use it immediately. By the time that second part runs, lodash hasn't been loaded yet.
You need to stop deferring the lodash load or wrap the second bit of code in some kind of ready callback that won't run until lodash has been loaded.
You can await for lodash being available.
const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay));
const getLodash = () =>
new Promise(async (resolve) => {
while (_ === undefined) {
await sleep(100);
}
resolve(_);
});
(async () => {
window.lodash = await getLodash();
})();