TypeError: String.prototype.concat called on null or undefined (v0.6.1) about stylex HOT 13 CLOSED

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

from stylex.

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

from stylex.

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.

from stylex.

@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)

from stylex.

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 :(.

from stylex.

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

from stylex.

@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
    },
});

from stylex.

@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?

from stylex.

@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

from stylex.

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?

from stylex.

About StringLiteral being converted i'll take a look.

from stylex.

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

from stylex.

Thanks for understanding and then fixing this issue @nonzzz !

from stylex.