Skip to content

Commit

Permalink
Add note to Next.js docs about transpiling VE-dependent libraries in …
Browse files Browse the repository at this point in the history
…some cases (#1213)
  • Loading branch information
askoufis authored Nov 9, 2023
1 parent 911c8b7 commit 42bdf7a
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions site/docs/integrations/next.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,33 @@ const withVanillaExtract = createVanillaExtractPlugin({
```

Each integration will set a default value based on the configuration options passed to the bundler.

## Transpiling Vanilla Extract-dependent Libraries

By default, Next.js does not allow importing of TypeScript files outside of the app root.

If your application depends on a TypeScript library, whether that be a local package within your app's monorepo, or a dependnecy inside `node_modules`, and that library styles its components with Vanilla Extract, but does _not_ compile its styles, then that library needs to be added to [`transpilePackages`] in your Next.js config:

```tsx
// App.tsx
import { Button } from '@company/design-system';

export default function App() {
// This is unstyled and/or throws errors about Vanilla Extract being used in runtime
return <Button>Hello, World!</Button>;
}
```

```js
// next.config.js
import createVanillaExtractPlugin from '@vanilla-extract/next-plugin';

const nextConfig = {
transpilePackages: ['@company/design-system']
};

// Next.js Vanilla Extract integration will now compile @company/design-system styles
module.exports = createVanillaExtractPlugin(nextConfig);
```

[`transpilepackages`]: https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages

0 comments on commit 42bdf7a

Please sign in to comment.