-1

I want to use StyleX in my new project, but I'm having some trouble trying to use it (with NextJS).

I don't understand how to configure the "next.config.js" file (creating a "babel.config.js" file creates conflicts with "next.config.js" file).

I'm stuck at the begin of a project, and from the StyleX docs I can't see a solution, maybe I'm blind or something.

Actual situation:

.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.

Improve this question
0

3 Answers 3

Reset to default
1

This is straightforward to set up. First, install this plugin,

npm install --save-dev @stylexjs/nextjs-plugin

Create a .babelrc.js file in the root directory if it does not exist and add the below configs to the 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,
        },
      },
    ],
  ],
};

Adjust the next.config.js file with the below configs.

const stylexPlugin = require('@stylexjs/nextjs-plugin');

const nextConfig = {
  reactStrictMode: true,
}

module.exports = stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

Now, you're ready to explore stylex.

Improve this answer
5
  • Thanks, but an error occur: "next/font" requires SWC although Babel is being used due to a custom babel config being present. And the Next.js docs says that .babelrc should be removed.
    – aBarl
    Commented Dec 28, 2023 at 22:15
  • Yes, you're right. This conflict has been resolved by stylex. check this out: github.com/facebook/stylex/tree/main/apps/nextjs-example
    – Golamrabbi Azad
    Commented Dec 28, 2023 at 22:40
  • Saying that they solved it is a bit short - they just removed as in not using the nextjs fonts system and trying so will still give errors
    – Poul K. Sørensen
    Commented Jan 1 at 20:10
  • Exactly, doesn't work yet. Docs and GitHub doesn't help and I'm still trying to write the first line of code.
    – aBarl
    Commented Jan 3 at 16:53
  • Ok, if anyone it's still looking at this question, I found the solution. Basically, the error comes from the standard layout.tsx file, which includes the Inter font and causes the problem. I just had to remove the import.
    – aBarl
    Commented Jan 7 at 17:28
0

next/font is not supported in a project that uses Babel. Remove usage of next/font.

Improve this answer
0

Remove the font that the create-next-app installs.

In layout.tsx remove

import { Inter } from next/font/google'

and

const inter = Inter({ subsets: ["latin"] });

These are typically lines 3 and 5 respectively.

Also remove the classname on body (also in layout.tsx), so change this line

<body className={inter.className}>{children}</body>

to

<body>{children}</body>

StyleX has an example for Nextjs. Here are next.config.ts and .babel.rc

https://github.com/facebook/stylex/blob/main/apps/nextjs-example/next.config.js

https://github.com/facebook/stylex/blob/main/apps/nextjs-example/.babelrc.js

Once that is done then running npm run dev will display

> [email protected] predev
> npm run clean


> [email protected] clean
> rimraf .next


> [email protected] dev
> next dev

   ▲ Next.js 14.1.4
   - Local:        http://localhost:3000

   Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
 ✓ Ready in 2.2s
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.