Working guide: Next.js 14+ (App) installation and usage - NextJS

[royeradames]

1. npm install @shoelace-style/shoelace
2. make sure the import are dynamic and base on dist and not cdn

SlTab can be replace with the React name of the sl element

const SlTab = dynamic(
  () => import("@shoelace-style/shoelace/dist/react").then(mod => mod.SlTab),
  {
    ssr: false,
  }
)

Avoid build issues.

[manuelc2209]

Just that doesn't work @royeradames

[KonnorRogers]

@manuelc2209 if it's Next 14, you need to make sure you're in a "client component"

+ 'use client';
const SlTab = dynamic(
  () => import("@shoelace-style/shoelace/dist/react").then(mod => mod.SlTab),
  {
    ssr: false,
  }
)

also, I really strongly do not recommend using the main entry point here. It's better to import the tab directly:

'use client';
const SlTab = dynamic(
  () => import("@shoelace-style/shoelace/dist/react/tab/index.js"),
  {
    ssr: false,
  }
)

most bundles will not perform any tree shaking on "dynamic imports" so import from dist/react/index.js will import the entire library.

[manuelc2209]

Right, but we do need to centralize all this info, because just the first message wont tick it.

Adding it here - #2080