SWC plugin to add "use client" directive to Fluent UI, Griffel, and any other packages.
npm install fluentui-next-appdir-directive
This plugin allows the use of @fluentui/react-components and @griffel in the new NextJS@13+ appDir router. The goal of this plugin is to add the "use client"; directive to all files in @fluentui/react-components and @griffel, but note it's not limited to these libraries.
``shyarn
yarn add fluentui-next-appdir-directive
$3
`js
// next.config.js/* @type {import('next').NextConfig} /
const nextConfig = {
experimental: {
swcPlugins: [
["fluentui-next-appdir-directive",{
paths: [
"@griffel",
"@fluentui"
// 👇 you can add another dependency that needs the directive
"your dependency name"
]
}],
],
},
};
module.exports = nextConfig;
`$3
`json
// .swcrc
{
"jsc": {
"experimental": {
"plugins": [
["fluentui-next-appdir-directive", {
"paths": [
"@griffel",
"@fluentui"
// 👇 you can add another dependency that needs the directive
"your dependency name"
]
}]
]
}
}
}
`> Note: strings inside paths should only contain the scope/package name, in our case @fluentui/react-components -> @fluentui
$3
`js
// next.config.js/* @type {import('next').NextConfig} /
const nextConfig = {
experimental: {
swcPlugins: [
["fluentui-next-appdir-directive",{
paths: [
"@griffel",
"@fluentui"
// 👇 you can add another dependency that needs the directive
"your dependency name"
]
}],
],
},
// 👇 packages that need the directive
transpilePackages: ["@fluentui/react-components"]
};
module.exports = nextConfig;
`$3
- For versions
< 14.1.2 please use 0.1.5 otherwise there wil be issues with the swc_core version causing rust to panic.
- For versions >= 14.1.2 please use 0.1.7 for the same reason as above, 0.1.7 introduced version 0.90.* of swc_core which makes it compatible with the versions used in <= 14.1.2.
- For versions >= 15.0.0 please use 0.2.0` due to a necessary swc_core bump.This is a known issue of using this directive, one way to get around it is to optimizePackage/modularizeImports imports:
- https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports
- https://nextjs.org/docs/architecture/nextjs-compiler#modularize-imports