Cannot parse typescript files on transformation (Vite)

Environment

Project created via vite cli using react-ts preset.

vite.config.ts

import { defineConfig } from 'vite'
import linaria from '@linaria/rollup'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), linaria()]
})

• Linaria version: 3.0.0-beta.18
• Bundler (+ version): Vite ^2.9.0
• Node.js version: 16.10.0
• OS: macOS 10.15.7 (Catalina)

Description

I suspect an issue with shaker that prevents it from parsing and evaluating typescript files (at least in vite environment)

I have set up a simple reproduction demo with two files. It is not exactly minimal, but representable of typical use-case.

main.tsx

import React from "react"
import ReactDOM from "react-dom"
import { styled } from "@linaria/react"

import { hsl, HSLColor, lighter, toCssColor } from "./color"

const baseColor = (props: { baseColor: HSLColor }) =>
  toCssColor(lighter(props.baseColor, 0.5))

const Container = styled.div<{ baseColor: HSLColor }>`
  background: ${baseColor};
`

ReactDOM.render(
  <React.StrictMode>
    <Container baseColor={hsl(120, 100, 50)} />
  </React.StrictMode>,
  document.getElementById("root")
)

color.ts

export type HSLColor = {
  h: number
  s: number
  l: number
}

export function hsl(h: number, s: number, l: number): HSLColor {
  return { h, s, l }
}

export function lighter({ h, s, l }: HSLColor, additional: number): HSLColor {
  return { h, s, l: Math.min(l * (1 + additional), 100) }
}

export function toCssColor({ h, s, l }: HSLColor): string {
  return `hsl(${h}, ${s}%, ${l}%)`
}

This exact configuration causes this error to be thrown and logged:

5:21:21 PM [vite] Internal server error: /Users/yaroslav/Developer/JS/linaria-bug/src/main.tsx: An unexpected runtime error occurred during dependencies evaluation:
/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/core/lib/parser/index.js:93
    throw err;
    ^

SyntaxError: /Users/yaroslav/Developer/JS/linaria-bug/src/color.ts: Support for the experimental syntax 'flow' isn't currently enabled (1:8):

> 1 | export type HSLColor = {
    |        ^
  2 |   h: number
  3 |   s: number
  4 |   l: number

Add @babel/preset-flow (https://git.io/JfeDn) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-flow (https://git.io/vb4yb) to the 'plugins' section to enable parsing.
    at instantiate (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:358:12)
    at Parser.raise (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:3335:19)
    at Parser.expectOnePlugin (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:3392:18)
    at Parser.isExportDefaultSpecifier (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15932:16)
    at Parser.maybeParseExportDefaultSpecifier (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15808:14)
    at Parser.parseExport (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15761:29)
    at Parser.parseStatementContent (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:14649:27)
    at Parser.parseStatement (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:14533:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15176:25)

It may happen when your code or third party module is invalid or uses identifiers not available in Node environment, eg. window.
Note that line numbers in above stack trace will most likely not match, because Linaria needed to transform your code a bit.

  Plugin: linaria
  File: /Users/yaroslav/Developer/JS/linaria-bug/src/main.tsx
      at instantiate (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:72:32)
      at constructor (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:358:12)
      at Parser.raise (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:3335:19)
      at Parser.expectOnePlugin (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:3392:18)
      at Parser.isExportDefaultSpecifier (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15932:16)
      at Parser.maybeParseExportDefaultSpecifier (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15808:14)
      at Parser.parseExport (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15761:29)
      at Parser.parseStatementContent (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:14649:27)
      at Parser.parseStatement (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:14533:17)
      at Parser.parseBlockOrModuleBlockBody (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/parser/lib/index.js:15176:25)
      at PluginPass.enter (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@linaria/babel-preset/lib/extract.js:155:21)
      at newFn (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/visitors.js:177:21)
      at NodePath._call (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/path/context.js:100:31)
      at TraversalContext.visitQueue (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/context.js:103:16)
      at TraversalContext.visitSingle (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/context.js:77:19)
      at TraversalContext.visit (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/context.js:131:19)
      at traverseNode (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
      at traverse (/Users/yaroslav/Developer/JS/linaria-bug/node_modules/@babel/traverse/lib/index.js:62:34) (x2)

It is to be noted that changing this:

const Container = styled.div<{ baseColor: HSLColor }>`
  background: ${baseColor};
`

to this:

const Container = styled.div<{ baseColor: HSLColor }>`
  background: ${p => baseColor(p)};
`

Eliminates the problem.

Removing color.ts and “inlining” it into the main.tsx file also fixes this issue.

I have also encountered the exact same error when using styled(MyComponent) syntax regardless of what is inside of the template string literal (Once again only if styled(MyComponent) and MyComponent are within different ts files)

The exact error being thrown differs depending on the file contents it is raised within. In this example it suggests to use flow syntax plugin, in other ones it just fails to parse due to an unexpected token (which is legal in ts but not js)

Same exact issue is present in vite-plugin-linaria as well

[sorenhoyer]

The solution @Platane suggested needs to be documented. I spent quite a few hours trying to figure this out last night, and only after I had already solved it, I found this issue by searching for “preset-typescript”. I suspect a lot of typescript users is giving up on Linaria because of this before figuring it out.

[chrischen]

So if I use import type { ... } from '...' in a .tsx file it also gives a syntax error caused by Linaria, and I’m using webpack, not vite.