When using an object property in a media query, `as const` in the object definition causes build to fail
dddlr opened this issue · comments
The following code fails with a Cannot statically evaluate the value of "MemberExpression
error:
import { styled } from '@compiled/react';
import React from 'react';
const media = {
from: {
fromMobile: '@media (min-width: 30em)',
},
} as const;
const SummaryContainer = styled.div({
[media.from.fromMobile]: {
color: 'blue',
}
});
export const App = (): JSX.Element => (
<>
<SummaryContainer>Goodbye world?</SummaryContainer>
</>
);
Removing as const
resolves the error.
This is because @compiled/babel-plugin
is not able to handle the TSAsExpression
node when traversing the Babel AST. TSAsExpression
is the node Babel uses to represent the { ... } as const
syntax.
Note that as const
can appear anywhere in an object, so we need to handle stuff like this too:
const media = {
from: {
fromMobile: '@media (min-width: 30em)',
} as const,
};
These are the files that need to be updated to support the { ... } as const
syntax (there might be more):
Workaround
You can try using readonly
instead of as const
. It's kind of awkward for large variables, but it avoids the errors:
type MediaType = {
readonly from: { readonly fromMobile: string },
}
export const media: MediaType = {
from: {
fromMobile: '@media (min-width: 30em)',
},
};