Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update: babel to 7.4

See original GitHub issue

Environment

linaria@1.3.1
@babel/core@7.4.4
@babel/cli@7.4.4

Description

There was an issue within babel core with as const in TypeScript, which was resolved in babel 7.4. Linaria CLI uses old 7.3.3 as dependency.

Reproducible Demo

lerna exec --scope @twisto/theme -- 'linaria --config $LERNA_ROOT_PATH/linaria.config.js --out-dir dist/styles \"src/**/*.tsx\" \"src/**/*.ts\"'

will throw because theme package contains as const

export const createAnimation = <T extends string>(
  name: T,
  definition: { [percentage: string]: CSSProperties }
) => {
  const animationDef = `@keyframe ${name} { ${createCssDefinitionFromObject(
    definition
  )} }`

  return {
    name,
    definition: animationDef,
  } as const

Error:

lerna exec --scope @twisto/theme -- 'linaria --config $LERNA_ROOT_PATH/linaria.config.js --out-dir dist/styles "src/**/*.tsx" "src/**/*.ts"'
lerna notice cli v3.13.4
lerna info versioning independent
lerna info filter [ '@twisto/theme' ]
lerna info Executing command in 1 package: "linaria --config $LERNA_ROOT_PATH/linaria.config.js --out-dir dist/styles \"src/**/*.tsx\" \"src/**/*.ts\""
/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/linaria/node_modules/@babel/core/lib/transformation/normalize-file.js:209
    throw err;
    ^

SyntaxError: /Users/hotell/Projects/devel/twisto/twisto-ui/packages/theme/src/mixins.ts: Unexpected token (25:7)

  23 |     name,
  24 |     definition: animationDef,
> 25 |   } as const
     |        ^
  26 | }
  27 | 
  28 | const createCssDefinitionFromObject = (definition: {
    at Object.raise (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:3831:17)
    at Object.unexpected (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:5143:16)
    at Object.tsParseNonArrayType (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9269:16)
    at Object.tsParseArrayTypeOrHigher (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9273:21)
    at Object.tsParseTypeOperatorOrHigher (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9312:120)
    at Object.tsParseUnionOrIntersectionType (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9317:16)
    at Object.tsParseIntersectionTypeOrHigher (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9335:17)
    at Object.tsParseUnionOrIntersectionType (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9317:16)
    at Object.tsParseUnionTypeOrHigher (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9339:17)
    at Object.tsParseNonConditionalType (/Users/hotell/Projects/devel/twisto/twisto-ui/node_modules/@babel/parser/lib/index.js:9492:17)

Solution

after manually bumping linaria dependencies to latest, issue is resolved as expected, although I would prefer to consume users babel config for transforms 👉 https://github.com/callstack/linaria/blob/master/src/transform.js#L64

    "@babel/core": "^7.3.3",
    "@babel/core": "^7.4.4",
    "@babel/generator": "^7.4.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/register": "^7.4.4",