Uncaught TypeError: Cannot read properties of undefined (reading 'applyStyles')

[ahsynv]

Bug description

tippy.min.js:formatted:884 Uncaught TypeError: Cannot read properties of undefined (reading 'applyStyles') at tippy.min.js:formatted:884:33 at tippy.min.js:formatted:2:214 at tippy.min.js:formatted:3:2

Reproduction

It is happening when we include tippy.min.js & popper js file dynamically after page loading.

[shah]

We see a similar error when loading dynamically after page load:

This is on up to date Edge Chromium on Windows 11 loading from //unpkg.com/@popperjs/core@2 and //unpkg.com/tippy.js@6.

[atomiks]

You have a async race condition problem: @popperjs/core must always be loaded before tippy.js

[shah]

Good advice @atomiks - I'm using script.js's bundle mechanism like this, do you see anything I might be able to improve?

$script(["//unpkg.com/@popperjs/core@2", "//unpkg.com/tippy.js@6"], 'tippy-bundle', () => {
    // Tippy.js should be ready to use after this but window.tippy is not available because of 
    // Uncaught TypeError: Cannot read properties of undefined (reading 'applyStyles')
});

Thanks!

[atomiks]

Based on the docs you're loading both scripts asyncronously while @popperjs/core must be a dependency:

$script('//unpkg.com/@popperjs/core@2', () => {
  $script('//unpkg.com/tippy.js@6', () => {
    // tippy.js is ready with no async race conditions
  });
});

[shah]

Got it @atomiks - thanks! It's working now.