Using extensions with Vite

[matteocontrini]

Hello, I'm using Vite as a bundler and I'm unable to make htmx extensions work.

If I write:

import 'htmx.org';
import 'htmx.org/dist/ext/preload.js';

it compiles correctly but I then get this error in the console:

Uncaught ReferenceError: htmx is not defined

I've also tried making sure that htmx is available globally:

import * as htmx from 'htmx.org';
window.htmx = htmx;

But it doesn't seem to make a difference.

So is there a way to use extensions with a bundler like Vite?

Thanks.

[xhaggi]

At the moment all extensions are missing a UMD wrapper. Therefore, you need to use the @rollup/plugin-inject
to inject htmx into the extensions.

// vite.config.js
import inject from '@rollup/plugin-inject'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    inject({
       htmx: 'htmx.org'
    }),
  ],
})

After configuring the plugin in your vite.config.js, you should be able to use the extensions.

import 'htmx.org/dist/ext/preload.js';

[matteocontrini]

@xhaggi that's helpful, thank you!

However I think there's still something else missing. For example, the preload extension is loaded correctly but doesn't seem to work in practice.

It appears that the htmx:afterProcessNode event (on which the extension relies) is never called. If I enable debug mode I only see an htmx:load event being called and nothing else.

Any ideas? I think I can provide a sample project if it's helpful.

[xhaggi]

Any ideas? I think I can provide a sample project if it's helpful.

Not really and yes, please provide some code or a sample project.

[matteocontrini]

I pushed a sample project here: https://github.com/matteocontrini/vite-htmx-problem

I might be doing something wrong but if you run it you'll see that preload doesn't work and in the console there is no htmx:afterProcessNode event logged.

If you instead open htmx.html (simple example with no Vite bundling involved) the event is triggered as expected.

Thanks!

[xhaggi]

Thank you. I looked deeper into this issue and the reason why it does not work, is the fact that htmx initialize itself on DOM ready. A <script type="module"> is always async and the DOM is ready at the time of evaluating the import from 'htmx.org', which then initializes htmx without the extension. You can achieve the same behavior by adding the async attribute to the <script> tags in the htmx.html file. At the moment I think there is a no workaround for this problem, but I am working on a fix and will create a pull request in the next few days.

[matteocontrini]

I imagined it was something like that but I'm not very familiar with htmx internals. Thanks a lot for investigating and working on this!

[Sciumo]

Is this issue still open and is there an example of using Vite with htmx?

[davidjr82]

@Sciumo I have the same problem, as a workaround I use htmx scripts at the end of the body, and it works fine. But I agree it would be great to have it working with Vite.

Hope it helps.

[xhaggi]

It appears that the htmx:afterProcessNode event (on which the extension relies) is never called. If I enable debug mode I only see an htmx:load event being called and nothing else.

The loading issue with extensions is fixed in the next version.

At the moment all extensions are missing a UMD wrapper. Therefore, you need to use the @rollup/plugin-inject
to inject htmx into the extensions.

This is not fixed and you need to use such a workaround. I have created a separate issue for this #1690.

[alexpetros]

It appears that the htmx:afterProcessNode event (on which the extension relies) is never called. If I enable debug mode I only see an htmx:load event being called and nothing else.

The loading issue with extensions is fixed in the next version.

At the moment all extensions are missing a UMD wrapper. Therefore, you need to use the @rollup/plugin-inject
to inject htmx into the extensions.

This is not fixed and you need to use such a workaround. I have created a separate issue for this #1690.

Closing for this reason.