Textarea breaking SSR? #6719
Comments
|
Textarea component works fine with ssr. Mantine documentation is built with Next.js that server side rendering, on the documentation page there are no issues https://mantine.dev/core/textarea/ |
|
It's an issue with react-textarea-autoresize that Textarea uses and, apparently, it's an issue for edge runtimes in general. I'm going to try configuring serverBuildTarget and deploying again to see if it works. If not, then I'll try the hack proposed in Andarist/react-textarea-autosize#335 (comment). It might be worth noting in the docs if anyone else deploying to edge runs into this issue. Will confirm whether or it fixes the issue or not. |
|
Got it to work, but it's kind of hacky. I haven't yet figured out the Vite config for the right runtime target + module format to support Edge Functions. So I ended up using vite-env-only plugin and its clientOnly$ macro to conditionally render the Textarea so that it's client-only. Not great, but it works. Ideally it wouldn't require that and would instead bundle for the provider target runtime and module format (e.g. netlify, vercel, deno, cloudflare, etc). I'm not sure yet whether it's something that should be addressed in react-textarea-autosize or whether it should just be documented as a caveat for deploying to Edge runtimes, but it's something to be aware of as I'm sure it's not an uncommon scenario. Basically, it went from... import { Textarea } from '@mantine/core';
// ...
export function MyComponent() {
return (
<Textarea placeholder="message" />
);
}...to... import { Textarea } from '@mantine/core';
import { clientOnly$ } from 'vite-env-only/macros';
// ...
export function MyComponent() {
return (
{clientOnly$(<Textarea placeholder="message" />)}
);
}@rtivital Do you think it's worth evaluating replacements for react-textarea-autosize? I'm neutral either way and not sure if it's worth it, but can't say for sure that it isn't. I'd be willing to try it out as soon as I get some free time. Though if you think it's not really worth it, then I'd be less inclined to waste my time. https://github.com/inokawa/rich-textarea looks interesting. Leaving this here for anyone in the future that might find this information helpful. EDIT: Adding that dai-shi/waku#421 contains a lot of good info regarding react-textarea-autosize and importing the proper module. |
|
I'd rather not migrate it to anything else. Once field-size CSS property is supported, react-textarea-autosize dependency will be removed – https://caniuse.com/mdn-css_properties_field-sizing |
|
The issue is related to waku, won't be fixed on Mantine side. |
|
I ran into this issue using react-router v7 on Cloudflare Workers. The fix for me was to add ssr: {
target: "webworker",
noExternal: true,
resolve: {
conditions: ["worker", "workerd", "browser"],
}
}This is because react-textarea-autosize has the |
Dependencies check up
What version of @mantine/* packages do you have in package.json?
7.12.1
What package has an issue?
@mantine/core
What framework do you use?
Remix
In which browsers you can reproduce the issue?
Not applicable – issue is not related to the browser
Describe the bug
Not sure if I'm missing something, but it seems that the Textarea component is trying to access the DOM without checking for it first? I'm deploying my small Remix app to Netlify Edge Functions. The Netlify automated build process throws an error (see log output below, towards the bottom at "ReferenceError: document is not defined").
When I remove the Textarea component, Netilfy builds and deploys it fine. I haven't yet dug into the source as I'm tight on time, but if it's something dumb on my side, then my apologies :) Didn't find any warnings/caveats in the docs regarding this behavior though.
Oh yeah, and the Textarea component only has the placeholder prop set, along with styles. I tried changing from styles to classNames, but that didn't make a difference either.
If possible, include a link to a codesandbox with a minimal reproduction
No response
Possible fix
If Textarea is trying to access the DOM document object, then add a check condition before it tries to do so?
Self-service
The text was updated successfully, but these errors were encountered: