Syntax error while evaluating variables imported from another TypeScript file.

[uzmoi]

Environment

• Linaria version: 3.0.0-beta.22
• Bundler (+ version): rollup 2.75.7 (@rollup/plugin-typescript 8.3.3)
• Node.js version: v16.13.2
• OS: windows11 + WSL2(Ubuntu)

Description

A syntax error occurs when trying to evaluate a variable imported from another TypeScript file.

Reproducible Demo

// color.ts
export const color: string = "red";

// index.ts
import { css } from "@linaria/core";
import { color } from "./color";

css`color: ${color};`;

// rollup.config.ts
import typescript from "@rollup/plugin-typescript";
import linaria from "@linaria/rollup";

export default {
    input: "index.ts",
    output: { dir: "dist" },
    plugins: [typescript(), linaria()],
};

When I build the above project, I get the following error.

index.ts → dist...
[!] (plugin linaria) Error: <dir>/index.ts: An unexpected runtime error occurred during dependencies evaluation: 
<dir>/node_modules/@babel/core/lib/parser/index.js:93
    throw err;
    ^

SyntaxError: <dir>/color.ts: Missing initializer in const declaration. (1:18)

> 1 | export const color: string = "red";
    |                   ^
  2 |
    at instantiate (<dir>/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (<dir>/node_modules/@babel/parser/lib/index.js:359:12)
    at Parser.raise (<dir>/node_modules/@babel/parser/lib/index.js:3339:19)
    at Parser.parseVar (<dir>/node_modules/@babel/parser/lib/index.js:15383:16)
    at Parser.parseVarStatement (<dir>/node_modules/@babel/parser/lib/index.js:15176:10)
    at Parser.parseStatementContent (<dir>/node_modules/@babel/parser/lib/index.js:14718:21)
    at Parser.parseStatement (<dir>/node_modules/@babel/parser/lib/index.js:14643:17)
    at Parser.parseExportDeclaration (<dir>/node_modules/@babel/parser/lib/index.js:16023:17)
    at Parser.maybeParseExportDeclaration (<dir>/node_modules/@babel/parser/lib/index.js:15969:31)
    at Parser.parseExport (<dir>/node_modules/@babel/parser/lib/index.js:15896:29)

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.

index.ts
Error: <dir>/index.ts: An unexpected runtime error occurred during dependencies evaluation: 
<dir>/node_modules/@babel/core/lib/parser/index.js:93
    throw err;
    ^

SyntaxError: <dir>/color.ts: Missing initializer in const declaration. (1:18)

> 1 | export const color: string = "red";
    |                   ^
  2 |
    at instantiate (<dir>/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (<dir>/node_modules/@babel/parser/lib/index.js:359:12)
    at Parser.raise (<dir>/node_modules/@babel/parser/lib/index.js:3339:19)
    at Parser.parseVar (<dir>/node_modules/@babel/parser/lib/index.js:15383:16)
    at Parser.parseVarStatement (<dir>/node_modules/@babel/parser/lib/index.js:15176:10)
    at Parser.parseStatementContent (<dir>/node_modules/@babel/parser/lib/index.js:14718:21)
    at Parser.parseStatement (<dir>/node_modules/@babel/parser/lib/index.js:14643:17)
    at Parser.parseExportDeclaration (<dir>/node_modules/@babel/parser/lib/index.js:16023:17)
    at Parser.maybeParseExportDeclaration (<dir>/node_modules/@babel/parser/lib/index.js:15969:31)
    at Parser.parseExport (<dir>/node_modules/@babel/parser/lib/index.js:15896:29)

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.

    at evaluateExpressions (<dir>/node_modules/@linaria/babel-preset/lib/utils/evaluateExpressions.js:122:15)
    at PluginPass.enter (<dir>/node_modules/@linaria/babel-preset/lib/extract.js:54:79)
    at newFn (<dir>/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (<dir>/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (<dir>/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (<dir>/node_modules/@babel/traverse/lib/path/context.js:100:31)
    at TraversalContext.visitQueue (<dir>/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitSingle (<dir>/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (<dir>/node_modules/@babel/traverse/lib/context.js:133:19)
    at traverseNode (<dir>/node_modules/@babel/traverse/lib/traverse-node.js:24:17)

[Anber]

If you don't use Babel, Linaria doesn't know how to parse ts-files. Probably, we can detect tsconfig.json and use it for parsing, but it will take some time for investigating and implementing this solution. As a quick workaround, you can pass @babel/preset-typescript to babelOptions.

[alexojegu]

Try changing the order:

plugins: [linaria(), typescript()],

For example with Webpack (it evaluate right to left) this works:

{ test: /\.tsx?$/, exclude: /node_modules/, use: ['@linaria/webpack5-loader', 'ts-loader'] }

But this fail:

{ test: /\.tsx?$/, exclude: /node_modules/, use: ['ts-loader', '@linaria/webpack5-loader'] }

[Anber]

Should be ok in 5.0.x