Static build outputs `[object Object],[object Object],[object Object]` if value prop is set initially

[leonardomathon]

Thanks for the awesome and simple to use package. I like it, since it's very simple and it suits my needs perfectly. However, I stumbled upon an issue that I can't seem to get rid of.

If I give CodeEditor an initial value (see code sample below), then when building the project into static files it will display [object Object],[object Object],[object Object] in the editor.

I first thought it had something to do with the state. I initially had a useState and passed the value of that state to the value prop of the editor. But after some inspection, I found that even if the value prop is set to a simple string, it will still render [object Object],[object Object],[object Object] inside the editor.

This only occurs when I build the project into static files. During the development with the live server, this bug does not occur.

Package Version: 1.4.16 Vite version: 2.8.0

Component CodeEditor.tsx:

import { ChangeEvent } from "react";
import { useMantineTheme } from "@mantine/core";

import CodeEditor from '@uiw/react-textarea-code-editor';
import "@uiw/react-textarea-code-editor/dist.css";

type Props = {
    query: string | null,
    setQuery: (value: string) => void,
};
const Editor = ({ query, setQuery }: Props) => {
    const theme = useMantineTheme();

    return (
        <CodeEditor
            value={`SELECT *`}
            language="sql"
            placeholder="Enter a SQL query."
            onChange={(evn: ChangeEvent<HTMLTextAreaElement>) => setQuery(evn.target.value)}
            padding={theme.spacing.md}
            style={{
                height: '100%',
                fontSize: theme.fontSizes.lg,
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : "white",
                border: theme.colorScheme === 'dark' ? 'none' : `1px solid ${theme.colors.gray[4]}`,
                borderRadius: theme.radius.sm,
                resize: 'none',
                overflowY: 'auto',
                fontFamily:
                    "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
            }}
        />
    );
};

export default Editor

Rendered HTML:

<pre aria-hidden="true" class=" language-sql" tabindex="0">
  <code class=" language-sql">
    [object Object],[object Object],[object Object]
  </code>
  <br>
</pre>

Output:

[jaywcjlove]

@leonardomathon Example: https://codesandbox.io/embed/uiwjs-react-textarea-code-editor-issues-97-kbfbxg?fontsize=14&hidenavigation=1&theme=dark

[leonardomathon]

@leonardomathon Example: https://codesandbox.io/embed/uiwjs-react-textarea-code-editor-issues-97-kbfbxg?fontsize=14&hidenavigation=1&theme=dark

If you now open a new terminal and build the vite app using yarn build and afterwards view the vite app using yarn serve, you will see the bug I'm facing:

[jaywcjlove]

I can't fix your error. You may need to go to @vitejs to find the answer.

@leonardomathon

[leonardomathon]

I can't fix your error.

You may need to go to @vitejs to find the answer.

@leonardomathon

Thanks for the response @jaywcjlove I'll try to see if someone from Vite can help me