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.

[SeungheonOh]

Somehow browser and node is loading module differently. In node(server), if I print

import ReactDiffViewer from "react-diff-viewer-continued";
console.log(ReactDiffViewer)

I get

{
  LineNumberPrefix: { LEFT: 'L', RIGHT: 'R' },
  DiffMethod: [Getter],
  default: [class DiffViewer extends Component] {
    defaultProps: {
      oldValue: '',
      newValue: '',
      splitView: true,
      highlightLines: [],
      disableWordDiff: false,
      compareMethod: 'diffChars',
      styles: {},
      hideLineNumbers: false,
      hideMarkers: false,
      extraLinesSurroundingDiff: 3,
      showDiffOnly: true,
      useDarkTheme: false,
      linesOffset: 0,
      nonce: ''
    }
  }
}

but in browser

class extends React.Component {
      constructor(props) {
        super(props);
        this.resetCodeBlocks = () => {
          if (this.state.expandedBlocks.length > 0) {
            this.setState({
   …

[SeungheonOh]

I fixed my issue by doing:

import RDV from 'react-diff-viewer-continued'
let ReactDiffViewer
if(typeof window == 'undefined') ReactDiffViewer = RDV.default
else ReactDiffViewer = RDV

[itzhoujun]

how to fix?

[boazpoolman]

Same issue here.

I've used a variant of @SeungheonOh's workaround to solve the issue:

import RDV from 'react-diff-viewer-continued';

let ReactDiffViewer;

if (typeof RDV.default !== 'undefined') {
  ReactDiffViewer = RDV.default;
} else {
  ReactDiffViewer = RDV;
}

[Aeolun]

Looks like it loads the module version on the browser but the CJS version on the server or something? I'm now doing a lot of stuff with remix apps myself, so I'll see if I can stick it in somewhere and fix the issue.