Next.js server actions working?

[bonttimo]

I haven’t found any recent discussions about whether Server Actions are working with Next.js and StyleX. I haven’t been able to get them working myself and was wondering if there’s a specific setup required. I’m aware that a new CLI is in the works to address this, but it’s not production-ready yet?

Additionally, I couldn’t get the custom StyleX SWC plugin to work in my setup either.

[Dwlad90]

Hi @bonttimo,
Most likely you have encountered a similar problem: classes are correctly generated and displayed in DOM, but styles from JSX server actions don't get into the exported CSS file. Here is my issue for NextJS with this problem.
If this is your case, then I managed to solve this problem by adding an import of the file with server action to the main build without using it directly. SoNextJS begins to "see" this JSX code and process it as a normal server code of the page, while correctly extracting all the styles.

P.S. I am the developer of community stylex-swc-plugin and can help you with its correct configuration, if you are interested🙂

[bonttimo]

@Dwlad90 Thanks for the quick reply—and also, thanks for developing the StyleX SWC plugin!

I’m running into a strange issue with Server Actions. Specifically, I get the following error immediately upon importing a "use server" function into a client component: Error: x Server Actions cannot use this. return _getProducts.apply(this, arguments); It seems unrelated to the server action function being used—they all work fine in non-client components. Here's a minimal example of the function:

"use server";

export async function getProducts() {
    return [];
}

On another note, I gave the stylex-swc-plugin another shot and got it working—huge improvement in speed, really loving it so far! Here's my current config setup:

next.config.mjs

import path from "path";
import stylexPlugin from "@stylexswc/nextjs-plugin";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const rootDir = __dirname;

const isDevelopment = process.env.NODE_ENV === "development";

export default stylexPlugin({
    rsOptions: {
        dev: process.env.NODE_ENV !== "production",
        aliases: { "@/*": [path.join(rootDir, "*")] },
        useRemForFontSize: true,
        unstable_moduleResolution: { type: "commonJS" },
        useCSSLayers: true,
    },
})({
    trailingSlash: true,
});

postcss.config.mjs

import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const projectRoot = __dirname;

const config = {
    plugins: {
        "@stylexswc/postcss-plugin": {
            include: ["app/**/*.{js,jsx,ts,tsx}", "components/**/*.{js,jsx,ts,tsx}"],
            useCSSLayers: true,
            rsOptions: {
                aliases: { "@/*": [path.join(projectRoot, "*")] },
                unstable_moduleResolution: { type: "commonJS" },
                dev: process.env.NODE_ENV === "development",
                genConditionalClasses: true,
                treeshakeCompensation: true,
            },
        },
        autoprefixer: {},
    },
};
export default config;

I did run into one issue that seemed to come down to file naming. I had a file called tokens.stylex.js with some stylex.create definitions inside, and it was occasionally throwing this error: Error: Panic occurred during transformation: Cannot resolve file path: @/styles/tokens.stylex

It didn’t happen every time—maybe 80% of the time—but enough to be a bit of a pain. I ended up moving the definitions into a regular .js file instead, and that seemed to solve it:

export const layout = stylex.create({
  // ...
});

If there's a recommended way to structure shared tokens or other configurations, I'd love to hear it. Thanks again for the quick reply!

[Dwlad90]

Your problem is probably related to code transformation. Maybe during the build the code is transformed from mjs to cjs, but this is just a theory. Have you tried importing the same function, but without using the use server keyword, just as a regular async function?

Now regarding the problem with the missing file. I may be wrong, but the stylex.create function is intended to be used directly in component files with a regular name, without the stylex.js postfix.

According to the documentation, *.stylex.js files are intended to be used with stylex.defineVars and stylex.defineConsts that can then be imported in component files and used into the stylex.create and stylex.createTheme functions.

I can try to find out the reason of the exception if you can open issue and provide a link to a minimal reproduction of the error.

[nmn]

I’m a bit confused by the discussion. Did you mean server components or server actions?

server actions shouldn’t deal with styles?