Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[2.0] Webpack installation, global HTMX properties undefined #2628

Open
Jesmaster opened this issue Jun 17, 2024 · 6 comments
Open

[2.0] Webpack installation, global HTMX properties undefined #2628

Jesmaster opened this issue Jun 17, 2024 · 6 comments
Labels
2.0 bug Something isn't working

Comments

@Jesmaster
Copy link

I just tried updating to 2.0 in my Webpack project and it looks like issue #1964 came back. Having the exact same problem as then.

Switching back to version 1.9.12 fixes the issue.
@Jesmaster Jesmaster changed the title [2.0] Webpack installation, global HTMX variable undefined [2.0] Webpack installation, global HTMX properties undefined Jun 17, 2024
@Telroshan Telroshan added bug Something isn't working 2.0 labels Jun 18, 2024
@1cg
Copy link
Contributor

1cg commented Jun 18, 2024

may be related to #2629

not familiar w/ webpack does it use any of the javascript modules? if so you might need to switch to the new module-specific files in the distribution

@Jesmaster
Copy link
Author

The webpack installation documentation hasn't been updated so I assumed the setup is the same. None of the other js libraries I use in webpack need to specifiy any special module types.

https://htmx.org/docs/#webpack

@1cg
Copy link
Contributor

1cg commented Jun 18, 2024

entirely possible that those instructions are wrong now, unfortunately, since no one on the core team that I'm aware of uses webpack. We will get the .d.ts file fixed in the next release and then we can try again, and then maybe try by referencing one of the module files (/dist/htmx.esm.js ?) and then update the docs if necessary. Can you try referencing the esm file now just to see if it does anything different?

@Jesmaster
Copy link
Author

I figured out how to set it up correctly. I'll create a pull request to fix the documentation.

For anyone who needs it

window.htmx = require('htmx.org');

becomes

import htmx from "htmx.org/dist/htmx.esm";
window.htmx = htmx;

@restless
Copy link

Thanks @Jesmaster you've helped me to resolve my issue.

I use Vite and I had to do a similar change there. In the vite.config.js file i had to replace htmx.org with the htmx.org/dist/htmx.esm:

    plugins: [
      inject({
        htmx: 'htmx.org/dist/htmx.esm',
      }),
    ],

This is related to: bigskysoftware/htmx-extensions#128

@restless restless mentioned this issue Jun 20, 2024
Open
@anentropic anentropic mentioned this issue Jun 21, 2024
Closed
@restless restless mentioned this issue Jun 24, 2024
Open
4 tasks
@gbourant gbourant mentioned this issue Jun 29, 2024
Closed
@verheyenkoen verheyenkoen mentioned this issue Jul 3, 2024
Merged
@cdmistman
Copy link

fyi using htmx 2.0.2 htmx.org/dist/htmx.esm doesn't seem to exist (via node_modules). With Astro (which uses Vite) all I had to do in my <head> was:

<script>
	import htmx from 'htmx.org';
	window.htmx = htmx;
</script>

and i confirmed presence in the browser by printing window.htmx in the js console

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
2.0 bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@restless @1cg @Jesmaster @Telroshan @cdmistman