Since 0.4.1: Uncaught TypeError: stylex.inject is not a function

[bastiW]

I have upgraded from 0.3.0 to 0.4.1.

Getting now error:

Uncaught TypeError: stylex.inject is not a function

I uploaded a Demo Project here: https://github.com/bastiW/vite-stylex-demo

Checked the changelog and syntax in documentation and did not notice any breaking change.

[huseyinsalmansoftdev]

I ran into the same issue. Any idea how to fix it?

[AlphaLiu]

same issue , please help.

[bastiW]

The build is working, but not the dev mode

[huseyinsalmansoftdev]

It works fine with stylex@0.3.0. I checked both dev and build. It seems like there is an issue with the latest version of stylex causing this.

The only drawback of using the 0.3.0 version is that it does not have CSS intellisense support inside stylex.create

[bastiW]

The only drawback of using the 0.3.0 version is that it does not have CSS intellisense support inside stylex.create

This is exactly why I wanted to upgrade...

[HorusGoul]

I've been working on upgrading the plugin to support 0.4.1, but found an issue related to Remix and Qwik that might need to be solved from the StyleX side: https://github.com/facebook/stylex/issues/308

This affects Remix and Qwik support. If you're not using any of those frameworks, you should be able to override the version of @stylex/babel-plugin version to 0.4.1 and the plugin should work fine.

[bastiW]

Thanks! Workaround works - also code completion :)

Added to package.json:

  "resolutions": {
    "@stylexjs/babel-plugin": "0.4.1"
  }

[huseyinsalmansoftdev]

@bastiW Could you help me with this fix? I cannot get it working.

App.js

package.json

vite.config.js

babel

Error

Steps:

1. npm create vite@latest
2. select React + Javascript
3. npm install --save @stylexjs/stylex
4. npm i @stylexjs/babel-plugin
5. Create babel.config.js
6. Paste the config from https://stylexjs.com/docs/learn/installation/#:~:text=import%20styleXPlugin%20from%20%27%40stylexjs/babel,%3B%0A%0Aexport%20default%20config%3B
7. npm i vite-plugin-stylex
8. import styleX from "vite-plugin-stylex" and styleX() to the plugin in vite.config.js

I was still getting the stylex.inject is not a function error earlier. Could you please help me what my mistake is considering that you mentioned it works.

[edamascus]

@huseyinsalmansoftdev, I was having the same issue when updating StyleX to v0.4.1 in a React spa project, and the workaround suggested by @HorusGoul solved the issue with the help of the hint from @bastiW.

You don't need to install @stylexjs/babel-plugin separately or include a babel.config.js as it is already a dependency of vite-plugin-stylex. In order to override the dependency for vite-plugin-stylex you can add the following to your project's package.json (or your monorepo's root package.json) and use overrides instead of resolutions since you are using npm:

  "overrides": {
    "vite-plugin-stylex": {
      "@stylexjs/babel-plugin": "0.4.1"
    }
  },

Then, run npm update and the dependency @stylexjs/babel-plugin for vite-plugin-stylex will be updated to v0.4.1 and the latest StyleX version should work properly for dev and build.