Minified React Error w/ Next.js and Vercel

[haaarshsingh]

I've deployed react-runner into production in Vercel using Next.js, but for some reason I get this minified react error logged into the console and the code editor doesn't run properly as the output is blank.

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at lg (react-dom.production.min.js:132:269)
    at i (react-dom.production.min.js:294:336)
    at oD (react-dom.production.min.js:281:375)
    at react-dom.production.min.js:281:315
    at oO (react-dom.production.min.js:281:315)
    at ox (react-dom.production.min.js:269:193)
    at x (scheduler.production.min.js:14:181)
    at MessagePort.T (scheduler.production.min.js:15:101)

For context, this works perfectly fine in dev. I'll attach screenshots below. The first is in development, the second in production:

[nihgwu]

https://reactjs.org/docs/error-decoder.html/?invariant=418 please check what cause the mismatch during hydration, I guess you should get some errors in your console in dev env as well

[haaarshsingh]

Hey @nihgwu,
While running my application in development, there are no errors logged into the console. It's only in production, and I've linked the error above.

You can check out my application in production at lab.hxrsh.in/posts/toasts for more information if that's helpful.

[nihgwu]

@harshhhdev still have no idea, but this error https://reactjs.org/docs/error-decoder.html/?invariant=423 looks weird because there is ErrorBoundary in react-runner

[haaarshsingh]

Would you have any ideas on how to go about fixing it @nihgwu? Any other information I can provide? I'd be glad to add you into the repository.

[nihgwu]

@harshhhdev If you think it's fine then I'm happy to debug with the source code

[haaarshsingh]

Hey, @nihgwu
Sorry for the delay. I've added you onto it. You'll need to accept the invite in your email.

You can find it at harshhhdev/experiments.

[nihgwu]

@harshhhdev looks more like a bug in Next

this will trigger the error

const Editor = () => {
  return (
    <div>
      <Runner code={initial} />
    </div>
  );
};

export default function Page() {
  return <Editor />;
}

while this doesn't

const Editor = () => {
  return (
    <Runner code={initial} />
  );
};

export default function Page() {
  return <Editor />;
}

import { Runner } from "react-runner";

const initial = `() => {
  return (
    <button
      onClick={() => {
        console.log('hello')
      }}
    >
      Add Toast
    </button>
  )
}`;

const Editor = () => {
  return (
    <Runner code={initial} />
  );
};

export default function Page() {
  return <Editor />;
}