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_