fix: React 19 compatibility (#1173)

* change peerdep to react 19

* make sure react/jsx-runtime is not in bundle

* update docs

* fix lint

Author: YousefED

.eslintrc.js

@@ -33,8 +33,8 @@ module.exports = {
       "error",
       {
         devDependencies: true,
+        peerDependencies: true,
         optionalDependencies: false,
-        peerDependencies: false,
         bundledDependencies: false,
       },
     ],

docs/pages/docs/advanced/nextjs.mdx

@@ -29,14 +29,26 @@ export default function Editor() {
 
 ## Import as dynamic
 
-Now, you can use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side.
+In the same directory, create a new file called `DyanmicEditor.tsx`:
+Here, we will use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side.
 
 You can import the component we just created above using `next/dynamic` in your page:
 
 ```typescript jsx
+"use client";
+
 import dynamic from "next/dynamic";
 
-const Editor = dynamic(() => import("../components/Editor"), { ssr: false });
+export const Editor = dynamic(() => import("./Editor"), { ssr: false });
+```
+
+## Import in a page / app
+
+Now, you can import the dynamic editor in your page or app:
+
+```typescript jsx
+import { Editor } from "../components/DynamicEditor";
+
 
 function App() {
   return (

package-lock.json

@@ -12,7 +12,7 @@
     "@typescript-eslint/parser": "^5.5.0",
     "eslint": "^8.22.0",
     "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-import": "^2.31.0",
     "glob": "^10.3.10",
     "lerna": "^5.4.0",
     "patch-package": "^6.4.7",
@@ -34,4 +34,4 @@
     "postpublish": "rm -rf packages/core/README.md && rm -rf packages/react/README.md",
     "clean": "lerna run --stream clean"
   }
-}
+}

package.json

@@ -53,9 +53,7 @@
   "dependencies": {
     "@ariakit/react": "^0.4.3",
     "@blocknote/core": "^0.17.1",
-    "@blocknote/react": "^0.17.1",
-    "react": "^18",
-    "react-dom": "^18"
+    "@blocknote/react": "^0.17.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
@@ -71,8 +69,8 @@
     "vite-plugin-externalize-deps": "^0.8.0"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "18 - 19",
+    "react-dom": "18 - 19"
   },
   "eslintConfig": {
     "extends": [

packages/ariakit/package.json

@@ -33,11 +33,14 @@ export default defineConfig((conf) => ({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: Object.keys({
-        ...pkg.dependencies,
-        ...pkg.peerDependencies,
-        ...pkg.devDependencies,
-      }),
+      external: [
+        ...Object.keys({
+          ...pkg.dependencies,
+          ...pkg.peerDependencies,
+          ...pkg.devDependencies,
+        }),
+        "react/jsx-runtime",
+      ],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps

packages/ariakit/vite.config.ts

@@ -56,8 +56,6 @@
     "@mantine/core": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",
-    "react": "^18",
-    "react-dom": "^18",
     "react-icons": "^5.2.1"
   },
   "devDependencies": {
@@ -74,8 +72,8 @@
     "vite-plugin-externalize-deps": "^0.8.0"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "18 - 19",
+    "react-dom": "18 - 19"
   },
   "eslintConfig": {
     "extends": [

packages/mantine/package.json

@@ -33,11 +33,14 @@ export default defineConfig((conf) => ({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: Object.keys({
-        ...pkg.dependencies,
-        ...pkg.peerDependencies,
-        ...pkg.devDependencies,
-      }),
+      external: [
+        ...Object.keys({
+          ...pkg.dependencies,
+          ...pkg.peerDependencies,
+          ...pkg.devDependencies,
+        }),
+        "react/jsx-runtime",
+      ],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps

packages/mantine/vite.config.ts

@@ -58,8 +58,6 @@
     "@tiptap/core": "^2.7.1",
     "@tiptap/react": "^2.7.1",
     "lodash.merge": "^4.6.2",
-    "react": "^18",
-    "react-dom": "^18",
     "react-icons": "^5.2.1"
   },
   "devDependencies": {
@@ -80,8 +78,8 @@
     "vitest": "^2.0.3"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "18 - 19",
+    "react-dom": "18 - 19"
   },
   "eslintConfig": {
     "extends": [

packages/react/package.json

@@ -32,11 +32,14 @@ export default defineConfig((conf) => ({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: Object.keys({
-        ...pkg.dependencies,
-        ...pkg.peerDependencies,
-        ...pkg.devDependencies,
-      }),
+      external: [
+        ...Object.keys({
+          ...pkg.dependencies,
+          ...pkg.peerDependencies,
+          ...pkg.devDependencies,
+        }),
+        "react/jsx-runtime",
+      ],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps