As I delve into my new project, incorporating StyleX has proven to be a bit challenging especially when working with NextJS.
I find myself grappling with configuring the "next.config.js" file without causing conflicts with the existing "babel.config.js" file.
Despite scouring through the StyleX documentation, the solution still eludes me, making me question if I'm missing something obvious.
Current Setup:
.babelrc.js file:
module.exports = {
presets: ["next/babel"],
plugins: [
[
"@stylexjs/babel-plugin",
{
dev: process.env.NODE_ENV === "development",
runtimeInjection: false,
genConditionalClasses: true,
treeshakeCompensation: true,
unstable_moduleResolution: {
type: "commonJS",
rootDir: __dirname,
},
},
],
],
};
next.config.js file:
/** @type {import('next').NextConfig} */
const stylexPlugin = require("@stylexjs/nextjs-plugin");
const nextConfig = {
reactStrictMode: true,
};
module.exports = stylexPlugin({
rootDir: __dirname,
})(nextConfig);
module.exports = nextConfig;
Error:
"next/font" requires SWC although Babel is being used due to a custom babel config being present.