Javascript error "_ not defined" with lodash and wordpress

Question

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

Answer 1

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.

Answer 2

Try to remove 'defer' in first script tag or add a defer to the second script tag. A 'defer' in script tag means it's executed after the page has finished parsing. Here is a more detailed explanation.

Answer 3

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();
})();