search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.4k stars 1.31k forks source link

Get `htmx.config is undefined` error after update htmx from 1.9.12 into 2.0.2 #2909

Open zw963 opened 2 months ago

zw963 commented 2 months ago

Following is the source code of my js/app/js:

import 'htmx.org';
window.htmx = require('htmx.org');
import _hyperscript from 'hyperscript.org';
_hyperscript.browserInit();

// This object can be output no error.
console.log(htmx); 

// both of them not work.
document.addEventListener('htmx:load', function() {
    htmx.config.methodsThatUseUrlParams = ['get'];
});

document.addEventListener('DOMContentLoaded', function () {
    htmx.config.methodsThatUseUrlParams = ['get'];
});

Following screenshot is the output of console of Firefox:

image

console.log(htmx); output the htmx object no error, but this object seem like very different from the older 1.x version object, `htmx.config' was not defined in this case.

BTW: because following settings works both on 1.x on 2.0.2 like following:

htmx.logger = function (elt, event, data) {
        if (console) {
            console.log(event, elt, data);
        }
    };

so, i assume i config htmx correct, , could you please help me on fix the htmx.config issue?

Thanks.

MichaelWest22 commented 2 months ago

I'm not sure how to fix that issue sorry but the recommended way to set htmx.config is to use meta tags placed in your main page head. https://htmx.org/docs/#config as this is easier than trying to use event handlers and JS to do it.

zw963 commented 2 months ago

The document said,

You can set them directly in javascript ...

so, i guess there maybe a way to add it directly into js.

I'm not sure how to fix that issue sorry but the recommended way to set htmx.config is to use meta tags placed in your main page head. https://htmx.org/docs/#config as this is easier than trying to use event handlers and JS to do it.

MichaelWest22 commented 2 months ago

Yeah you can do it with javascript just fine. just saying it is easier to set config via meta tags and you don't have to worry about any scope issues like you have to in javascript. To find the cause of your issue i would put a breakpoint on your code block here or add debugger;.

document.addEventListener('htmx:load', function() {
    console.log(htmx);
    debugger;
    htmx.config.methodsThatUseUrlParams = ['get'];
});

You can then use browser dev tools to find if window.htmx or htmx is in scope when this event listener fires. Maybe the location or order this event listener fires in is causing your issues.

meta tag example:

<head>
<meta name="htmx-config" content='{"methodsThatUseUrlParams ":["get"]}' />
</head>
zw963 commented 2 months ago

Hi, I output the htmx object like following:

import 'htmx.org';
window.htmx = require('htmx.org');
import _hyperscript from 'hyperscript.org';
_hyperscript.browserInit();

document.addEventListener('htmx:load', function() {
    console.log(htmx);
    console.log(htmx.config);
});

please check following screenshot which is the Firefox log output:

image

The object was print in console as in the screenshot, it very different with old 1.x version htmx object, in fact, i can even can't use htmx.onLoad hook which I always used it before version 1.x.

I guess there is some config issue in my side, I don't familiar with the javascript, i guess this probably a import issue? because as you can see, functions like htmx.config, html.onLoad nested in the htmx.default, any idea?

Thanks

zw963 commented 2 months ago

Hi, @MichaelWest22 , i figure out where is the issue come from, following code works!

import htmx from 'htmx.org';
import _hyperscript from 'hyperscript.org';
_hyperscript.browserInit();

function init () {
    console.log("hello!")
    htmx.logger = function (elt, event, data) {
        if (console) {
            console.log(event, elt, data);
        }
    };

    htmx.config.methodsThatUseUrlParams = ['get'];
}

htmx.onLoad(init);

When update from 1.x into 2.x, we need change code

From 

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

into 

import htmx from 'htmx.org';

We need update the webpack install doc and migrate 1.x to 2.x document to reflect this changes, right? anyway, for users like me which is a newbie of javascript, it spent lots of time to migrate.

MichaelWest22 commented 2 months ago

2668 can you check out the suggested updates to the documentation in this PR and see if the updated docs would help for your situation?

zw963 commented 2 months ago

2668 can you check out the suggested updates to the documentation in this PR and see if the updated docs would help for your situation?

https://github.com/bigskysoftware/htmx/blob/fc272ef75fbf40e765f5941f011d7dcfaca44bec/www/content/docs.md#global-variable

I consider this doc is complicated for me, because only add following code will do all trick for htmx 2.0 work with webpack, right?

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

move others doc into an new place is better?

And, for users still keep use old version htmx, i think we still need the old 1.x import doc, right? and one more important point, we need mention this import changes in migrate doc, what do you think?