You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/plugin-rsc/README.md
+4-16Lines changed: 4 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -506,7 +506,7 @@ See also [Vite documentation](https://vite.dev/guide/api-hmr.html#intellisense-f
506
506
507
507
You can use `server-only` import to prevent accidentally importing server-only code on client, which can expose sensitive server code to public static assets.
508
508
509
-
For example, with the following codes:
509
+
For example, the plugin will show an error `'server-only' cannot be imported in client build` for the following codes:
510
510
511
511
- server-utils.js
512
512
@@ -527,17 +527,11 @@ export async function getData() {
527
527
528
528
```tsx
529
529
'use client'
530
-
import { getData } from'./server-utils.js'// ❌ This will fail at build time
530
+
import { getData } from'./server-utils.js'// ❌ 'server-only' cannot be imported in client build
531
531
...
532
532
```
533
533
534
-
the plugin will show an error:
535
-
536
-
```sh
537
-
'server-only' cannot be imported in client build (importer:'/xxx/client.js', ...)
538
-
```
539
-
540
-
Similarly, `client-only` import can ensure browser-specific code isn't accidentally imported in server environment. For example,
534
+
Similarly, `client-only` import can ensure browser-specific code isn't accidentally imported in server environment. For example, the plugin will show an error `'client-only' cannot be imported in server build` for the following codes:
541
535
542
536
- client-utils.js
543
537
@@ -553,20 +547,14 @@ export function getStorage(key) {
553
547
- server.js
554
548
555
549
```tsx
556
-
import { getStorage } from'./client-utils.js'// ❌ This will fail at build time
550
+
import { getStorage } from'./client-utils.js'// ❌ 'client-only' cannot be imported in server build
557
551
558
552
exportfunctionServerComponent() {
559
553
constdata=getStorage("settings")
560
554
...
561
555
}
562
556
```
563
557
564
-
the plugin will show an error:
565
-
566
-
```sh
567
-
'client-only' cannot be imported in server build (importer:'xxx/server.js', ...)
568
-
```
569
-
570
558
Note that while there are official npm packages [`server-only`](https://www.npmjs.com/package/server-only) and [`client-only`](https://www.npmjs.com/package/client-only) created by React team, they don't need to be installed. The plugin internally overrides these imports and surfaces their runtime errors as build-time errors.
571
559
572
560
This build-time validation is enabled by default and can be disabled by setting `validateImports:false` in the plugin options.
0 commit comments