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.

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

'htmx.d.ts' is not a module #2733

Closed
Alexerson opened this issue Jul 16, 2024 · 6 comments
Closed

'htmx.d.ts' is not a module #2733

Alexerson opened this issue Jul 16, 2024 · 6 comments
Labels
2.0 bug Something isn't working

Comments

@Alexerson
Copy link
Contributor

With htmx 2.0.1, I get the following error when trying to import htmx from "htmx.org";:

File './node_modules/htmx.org/dist/htmx.d.ts' is not a module.ts(2306)

I believe this is happening because the htmx.d.ts file should include export default htmx;.
Adding this line manually in the file fixes the issue.

I will create a PR for this.

Alexerson pushed a commit to Alexerson/htmx that referenced this issue Jul 16, 2024
Alexerson pushed a commit to Alexerson/htmx that referenced this issue Jul 16, 2024
Alexerson pushed a commit to Alexerson/htmx that referenced this issue Jul 16, 2024
Alexerson pushed a commit to Alexerson/htmx that referenced this issue Jul 16, 2024
@Telroshan Telroshan added bug Something isn't working 2.0 labels Jul 17, 2024
@renannprado
Copy link

renannprado commented Jul 21, 2024

This is my complete tsconfig.json that worked for me. I'm using HTMX 2.0.1.

{
    "compilerOptions": {
        "noImplicitAny": false,
        "removeComments": true,
        "module": "NodeNext",
        "moduleResolution": "NodeNext",
        "noImplicitThis": true,
        "allowJs": true,
        "types": [
            "htmx.org/dist/htmx"
        ]
    },
    "include": ["src/**/*"]
}

And that's how I imported HTMX to avoid conflict with the .d.ts file.

import htmxLib from "htmx.org/dist/htmx.esm.js";

declare global {
    interface Window {
        htmx: typeof htmx
    }
}

// this needs to come first just in case there's a dependency
// with other components
window.htmx = htmxLib;

@Alexerson

This comment was marked as resolved.

@renannprado
Copy link

I looked into this, and I’m not sure it’s fixing the issue though… Do you mind showing how you import the lib in your ts file? Also, are you on 2.0.0 or 2.0.1?

@Alexerson I edited my comment. It was actually not correct as the typeAcquisition property didn't fix it in the end (it was a lot of trial an error and I was mislead to believe that config fixed it).

I also added the relevant typescript snippet. I hope it helps.

@Alexerson
Copy link
Contributor Author

Ah, thanks. But in that case, isn’t htmxLib just typed as any in your code?
My temporary solution is to manually copy the version of the .d.ts file I generate from the .esm file and manually add it in my project. I strongly believe that my PR is the proper fix though.

@renannprado
Copy link

renannprado commented Jul 23, 2024

Ah, thanks. But in that case, isn’t htmxLib just typed as any in your code?

No it's not, because of the window declaration.

Whether your fix is a better approach I can't judge tbh.

alexpetros pushed a commit that referenced this issue Jul 26, 2024
alexpetros pushed a commit that referenced this issue Jul 29, 2024
* Generate .d.ts file from the esm module (#2733)

* Fix types annotation filename in package.json (#2734)

---------

Co-authored-by: Alexandre Spaeth <[email protected]>
@alexpetros
Copy link
Collaborator

Fixed by: #2769

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

No branches or pull requests

4 participants