Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to install StyleX in a new React project

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search