Also another issue I'm having is using hcaptcha
#Dashlane adding icons causing hydrating issues
steady lotus
versed tree
I'm not super familiar with dashlane but do have some ideas about helping hydration issues in general. Does dashlane have proper react support or is it a script tag and it just runs when it can. I'm assuming its just a script.
If it's just a script I believe sergio has something in RemixUtils that might be of use but I could be mistaken there. He provides a script helper that I believe should let you load in that script tag later on, so long as the script happens after react has finished doing its normal hyration it should all shake out fine
steady lotus
The dashlane issue is not that big of a deal, how could I fix hcaptcha?
And I'm not really sure if dashlane does have react support
steady lotus
I'm not super familiar with dashlane but do have some ideas about helping hydrat...
The dashlane issue is being fixed if I just put the textbox in a suspense component
Somehow
Like it doesnt error anymore
I think it should still error saying that it switches to client rendering
and that it was in a suspense component
versed tree
I think that makes sense because the suspense might allow everything to happen at a later time at which point hydration is complete and you wont get any issues
its about having these things happen AFTER hydration is done
the problem is when remix has generated html, sent your html, sent your data, and sent your js, and now react is "hydrating" by trying to preform the same actions remix did on the server, but the final state of the html is different than what remix produces.
steady lotus
Yea, is there a way to disable the errors fully?
versed tree
to fix that, you need to find a way for your react hydration to complete, before other javascript libraries jump in and throw random things in the dom
steady lotus
ig for the hcaptcha instead of suspense maybe useeffect?
or would clientonly from remix-utils work?
versed tree
if it's a react library you should be able to rely on that and clientOnly yea
or just plain old useHydrated
steady lotus
var import_remix_hook_form7 = require("remix-hook-form"), import_react45 = require("@remix-run/react"), import_client_only = require("remix-utils/client-only"), import_jsx_dev_runtime55 = require("react/jsx-dev-runtime"), CenterCard = (0, import_styles41.styled)(import_Card12.default)({
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /website/node_modules/remix-utils/build/react/client-only.js from /website/build/index.js not supported.
Instead change the require of client-only.js in /website/build/index.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/website/build/index.js:11828:189)```
Why am i getting this error when trying to use clientonly?