Skip to content

Commit a9b36b1

Browse files
YousefEDYousefED
authored
fix: React 19 compatibility (TypeCellOS#1173)
* change peerdep to react 19 * make sure react/jsx-runtime is not in bundle * update docs * fix lint
1 parent ea372c9 commit a9b36b1

13 files changed

Lines changed: 102 additions & 87 deletions

File tree

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ module.exports = {
3333
"error",
3434
{
3535
devDependencies: true,
36+
peerDependencies: true,
3637
optionalDependencies: false,
37-
peerDependencies: false,
3838
bundledDependencies: false,
3939
},
4040
],

‎docs/pages/docs/advanced/nextjs.mdx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,26 @@ export default function Editor() {
2929

3030
## Import as dynamic
3131

32-
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.
32+
In the same directory, create a new file called `DyanmicEditor.tsx`:
33+
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.
3334

3435
You can import the component we just created above using `next/dynamic` in your page:
3536

3637
```typescript jsx
38+
"use client";
39+
3740
import dynamic from "next/dynamic";
3841

39-
const Editor = dynamic(() => import("../components/Editor"), { ssr: false });
42+
export const Editor = dynamic(() => import("./Editor"), { ssr: false });
43+
```
44+
45+
## Import in a page / app
46+
47+
Now, you can import the dynamic editor in your page or app:
48+
49+
```typescript jsx
50+
import { Editor } from "../components/DynamicEditor";
51+
4052

4153
function App() {
4254
return (

‎package-lock.json‎

Lines changed: 42 additions & 41 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@typescript-eslint/parser": "^5.5.0",
1313
"eslint": "^8.22.0",
1414
"eslint-config-react-app": "^7.0.0",
15-
"eslint-plugin-import": "^2.28.0",
15+
"eslint-plugin-import": "^2.31.0",
1616
"glob": "^10.3.10",
1717
"lerna": "^5.4.0",
1818
"patch-package": "^6.4.7",
@@ -34,4 +34,4 @@
3434
"postpublish": "rm -rf packages/core/README.md && rm -rf packages/react/README.md",
3535
"clean": "lerna run --stream clean"
3636
}
37-
}
37+
}

‎packages/ariakit/package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,7 @@
5353
"dependencies": {
5454
"@ariakit/react": "^0.4.3",
5555
"@blocknote/core": "^0.17.1",
56-
"@blocknote/react": "^0.17.1",
57-
"react": "^18",
58-
"react-dom": "^18"
56+
"@blocknote/react": "^0.17.1"
5957
},
6058
"devDependencies": {
6159
"@types/react": "^18.0.25",
@@ -71,8 +69,8 @@
7169
"vite-plugin-externalize-deps": "^0.8.0"
7270
},
7371
"peerDependencies": {
74-
"react": "^18",
75-
"react-dom": "^18"
72+
"react": "18 - 19",
73+
"react-dom": "18 - 19"
7674
},
7775
"eslintConfig": {
7876
"extends": [

‎packages/ariakit/vite.config.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,14 @@ export default defineConfig((conf) => ({
3333
rollupOptions: {
3434
// make sure to externalize deps that shouldn't be bundled
3535
// into your library
36-
external: Object.keys({
37-
...pkg.dependencies,
38-
...pkg.peerDependencies,
39-
...pkg.devDependencies,
40-
}),
36+
external: [
37+
...Object.keys({
38+
...pkg.dependencies,
39+
...pkg.peerDependencies,
40+
...pkg.devDependencies,
41+
}),
42+
"react/jsx-runtime",
43+
],
4144
output: {
4245
// Provide global variables to use in the UMD build
4346
// for externalized deps

‎packages/mantine/package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,6 @@
5656
"@mantine/core": "^7.10.1",
5757
"@mantine/hooks": "^7.10.1",
5858
"@mantine/utils": "^6.0.21",
59-
"react": "^18",
60-
"react-dom": "^18",
6159
"react-icons": "^5.2.1"
6260
},
6361
"devDependencies": {
@@ -74,8 +72,8 @@
7472
"vite-plugin-externalize-deps": "^0.8.0"
7573
},
7674
"peerDependencies": {
77-
"react": "^18",
78-
"react-dom": "^18"
75+
"react": "18 - 19",
76+
"react-dom": "18 - 19"
7977
},
8078
"eslintConfig": {
8179
"extends": [

‎packages/mantine/vite.config.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,14 @@ export default defineConfig((conf) => ({
3333
rollupOptions: {
3434
// make sure to externalize deps that shouldn't be bundled
3535
// into your library
36-
external: Object.keys({
37-
...pkg.dependencies,
38-
...pkg.peerDependencies,
39-
...pkg.devDependencies,
40-
}),
36+
external: [
37+
...Object.keys({
38+
...pkg.dependencies,
39+
...pkg.peerDependencies,
40+
...pkg.devDependencies,
41+
}),
42+
"react/jsx-runtime",
43+
],
4144
output: {
4245
// Provide global variables to use in the UMD build
4346
// for externalized deps

‎packages/react/package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,6 @@
5858
"@tiptap/core": "^2.7.1",
5959
"@tiptap/react": "^2.7.1",
6060
"lodash.merge": "^4.6.2",
61-
"react": "^18",
62-
"react-dom": "^18",
6361
"react-icons": "^5.2.1"
6462
},
6563
"devDependencies": {
@@ -80,8 +78,8 @@
8078
"vitest": "^2.0.3"
8179
},
8280
"peerDependencies": {
83-
"react": "^18",
84-
"react-dom": "^18"
81+
"react": "18 - 19",
82+
"react-dom": "18 - 19"
8583
},
8684
"eslintConfig": {
8785
"extends": [

‎packages/react/vite.config.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,14 @@ export default defineConfig((conf) => ({
3232
rollupOptions: {
3333
// make sure to externalize deps that shouldn't be bundled
3434
// into your library
35-
external: Object.keys({
36-
...pkg.dependencies,
37-
...pkg.peerDependencies,
38-
...pkg.devDependencies,
39-
}),
35+
external: [
36+
...Object.keys({
37+
...pkg.dependencies,
38+
...pkg.peerDependencies,
39+
...pkg.devDependencies,
40+
}),
41+
"react/jsx-runtime",
42+
],
4043
output: {
4144
// Provide global variables to use in the UMD build
4245
// for externalized deps

0 commit comments

Comments
 (0)