Cannot run styleX [error: 'stylex.create' should never be called at runtime]

[Eraz19]

Describe the issue

I try to use StyleX in a react Typescript project using webpack to bundle all this.When I try to run my code I got this same error.

Expected behavior

Use StyleX in my code and it should be compiled when I build my app.

Steps to reproduce

package.json

{
	"name": "employee_react",
	"version": "0.1.0",
	"private": true,
	"main": "index.js",
	"scripts": {
		"build": "webpack --config webpack.config.js",
		"start": "webpack server --open",
		"dev": "npm-run-all -s build start"
	},
	"dependencies": {
		"@capacitor/android": "^5.6.0",
		"@capacitor/camera": "^5.0.9",
		"@capacitor/cli": "^5.6.0",
		"@capacitor/core": "^5.6.0",
		"@stylexjs/stylex": "^0.5.1",
		"firebase": "^10.8.0",
		"moment": "^2.30.1",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"react-qr-reader": "^2.2.0",
		"react-router-dom": "^6.21.3",
		"zod": "^3.22.4"
	},
	"devDependencies": {
		"@babel/cli": "^7.23.9",
		"@babel/core": "^7.23.9",
		"@babel/preset-env": "^7.23.9",
		"@babel/preset-react": "^7.23.3",
		"@babel/preset-typescript": "^7.23.3",
		"@stylexjs/babel-plugin": "^0.5.1",
		"@stylexjs/webpack-plugin": "^0.5.1",
		"@types/react": "^18.2.53",
		"@types/react-dom": "^18.2.18",
		"@types/react-qr-reader": "^2.1.7",
		"babel-loader": "^9.1.3",
		"cross-env": "^7.0.3",
		"css-loader": "^6.10.0",
		"html-webpack-plugin": "^5.6.0",
		"npm-run-all": "^4.1.5",
		"sass": "^1.69.7",
		"sass-loader": "^14.1.0",
		"style-loader": "^3.3.4",
		"ts-loader": "^9.5.1",
		"typescript": "^5.3.3",
		"webpack": "^5.90.1",
		"webpack-bundle-analyzer": "^4.10.1",
		"webpack-cli": "^5.1.4",
		"webpack-dev-server": "^4.15.1"
	}
}

tsconfig.json

{
	"include"        : ["src/**/**/*"],
	"exclude"        : ["node_modules"],
	"compilerOptions":
	{
		"allowUnreachableCode"            : false,
		"exactOptionalPropertyTypes"      : true,
		"noFallthroughCasesInSwitch"      : true,
		"noImplicitThis"                  : true,
		"noUnusedLocals"                  : true,
		"noUnusedParameters"              : true,
		"noImplicitAny"                   : true,
		"noImplicitReturns"               : true,
		"alwaysStrict"                    : true,
		"strictBindCallApply"             : true,
		"strictFunctionTypes"             : true,
		"strictNullChecks"                : true,
		"strictPropertyInitialization"    : true,

		"jsx"                             : "react-jsx",
		"esModuleInterop"                 : true,
		"allowJs"                         : true,
		"checkJs"                         : true,
		"isolatedModules"                 : true
	}
}

webpack.config.js

//const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

const HTMLWebpackPlugin    = require("html-webpack-plugin");
const StylexPlugin         = require("@stylexjs/webpack-plugin");

const path                 = require("path");


