How to install StyleX in a new React project

Question

How to install StyleX in a new React project

403 Views Asked by aBarl At 28 December 2023 at 18:22

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.

Original Q&A

There are 3 best solutions below

**Golamrabbi Azad** · Answer 1 · 2023-12-28T19:17:26.953000

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.

**Naman Goel** · Answer 2 · 2024-01-03T19:56:18.777000

Naman Goel On 03 January 2024 at 19:56

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

**Derek Williams** · Answer 3 · 2024-03-24T18:10:06.937000

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

How to install StyleX in a new React project

There are 3 best solutions below

Related Questions in REACTJS

Related Questions in TYPESCRIPT

Related Questions in NEXT.JS

Related Questions in CSS-IN-JS

Trending Questions

Popular # Hahtags

Popular Questions