Dependency issue with latest StyleX

[BMCwebdev]

I have that other long thread already going, thought I would keep this one separate. I am trying to set up a test repo for you for my other issue, but ran into an error while setting it up.

I took a copy of your demo: https://github.com/Dwlad90/nextjs-app-dir-stylex/tree/main

I uninstalled @stylexswc/nextjs-plugin and @stylexswc/swc-plugin.

I updated @stylexjs/stylex, @stylexjs/babel-plugin", @stylexjs/eslint-plugin, @stylexjs/nextjs-plugin all to 0.7.5

@stylexswc/swc-plugin re-installs no problems.

When I try to re-install @stylexswc/nextjs-plugin I get the following dependency error.

npm install @stylexswc/nextjs-plugin --save-dev 
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: next-app-dir-test@0.1.0
npm error Found: @stylexjs/babel-plugin@0.7.5
npm error node_modules/@stylexjs/babel-plugin
npm error   dev @stylexjs/babel-plugin@"^0.7.5" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @stylexjs/babel-plugin@"^0.6.1" from @stylexswc/nextjs-plugin@0.1.0
npm error node_modules/@stylexswc/nextjs-plugin
npm error   dev @stylexswc/nextjs-plugin@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

[Dwlad90]

Hi @BMCwebdev,

The demo app now working with the latest versions of @stylexjs/babel-plugin and @stylexswc/swc-plugin

Could you please check if the dependency issue has been fixed?

[BMCwebdev]

I closed the other issue I had open. Looks like you cleared up the dependency mismatch.

my issue now is that StyleX errors out saying that defineVars needs to be compiled. For some reason it is having problems with my tokens file, even though I am almost a copy of StyleX open props demo.

in any case the error I am getting with this plugin is the same that I get with the StyleX CLI tool.

I have a discussion with StyleX if you want to follow along: https://github.com/facebook/stylex/discussions/687#discussioncomment-10620989

[Dwlad90]

Yes, I saw this discussion. If the bug is really present in both plugins, then I would prefer that the @stylexjs/babel-plugin will be fixed first to avoid divergence in the implementation of features.

However, I tried to run your example together with the @stylexswc/swc-plugin@0.2.2 plugin and everything compiled successfully after minor changes.

The only thing is that I was unable to install the @bmcwebdev/tokens dependency due to lack of access rights

npm ERR! code E401
npm ERR! 401 Unauthorized - GET https://npm.pkg.github.com/download/@bmcwebdev/tokens/0.0.1/663b5f8c360984b4d54bf96f4675d95f28dfce4e - authentication token not provided

so I cloned the token's repo and linked it to the app.

Also needed to add @stylexjs/stylex to the dependencies of @bmcwebdev/tokens. After these manipulations, the application launched successfully.

Here is a link to a fork of your example with my small changes: https://github.com/Dwlad90/CLIDemo

[BMCwebdev]

Wow, @Dwlad90 , thank you very much. You have helped me a lot. Your example above helped me realize something about my setup which I now know is why my builds are breaking.

Everything works when we use my token library that is in your demo. However, in my actual build, I have two files in the token library. Something about that setup breaks what StyleX must be expecting.

For example, if I import something from the package published by this repository, which is the one we are using in your demo, and has only one token file, everything works https://github.com/BMCwebdev/stylexAcmeNextTest/tree/main/packages/tokens

But, if I import something from the package published by this repository, which has 2 token files, I will get a defineVars error. https://github.com/BMCwebdev/stylexAcmeNextTest/tree/main/packages/tokens-double-different

There must be something about that setup (with two files) that is incorrect, but I'm not sure what StyleX doesn't like about it, or what the correct method should be.

But soooooo close now! Thank you again!

[BMCwebdev]

Oh, and sorry about the access rights for installing @bmcwebdev/tokens, I made the packages public, not sure why. Perhaps something about my company's restrictions, but that doesn't seem right.

Invited you to the package.

[Dwlad90]

Glad I could help you.

I updated the demo repository. After I removed the CLI from the prebuild process and rename source folder to src, the app built successfully using "@bmcwebdev/tokens-double-different".

You can see the changes in this commit.

Regarding the installation permissions, I still get a 401 error.

Thanks for the feedback🙂