TypeError: String.prototype.concat called on null or undefined (v0.6.1)

[Suman]

Describe the issue

Seeing the following error on v0.6.1. Code was previously working on v0.6.0 and earlier versions

TypeError: String.prototype.concat called on null or undefined
    at concat (<anonymous>)
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

I was able to narrow it down to this new null check added in v0.6.1:

stylex/packages/babel-plugin/src/utils/evaluate-path.js

Line 693 in c48bea1

       if (func == null) { 

In our case, we hit the following condition first (isStringLiteral is true)

stylex/packages/babel-plugin/src/utils/evaluate-path.js

Lines 683 to 691 in c48bea1

       // "abc".charCodeAt(4) 
       if ( 
         (pathUtils.isStringLiteral(object) || 
           pathUtils.isNumericLiteral(object)) && 
         pathUtils.isIdentifier(property) 
       ) { 
         const val: number | string = object.node.value; 
         func = (val as $FlowFixMe)[property.node.name]; 
       } 

^ which defines func as the string concat function but context remains undefined.

As a result, calling func later results in TypeError: String.prototype.concat called on null or undefined being thrown because context is undefined.

stylex/packages/babel-plugin/src/utils/evaluate-path.js

Line 725 in c48bea1

           return func.apply(context, args); 

I was able to workaround this by setting context to val. Reverting the null check also works but unsure which is the correct solution.

Expected behavior

No errors when compiling valid code.

Steps to reproduce

See issue description.

Test case

No response

Additional comments

No response

[Naman Goel]

Could you share the code that is causing the error? The null check was needed for some other edge-cases we ran into.

[adrian-novacescu]

I have the same issue after updating. I updated from 0.4.1 to 0.6.1. I didn't try other versions. I can try to create a test case in 2 weeks if needed.

[Naman Goel]

@adrian-novacescu Would you be willing to share a minimal repro? Ideally, start removing all the StyleX styles from your project until you find the root cause of the problem.

Thanks! (Sorry I was away for a couple of weeks)

[adrian-novacescu]

@nmn, I will try to do it until Friday. Worst case scenario I will do it during weekend.

[adrian-novacescu]

Unfortunately I didn't have the chance to work on it and the next couple of weeks seems to be extremely busy. Sorry for that. I will notify you as soon as I can do it :(.

[Naman Goel]

@adrian-novacescu If you can even share the last few files where you used StyleX I might be able to find the root cause.

[Evgeniy.lyahov]

@nmn in my case code below throws same error when I use storybook

import * as stylex from "@stylexjs/stylex";

export const spacing = stylex.defineVars({
    3: '12px',
});

const styles = stylex.create({
    optionBase: {
        padding: `0 ${spacing['3']}`, // this line
    },
});

[Naman Goel]

@EvgeniyLyakhov just to verify. But is spacing defined in a separate file with the .stylex.js file extension and imported from there when being used in the stylex.create?

[adrian-novacescu]

@nmn sorry it took me so long but I was full until now. I added a zip here that contain a test case where this can be reproduced. From what I see, it doesn't matter where the values are defined. As long as we use template literals for concatenating, it will fail. With normal string concatenation it works ok.

In the same test case I added another issue. I tried to use dynamic styles or variables for media queries but in this case I get: Only static values are allowed inside of a stylex.create() call.

All you need is to uncomment the code from index.tsx and run yarn production to reproduce that.

stylex.zip

[kanno]

According the minimal reproduction. I got the code before pipe to stylex compiler.

AFAIK. Dynamic style only support arrow function expression. So cause the error translate. So i disable the @babel/preset-env in your local babel.config.js and i got the right code for stylex.

@nmn Did you think it's a bug or a configuration error?

[kanno]

About StringLiteral being converted i'll take a look.

[kanno]

About babel configuration. I think we can add a document that describes its behavior to help users avoid incorrect configurations.

[Naman Goel]

Thanks for understanding and then fixing this issue @nonzzz !