getting errors with using the stylex CLI in next 15 App dir.

[Lolhp0]

ISSUE

• Im getting the following error while using the stylex CLI with next 15 while following the example in eab671c:
  'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'

CODES

.stylex.json5:

{
  input: ['./source'],
  output: ['./src'],
  cssBundleName: 'stylex_bundle.css',
  useCSSLayers: true,
  babelPresets: [
    ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
    // '@babel/preset-react',
  ],
  // modules_EXPERIMENTAL: [
  //   ['@stylexjs/open-props', { ignore: ['src', '__tests__'] }],
  // ],
  // watch: true,
}

next.config.ts (default nothing changed.):

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

and here's my package.json incase its needed:

{
  "name": "next_cli_stylx_three_appdir",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "predev": "stylex --config ./.stylex.json5",
    "dev": "stylex --config ./.stylex.json5 -w & next dev",
    "prestart": "stylex --config ./.stylex.json5 && next build",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@babel/preset-typescript": "^7.26.0",
    "@babel/runtime": "^7.26.0",
    "@stylexjs/babel-plugin": "^0.9.3",
    "@stylexjs/cli": "^0.9.3",
    "@stylexjs/stylex": "^0.9.3",
    "next": "15.0.3",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5"
  }
}

and here's the code of me trying to use the stylex.create() in app/page.tsx

import "../stylex_bundle.css";
import * as stylex from "@stylexjs/stylex"


export default function Home() {
  return (
    <>
      <div {...stylex.props(styles.rootDiv)}> 

      </div>
    </>
  );
}

const styles = stylex.create({
  rootDiv: {width: "100%", minHeight: "100dvh", background: "green"}
})

I have made all the changes relating to the src also.
If needed, ill put the project up on github.

[Lolhp0]

I actually dont know why the whole text is messed up. Ill create a github repo and post the link here in a bit. sorry lol

[nmn]

I don't see anything wrong with your setup. Might be missing something small. Please put up your project on Github so I can check.

One additional script might be prebuild.

[Lolhp0]

heyo im sorry I forgot to put the project on github. Ill put it up today and comment the link.

[Lolhp0]

https://github.com/Lolhp0/stylexnextjs-cli-error

theres also some issues i forgot to state. i had renamed the source file and everything but when i run npm run dev everytime it creates a new src and a layout.js and page.js and all that. I don't really know how to fix those stuff

[nmn]

I was going to message but looks like you merged my PR already. Hopefully it's working on your machine as well.

There are a few of limitations of the CLI for now:

1. All imports need to be manually types to be relative imports. The @/ alias can't be used.
2. The globals.css file should be wrapped with @layer priority1 { ... } to ensure it doesn't override StyleX styles.
3. Compiling external packages that use StyleX styles has some bugs

We're working to fix all of these issues and it should be done soon.

[Lolhp0]

thanks for all this help. Im having an issue of when i try to run npm run dev now, its generating a new src folder along with layout.js page.js etc. which is giving me this error:

ERROR

Module not found: Can't resolve '..\stylex_bundle.css'
Did you mean './..\stylex_bundle.css'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
> 1 | import "..\\stylex_bundle.css";
    | ^
  2 | import * as stylex from "@stylexjs/stylex";
  3 | import "./globals.css";
  4 | export const metadata = {

https://nextjs.org/docs/messages/module-not-found

Codes being generated from the npm run dev command:

layout.js

import "..\\stylex_bundle.css";
import * as stylex from "@stylexjs/stylex";
import "./globals.css";
export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app"
};
export default function RootLayout({
  children
}) {
  return <html {...{
    className: "x1ghz6dp x1717udv"
  }} lang="en">
      <body {...{
      className: "x1ghz6dp x1717udv xg6iff7 x100uywg"
    }}>{children}</body>
    </html>;
}

page.js:

import "..\\stylex_bundle.css";
import { props, create, keyframes } from "@stylexjs/stylex";
// Although StyleX can compile `@/` paths, TS can only resolve
// them to one location. This will be fixed in the CLI soon.
import { fonts, tokens } from "../vars.stylex";
export default function Home() {
  return <main {...{
    className: "xg6iff7 x100uywg x78zum5 xdt5ytf x6s0dn4 xl56j7k"
  }}>
      <h1 {...{
      className: "xer8iyq x8cw2a4 xo5v014 x1ghz6dp"
    }}>Welcome to Next.js & StyleX!</h1>
      <p {...{
      className: "xer8iyq xvewgow x1evy7pa xman319"
    }}>
        Get started by editing <code>pages/index.tsx</code>
      </p>
      <div {...{
      className: "xpyat2d x1oysuqx xybe50t xtursrm x1ke1kyy x18ebdri xa4qsjk"
    }} />
    </main>;
}
const gradientColors = ["#ffadad", "#ffd6a5", "#fdffb6", "#caffbf", "#9bf6ff", "#a0c4ff", "#bdb2ff", "#ffc6ff", "#ffadad"].join(", ");
const rotate = "xa503dy-B";

along with stylex_bundle.css which has alot of css classes with styles aswell as vars.stylex.js. I don't think those file contents have anything to do with the error so i wont share it but if neccessary I will.

Is there any way to stop generating a new src file when i run npm run dev?

[Lolhp0]

and I still don't know why github is ruining the text formatting

[nmn]

(The text formatting is broken, because you're not putting a new line after the triple backticks. Try to edit your comment again and see the correct way to define codeblocks.)

Seeing the error message, there seems to be a Windows-specific bug with import paths.
To verify, can you try replacing

import "..\\stylex_bundle.css";

with

import "../stylex_bundle.css";

in the generated files and see if that fixes the problem?

---

Explanation: Windows uses backslash for file paths instead of forward slash like mac/unix/linux. We're using Node APIs to get relative file paths which are being returned with backslashes, but I think the import statements expect forward slashes.

---

If this is indeed the problem, the fix should be pretty straightforward.

[nmn]

If you'd like to help fix the problem (or patch it and unblock yourself), look at the last 7 lines in @stylexjs/stylex/lib/files.js and @stylexjs/stylex/lib/es/files.mjs

Patching those files to return forward slashes instead of backslashes should fix the problem.

[Lolhp0]

I tried doing that, it's giving me this error.

Module not found: Can't resolve '..\stylex_bundle.css'
Did you mean './..\stylex_bundle.css'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
> 1 | import "..\\stylex_bundle.css";
    | ^
  2 | import { props, create, keyframes } from "@stylexjs/stylex";
  3 | // Although StyleX can compile `@/` paths, TS can only resolve
  4 | // them to one location. This will be fixed in the CLI soon.

https://nextjs.org/docs/messages/module-not-found

Also how can i stop it from generating a new src folder everytime with a layout.js and page.js since I already have a layout.tsx and page.tsx ?

[Lolhp0]

this is what the current import looks like : import "../stylex_bundle.css"; but for some reason it's reading it as '..\stylex_bundle.css'

[nmn]

In your own comment, you stated that the generated file had:

import "..\\stylex_bundle.css";

It'll take me a bit longer to debug the windows issue as I don't have windows on me handy at the moment, but I'll work on it soon.

[Lolhp0]

yes i edited the

import "..\\stylex_bundle.css"

to

import "../stylex_bundle.css";

which is what you told me to try.

[nmn]

@Lolhp0 and Next still can't compile it? Is the stylex_bundle.css file present one folder up?