expo: [SDK46][Web] ReactDOM.render is no longer supported in React 18

Giving credit to all those above who started me on this solution, i did this:

• Change “main” in package.json from "node_modules/expo/AppEntry.js" to a custom file: "main": "entry.js"
• Created entry.js

import "expo/build/Expo.fx";
import { Platform } from "react-native";
import { registerRootComponent } from "expo";
import { activateKeepAwake } from "expo-keep-awake";
import { createRoot } from "react-dom/client";
import App from "./App"; /* CHANGE THE PATH BASED ON WHERE YOURS IS LOCATED */

if (__DEV__) {
  activateKeepAwake();
}

if (Platform.OS === "web") {
  const root = createRoot(
    document.getElementById("root") ?? document.getElementById("main")
  );
  root.render(<App />);
} else {
  registerRootComponent(App);
}

I haven’t tested it too too much but what i’ve tested thus far has worked. I’m doing an ios/android/web build and all 3 seem to be working on SDK 47. Hope this helps!

Basically identical to @JamesHemery’s solution, here’s what I did for my web-only app (may or may not work fine for non-web apps):

• Change “main” in package.json from "node_modules/expo/AppEntry.js" to a custom file: "main": "entry.js"

• Created entry.js

import 'expo/build/Expo.fx';
import { AppRegistry, Platform } from 'react-native';
import withExpoRoot from 'expo/build/launch/withExpoRoot';

import App from './src/App';
import { createRoot } from "react-dom/client";

AppRegistry.registerComponent('main', () => withExpoRoot(App));
if (Platform.OS === 'web') {
  const rootTag = createRoot(document.getElementById('root') ?? document.getElementById('main'));
  const RootComponent = withExpoRoot(App);
  rootTag.render(<RootComponent />);
}

• wrapped my app with <React.StrictMode>

Temporary fixed by creating a custom index file or by patching registerRootComponent function (following React doc), but IDK if it’s the good way for an Expo patch :

import 'expo/build/Expo.fx';
import { AppRegistry, Platform } from 'react-native';
import { createRoot } from 'react-dom/client';
import { activateKeepAwake } from 'expo-keep-awake';
import * as Sentry from 'sentry-expo';
import withExpoRoot from 'expo/build/launch/withExpoRoot';
import App from './src/App';

if (__DEV__) {
  activateKeepAwake();
}

AppRegistry.registerComponent('main', () => withExpoRoot(App));
if ('web' === Platform.OS) {
  const rootTag = createRoot(document.getElementById('root') ?? document.getElementById('main'));

  const RootComponent = withExpoRoot(App);
  rootTag.render(<RootComponent />);
}

Update for SDK 47 :

import 'expo/build/Expo.fx';
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import { createRoot } from 'react-dom/client';
import { createElement } from 'react';
import { Platform } from 'react-native';
import App from './src/App';

// @see https://github.com/expo/expo/issues/18485
if ('web' === Platform.OS) {
  const rootTag = createRoot(document.getElementById('root') ?? document.getElementById('main'));
  rootTag.render(createElement(App));
} else {
  registerRootComponent(App);
}

same issue +1 Look forward to the official solution for the warning.

Issue probably needs to be addressed upstream in react-native-web https://github.com/necolas/react-native-web/blob/3fc40bdf810901146b8a240a2d0399dee708cfff/packages/react-native-web/src/exports/render/index.js#L10

The workaround from above no longer works in SDK 47 because withExpoRoot no longer exists.

Also related to this PR to fully embrace the concurrent React

https://github.com/necolas/react-native-web/pull/2330

==============

Update 9/Nov/2022

And it seems like the above PR is deprecated according to the latest comment.

I am really sorry to at you( @necolas ), I just want to know if I am tracking the correct PR, is this https://github.com/necolas/react-native-web/pull/2330 the key to addressing this issue? or i should look at something else? 😃 Thanks in advance.

This is not an error, it’s a warning. The API still works. React Native and React Native for Web do not officially support the new APIs in React 18 yet

same issue here, thanks for help, I’ll wait for the solution here, thanks

@JamesHemery Hehe. I am bootstrapping a new project - and 30m after you posted this, I was thinking about doing the same thing. ^ But I realized the amount of foreign code/imports I would have to fork into my app and decided I would live with the annoying error until it gets fixed upstream. Thank you for the diligence in reporting!

@JamesHemery Thanks

Update for SDK 47 :

import 'expo/build/Expo.fx';
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import { createRoot } from 'react-dom/client';
import { createElement } from 'react';
import { Platform } from 'react-native';
import App from './src/App';

// @see https://github.com/expo/expo/issues/18485
if ('web' === Platform.OS) {
  const rootTag = createRoot(document.getElementById('root') ?? document.getElementById('main'));
  rootTag.render(createElement(App));
} else {
  registerRootComponent(App);
}

Thank you James. This worked for me.

same issue +1

+1