Aliases from @stylexjs/babel-plugin does not seem to work

[adrian-novacescu]

I created a webpack project now and I tried to configure aliases for stylex tokens but I get

  Only static values are allowed inside of a stylex.create() call.

It works ok with relative paths. I attached here a small test case in case I do something wrong.
stylex-aliases.zip

All you need is to run yarn install and then yarn build to be able to reproduce it.

Looking forward to your answer,
Adi

[nmn]

I looked at the project and StyleX doesn't seem to be configured to resolve aliases. Adding the resolve key in the webpack config isn't enough.

You have to manually configure StyleX as well. See: https://stylexjs.com/docs/api/configuration/babel-plugin/#aliases

An example is in the nextjs-example/.babelrc.js file in the StyleX repo. It have been configured like so:

aliases: {
  '@/*': [path.join(__dirname, '*')],
},

NOTE: You'll need to use the full path of the folders.
NOTE: You'll need to configure the alias for each of the folders since you don't have a common prefix like @.

The alternative would be to use a monorepo that Node understands natively. This can be done with the workspaces key in your package.json.

[adrian-novacescu]

I did unless I am missing something. In my babel.config file I have

  aliases: {
              'design-system': path.join(__dirname, 'src/design-system/'),
            },

Isn't this correct?

[nmn]

Try this instead:

  aliases: {
              'design-system/*': path.join(__dirname, 'src/design-system/*'),
            },

Your config only sets up the alias for one path and that path happens to be a folder path.

[adrian-novacescu]

Thanks for your answer. I tried it now but I have the same result :(.