Error using ReactDiffView in Remix App

[guepjo]

Summary

I am running into an error when trying to use this library

import ReactDiffViewer from "react-diff-viewer-continued";

export const DiffExpandView = () => {
    return (
        <>
            <ReactDiffViewer
                oldValue={"sourceVersion"}
                newValue={"newVersion"}
                splitView={true}
                // linesOffset={5}
            />
        </>
    );
}

Here is the error I get:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Context

I am working with a remix-react app.

Any idea how to fix this? This component would really fit my current needs so I would love to be able to use it

[ObaidAshiq]

i think your data might be an object, supposedly either sourceVersion or newVersion, Which should have been string , mind checking these values or sharing them ?

[guepjo]

@ObaidAshiq I have updated it to remove the curly braces, but it still doesn't work

import ReactDiffViewer from "react-diff-viewer-continued";

export const DiffExpandView = () => {
    return (
        <>
            <ReactDiffViewer
                oldValue="source Version" <-- removed curly braces
                newValue="new Version"  <-- removed curly braces
                splitView={true}
                // linesOffset={5}
            />
        </>
    );
}

[Aeolun]

I assume it has something to do with SSR somehow, but not quite sure what that would be. I'll have to boot it in a Remix app to see what effect it has.

[davidalejandroaguilar]

This also happens with a basic InertiaJS + Vite using SSR https://inertia-rails.netlify.app/guide/. The component fails during SSR, and then renders correctly on the client.

Pretty tired at the moment to create a basic reproduction app, but hoping to do one soon.