Fails to compile typescript enums

[dewey92]

Environment

• Linaria version: ^2.1.0 (also tried with ^3.0.0-beta.4)
• Bundler (+ version): Webpack ^4.44.2
• Node.js version: 12.9.1
• OS: Linux (Manjaro) and MacOS

Description

TS enums are always evaluated to undefined, producing this error:

ERROR in ./src/App.tsx
Module build failed (from ./node_modules/linaria/loader.js):
SyntaxError: /path/to/repo/src/App.tsx: An error occurred when evaluating the expression: 

  > Cannot read property 'black' of undefined. 

  Make sure you are not using a browser or Node specific API and all the variables are available in static context.
  Linaria have to extract pieces of your code to resolve the interpolated values.
  Defining styled component or class will not work inside:
    - function,
    - class,
    - method,
    - loop,
  because it cannot be statically determined in which context you use them.
  That's why some variables may be not defined during evaluation.
      
  10 |
  11 | const H1 = styled.h1`
> 12 | 	color: ${Color.black};
     |      	   ^^^^^^^^^^^
  13 | `

Reproducible Demo

enum Color {
  black = '#000'
}

const H1 = styled.H1`
  color: ${Color.black};
`

export default App() {
  return <H1>Error</H1>
}

You can also try replacing that enum with the transpiled code and it will still fail:

let Color;
(function (Color) {
    Color["black"] = "#000";
})(Color || (Color = {}));

const H1 = styled.H1`
  color: ${Color.black};
`

export default App() {
  return <H1>Error</H1>
}

So it seems like it doesn't run IIFEs

Other configs

webpack

module.exports = () => ({
  ...irrelevant,
  module: {
    rules: [
      {
        include: [resolve('src')],
        test: /\.(j|t)sx?$/,
        use: ['babel-loader', 'linaria/loader'],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: resolve('./css-bundles/[name].css'),
    }),
  ],
})

.babelrc

{
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-react",
    "linaria/babel"
  ]
}

[PierreGUI]

More data

The code above does not build neither for Linaria versions 3-beta, 2, 1.4, 1.3 with both evaluators extractor and shaker.

Now, take the Color enum and move it to a separate file, like so:

import { Color } from './constants/style'

const H1 = styled.h1`
	color: ${Color.black};
`

And it builds for Linaria 1.4 and 2.1 as long as evaluator is set to extractor. It fails for shaker evaluator.

[Anber]

Hi @dewey92 and @PierreGUI

I've fixed that issue, but I don't sure yet, that the fix doesn't break anything else. I need a couple of days for additional testing.

[dewey92]

@Anber Thanks for the fix! We can also help you test your fix 🙂 We'll let you know if we encounter problems, considering we use enums a lot in our linaria codebase

[Anber]

Ok!
I'll publish it as a new beta later today.

[Anber]

Published

[dewey92]

Super thanks @Anber! I think it solves the enum problem, great job!

However, I found a new interesting bug in our codebase: It's when you import an enum:

/* constants/styles.ts */
export enum Size {
  xs = 'xs',
  ...
  xxl = 'xxl'
}

/* another_constants/avatar.ts */
import { Size } from 'constants/styles'

export const AvatarSize = {
  [Size.xs]: 20,
  ...
  [Size.xxl]: 50
}

/* Component.tsx  */
import { styled } from '@linaria/react'
import { AvatarSize } from 'nother_constants/avata'

const Avatar = styled.div`
  height: ${AvatarSize.xxl}px;
`

The error message:

Module build failed (from ./node_modules/@linaria/webpack-loader/lib/index.js):
SyntaxError: /path/to/project/Component.tsx: The expression evaluated to 'undefined',
which is probably a mistake. If you want it to be inserted into CSS,
explicitly cast or transform the value to a string, e.g. - 'String(AvatarSize.xxl)'.

  90 | const Avatar = styled.div`
> 91 | 	height: ${AvatarSize.xxl}px;
     |            ^^^^^^^^^^^^^^
  92| `

[Anber]

Hmm… I couldn't reproduce it but I'll try again later today. Thank you for the report! :)

[Anber]

Hi @dewey92!

Two days ago @M1r1k reproduced the issue with broken imports (#333) and I really hope that your issue has the same root. Could you please check 3.0.0-beta.7?

[dewey92]

@Anber will try next week! Thanks for letting me know 😉

[dewey92]

@Anber Thanks for creating a patch! After updating to 3.0.0-beta.7 unfortunately I still have the same issue 😕

I've prepared a minimal reproducable repo if you want to fiddle around https://github.com/dewey92/linaria-v3-iife-repro. Sorry if this is the least I could do to help you pinpoint the problem

[Anber]

Hi @dewey92!
How did you get that code? If you try to evaluate it in a browser's console, you will get the same undefined.
The correct version of a transpilled enum should look like

var Color;
(function (Color) {
	Color = {}
	Color['black'] = '#000'
})(Color)

https://www.typescriptlang.org/play?#code/KYOwrgtgBAwg9gGzgJygbwFAEgBGCCGAxgNZQC8UA5AMQAM9lGAvhkA

[dewey92]

@Anber My bad! With the latest patch my issue-reproduction repo does indeed work. But in our project it's still not compiling, complaining it's undefined.

Let me close the issue until I figure out the exact problem. Thanks once again 🙂