When using an object property in a media query, `as const` in the object definition causes build to fail

[Grant Wong]

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

• compiled/packages/babel-plugin/src/utils/traverse-expression/traverse-member-expression/traverse-access-path/evaluate-path/index.ts

  Line 14 in 5a5ab2e

   if (t.isObjectExpression(expression)) { 

• compiled/packages/babel-plugin/src/utils/traversers/object.ts

  Line 6 in 41bcb1e

   export const getObjectPropertyValue = ( 

---

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