[BUG] - V2 - <Textarea /> throws error when rendered in SSR #1160
Comments
|
The error is caused by an incorrect Code from production bundle: import TextareaAutosize from "react-textarea-autosize";
var Textarea = forwardRef(
({ style, minRows = 3, maxRows = 8, cacheMeasurements = false, onHeightChange, ...otherProps }, ref) => {
const {
Component,
label,
description,
shouldLabelBeOutside,
shouldLabelBeInside,
errorMessage,
getBaseProps,
getLabelProps,
getInputProps,
getInputWrapperProps,
getDescriptionProps,
getErrorMessageProps
} = useInput({ ref, ...otherProps, isMultiline: true });
console.log(TextareaAutosize)
// default: {
// '$$typeof': Symbol(react.forward_ref),
// render: [Function: TextareaAutosize]
// }
const labelContent = /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: label });
const inputProps = getInputProps();
return /* @__PURE__ */ jsxs(Component, { ...getBaseProps(), children: [
shouldLabelBeOutside ? labelContent : null,
/* @__PURE__ */ jsxs("div", { ...getInputWrapperProps(), children: [
shouldLabelBeInside ? labelContent : null,
/* @__PURE__ */ jsx(
TextareaAutosize,
{
...inputProps,
cacheMeasurements,
maxRows,
minRows,
style: mergeProps(inputProps.style, style != null ? style : {}),
onHeightChange
}
)
] }),
errorMessage ? /* @__PURE__ */ jsx("div", { ...getErrorMessageProps(), children: errorMessage }) : description ? /* @__PURE__ */ jsx("div", { ...getDescriptionProps(), children: description }) : null
] });
}
);As you can see from the This change fixes the problem: FROM: /* @__PURE__ */ jsx(
TextareaAutosize,
{
...inputProps,
cacheMeasurements,
maxRows,
minRows,
style: mergeProps(inputProps.style, style != null ? style : {}),
onHeightChange
}
)TO: /* @__PURE__ */ jsx(
TextareaAutosize.default,
{
...inputProps,
cacheMeasurements,
maxRows,
minRows,
style: mergeProps(inputProps.style, style != null ? style : {}),
onHeightChange
}
)Now I tried to import the SSR's without problems: import TextareaAutosize from "react-textarea-autosize";
export default function Home() {
return (
<div>
<TextareaAutosize />
</div>
);
}I didn't come up with a solution yet I did all my testing on this minimal nextjs repo: https://github.com/Tronikelis/nextui-textarea-issue (the same one as mentioned before) Maybe this could be because of a bad a nextjs config, but I doubt it because I am using the default config + importing just the |
|
Okay this is actually pretty weird, My project:
What happens:
|
|
This has been fixed in |
Describe the bug
next-ui version:
0.0.0-dev-v2-20230617142344When trying to SSR the
<Textarea />component an error is thrown:Other notes:
<Input />works, but<Textarea />doesn'tYour Example Website or App
https://github.com/Tronikelis/nextui-textarea-issue
Steps to Reproduce the Bug or Issue
npm inpm run dev/Expected behavior
The element should render without errors
Screenshots or Videos
No response
Operating System Version
windows, linux
Browser
Chrome, Firefox
The text was updated successfully, but these errors were encountered: