Upgrade to React 18 (#192)

* Use React 18 createRoot API * Update to latest version of react (18) * Make styleci happy
laravel · Sep 27, 2022 · 91ae7b7 · 91ae7b7
1 parent 9177349
commit 91ae7b7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php
@@ -138,8 +138,8 @@ protected function installInertiaReactStack()
  'autoprefixer' => '^10.4.2',
  'postcss' => '^8.4.6',
  'tailwindcss' => '^3.1.0',
- 'react' => '^17.0.2',
- 'react-dom' => '^17.0.2',
+ 'react' => '^18.2.0',
+ 'react-dom' => '^18.2.0',
  ] + $packages;
  });
 

diff --git a/stubs/inertia-react/resources/js/app.jsx b/stubs/inertia-react/resources/js/app.jsx
@@ -2,7 +2,7 @@ import './bootstrap';
 import '../css/app.css';
 
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { createInertiaApp } from '@inertiajs/inertia-react';
 import { InertiaProgress } from '@inertiajs/progress';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
@@ -13,7 +13,9 @@ createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
  setup({ el, App, props }) {
- return render(<App {...props} />, el);
+ const root = createRoot(el);
+
+ root.render(<App {...props} />);
  },
 });