如何解决React 18项目中添加Recoilize调试器后应用崩溃的问题？

First off, let's spot the obvious typo in your code first—you have an extra r at the end of <RecoilizeDebugger />r! That's definitely contributing to the crash, so fix that first.

Beyond that, the core issue is that older versions of Recoilize don't fully support React 18's new root rendering API (createRoot), since it relies on accessing React's internal renderer instance which changed in React 18. Here's how to fix this:

Step 1: Update Recoilize to the Latest Version #

First, make sure you're using the most recent version of Recoilize, as newer releases often add React 18 compatibility. Run this command in your project:

npm install recoilize@latest
# or
yarn add recoilize@latest

Also, double-check that your Recoilize Chrome extension is updated to the latest version via the Chrome Web Store.

Step 2: Pass the React 18 Root Instance to RecoilizeDebugger #

If updating doesn't solve it, you need to explicitly pass the root instance you created with createRoot to the RecoilizeDebugger component as a prop. This helps the debugger hook into React 18's renderer correctly.

Here's your corrected index.js code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import RecoilizeDebugger from 'recoilize';
import { RecoilRoot } from 'recoil';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
      <RecoilizeDebugger root={root} />
    </RecoilRoot>
  </React.StrictMode>
);

Step 3: Fallback to Legacy Render API (Temporary Test) #

If the above still doesn't work, you can test if the issue is specifically with React 18's createRoot by using the legacy ReactDOM.render syntax (not recommended for production, but useful for debugging):

import React from 'react';
import ReactDOM from 'react-dom';
import RecoilizeDebugger from 'recoilize';
import { RecoilRoot } from 'recoil';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
      <RecoilizeDebugger />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

If this works, it confirms that Recoilize needs better React 18 support. You can check Recoilize's GitHub repository for open issues or submit a new one detailing your problem.

内容的提问来源于stack exchange，提问作者Nastya Hahanova