Skip to content

Commit dfde469

Browse files
committed
update docs, restore deps
1 parent 056cf6a commit dfde469

2 files changed

Lines changed: 16 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,15 +164,27 @@ import 'konva/lib/shapes/Rect';
164164

165165
Demo: [https://codesandbox.io/s/6l97wny44z](https://codesandbox.io/s/6l97wny44z)
166166

167-
### Usage with Next.js
167+
## Usage with Next.js
168168

169169
Note: `react-konva` is designed to work in the client-side. On the server side, it will render just empty div. So it doesn't make much sense to use react-konva for server-side rendering. In Next.js you may have issue like
170170

171171
> Module not found: Can't resolve 'canvas'
172172
173173
Why do we see this error? `canvas` module is used for canvas rendering in Node.JS environment. `konva` library will use it there, but it doesn't have this dependency explicitly.
174174

175-
#### Use dynamic loading
175+
How to solver this issue? There are two approaches:
176+
177+
### Approach 1: manually install canvas module
178+
179+
You can install `canvas` module manually.
180+
181+
```bash
182+
npm install canvas@next
183+
```
184+
185+
The solution will solve the issue, but it will have unnecessary dependency on `canvas` module which may increase build time a little bit.
186+
187+
### Approach 2: Use dynamic import
176188

177189
Next.js docs: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading
178190

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"dependencies": {
2020
"@types/react-reconciler": "^0.28.8",
2121
"its-fine": "^1.2.5",
22-
"scheduler": "0.25.0"
22+
"scheduler": "0.25.0",
23+
"react-reconciler": "0.31.0"
2324
},
2425
"targets": {
2526
"none": {}
@@ -39,7 +40,6 @@
3940
}
4041
],
4142
"peerDependencies": {
42-
"react-reconciler": "~0.29.0 || ~0.31.0",
4343
"konva": "^8.0.1 || ^7.2.5 || ^9.0.0",
4444
"react": "^18.3.1 || ^19.0.0",
4545
"react-dom": "^18.3.1 || ^19.0.0"

0 commit comments

Comments
 (0)