Question 2970 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Javascript error "_ not defined" with lodash and wordpress

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

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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();
})();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search