const config = (env, argv) =>
[
    {
        entry  : "./src/index.tsx",
        mode   : "development",
        cache  : true,
        output :
        {
            path      : path.resolve(__dirname, "build/dist/"),
            filename  : "employeeApp.js",
        },
        plugins:
        [
            //new BundleAnalyzerPlugin(),
            new HTMLWebpackPlugin(
                {
                    template: "./public/index.html",
                }
            ),
            new StylexPlugin(
                {
                    filename                 : "styles.[contenthash].css",
                    dev                      : argv.mode === "development",
                    runtimeInjection         : false,
                    classNamePrefix          : "x",
                    unstable_moduleResolution:
                    {
                        type   : "commonJS",
                        rootDir: __dirname,
                    },
                }
            ),
        ],
        resolve:
        {
            extensions: [".ts", ".tsx", ".js", ".jsx"],
        },
        module :
        {
            rules:
            [
                {
                    test   : /\.(ts|tsx)$/,
                    exclude: /node_modules/,
                    use    : "ts-loader",
                },
                {
                    test   : /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use    :
                    {
                        loader : "babel-loader",
                        options:
                        {
                            presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", "@stylexjs/babel-plugin"],
                        },
                    },
                },
                {
                    test: /\.s[ac]ss$/i,
                    use : ["style-loader", "css-loader", "sass-loader"],
                },
                {
                    test   : /\.css$/,
                    exclude: /node_modules/,
                    use    : ["style-loader", "css-loader"],
                },
                {
                    test: /\.(png|svg|ttf)$/i,
                    type: "asset/resource",
                },
            ],
        },
    }
];

module.exports = config;

code example

import * as React  from "react";
import * as StyleX from "@stylexjs/stylex";


import * as Types from "./type";


const style = StyleX.create(
    {
        input:
        {
             border: "red solid 1px",
        },
    }
);

export function Component(props : Types.T_Props) : JSX.Element
{
    return (
        <input
            {...StyleX.props(style.input)}
            placeholder = {props.placeholder}
            onChange    = {HandleOnChange}

        />
    );
};

error in the browser

Uncaught Error: 'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'
errorForFn webpack://employee_react/./node_modules/@stylexjs/stylex/lib/stylex.js?:12
stylexCreate webpack://employee_react/./node_modules/@stylexjs/stylex/lib/stylex.js?:51
webpack://employee_react/./src/Components/Input/index.tsx?:51
tsx http://localhost:8080/employeeApp.js:1706
webpack_require http://localhost:8080/employeeApp.js:1970
fn http://localhost:8080/employeeApp.js:2177
webpack://employee_react/./src/index.tsx?:35
tsx http://localhost:8080/employeeApp.js:1728
webpack_require http://localhost:8080/employeeApp.js:1970
http://localhost:8080/employeeApp.js:3057
http://localhost:8080/employeeApp.js:3059
employeeApp.js line 19 > eval:12:28
errorForFn webpack://employee_react/./node_modules/@stylexjs/stylex/lib/stylex.js?:12
stylexCreate webpack://employee_react/./node_modules/@stylexjs/stylex/lib/stylex.js?:51
webpack://employee_react/./src/Components/Input/index.tsx?:51
tsx http://localhost:8080/employeeApp.js:1706
webpack_require http://localhost:8080/employeeApp.js:1970
fn http://localhost:8080/employeeApp.js:2177
webpack://employee_react/./src/index.tsx?:35
tsx http://localhost:8080/employeeApp.js:1728
webpack_require http://localhost:8080/employeeApp.js:1970
http://localhost:8080/employeeApp.js:3057
http://localhost:8080/employeeApp.js:3059

Test case

No response

Additional comments

No response

[nmn]

Could you share minimal project setup with the issue so we can reproduce the issue locally and try to help?

[Eraz19]

UILibrary.zip
Here is a basic version of a project using my setup

[Eraz19]

Hey everyone, is there any update on this issue ? Do you have any idea how I could help you, I really need this.

[nmn]

We are working on a CLI (PR is up) which might be a short term solution. I'm also working on a refactor that might enable side-stepping bundlers in many cases.

[Eraz19]

Can you keep me posted when this is done? Also I didn't really understand your last message and the solutions you proposed. Can you give a little explanation please.

[nmn]

@Eraz19 You can follow progress here: #412

In terms of my explanation, there are some complex build setups where it can be hard to integrate StyleX properly. So we're working on two slightly hacky solutions which will work alongside any weird build setups.

1. A CLI - So you can pre-compile stylex from your app and extract a static CSS file before running it through your normal build. I.e. source --CLI--> src --build--> dist.
2. Some new options in the StyleX Babel plugin to change the way it tries to collect CSS. This change will make StyleX work with most bundlers as long as you can use Babel. (Next prefers SWC now, so the CLI will be the solution for that)