Use a third-party npm package in a section
Use a third-party npm package in a section.
Use an npm package in a section.
The delta
Section titled “The delta”Install the package like any npm dependency:
npm i swiperOnly a published version. pack refuses to produce a submission zip when a
dependency uses a local file:/link: protocol — depend on a real published
version, never a path on your own machine.
Where you import it from matters. A client library — a carousel, a map SDK,
anything that touches window or the DOM — is imported inside a "use client"
island, the same as any other browser-only code:
"use client";
import Swiper from "swiper";
export default function Carousel({ slides }: { slides: { id: string; url: string }[] }) { // …}A server-side import — one that lands in the Renderer or a plain component it
imports, not behind "use client" — must stay pure and deterministic: no reads
of the clock, randomness, or the network at render time. A package built for a
browser runtime (it touches window, schedules a timer, generates an id) does
not belong there; move the usage into an island.
A package that ships its own stylesheet is imported by its bare specifier, from the module that renders it — the Renderer’s import graph (the components and islands it imports, transitively) is what the CSS build bundles and harvests for the section’s stylesheet:
"use client";
import Swiper from "swiper";import "swiper/css"; // ← the sanctioned channel: a bare specifier reaches this section's layerA local .css import from that same render path is a different, banned case
— see no-css-import-from-render-path
for the full distinction between the two, and
no-bare-css-import for why a hand-written
stylesheet can’t reach the package’s CSS with its own @import instead.
Commands
Section titled “Commands”npm i <package>Verify
Section titled “Verify”Verify with the author loop — a green
check after the install confirms the package resolves, its CSS (if any)
landed in the section’s layer, and the workspace still carries exactly one copy
of React.
See also
Section titled “See also”- Islands — writing a
"use client"island; a third-party client library is fine inside one, never in a Renderer. template-kit pack— why afile:/link:dependency blocks a submission.single-react— a package that pulls its own copy of React breaks hydration; the installed tree may carry only one.no-css-import-from-render-path— bare package specifier (legal) vs. a local.cssimport (banned) from a section’s render path.no-bare-css-import— why a hand-written stylesheet can’t reach a package’s CSS with its own@importeither.