Error when evaluating the expression: (0, ...) is not a function

[PierreGUI]

Environment

• Linaria version: 4.5.4 (Shaker 4.5.3)
• Bundler (+ version): Webpack 5
• Node.js version: 16.14.2
• OS: Mac OSX

Description

The build error happens pretty close to the previous one (#1287), although not it originates from the function rather than the variable. I have the error even when I build only one single webpack entrypoint.

Shortened error:

An error occurred when evaluating the expression:

  > (0 , _style.minWidth) is not a function.

  Make sure you are not using a browser or Node specific API and all the variables....
  Defining styled component or class will not work inside:
    - ...
      
> 42 | 	@media ${minWidth(ASIDE_BREAK_POINT)} {
     | 	         ^^^^^^^^^^^^^^^^^^^^^^^^^^^

Reproducible Demo

Can't reproduce outside my codebase, currently.

Related code:
Although the error happens in different files under different forms, here's one:

import { css } from '@linaria/core'

const containerCSS = css`
	@media ${minWidth(ASIDE_BREAK_POINT)} {
		...
	}
`

Extract from debug output, where minWidth is undefined:

linaria:module:00005 [require] ../../../utils/style -> /src/utils/style.ts
linaria:module:00005 [eval-cache] ✅ �[31;1mmodule:00007�[0m has been gotten from cache
linaria:module:00007 [code-cache] ✅
linaria:module:00007 [evaluate] is already evaluated
linaria:module:00005 [evaluated] set __linariaPreval: { _exp: [Function: _exp], _exp2: [Function: _exp2], _exp3: [Function: _exp3], _exp4: [Function: _exp4], _exp5: [Function: _exp5] }
linaria:module:00005 [evaluated] get __linariaPreval: { _exp: [Function: _exp], _exp2: [Function: _exp2], _exp3: [Function: _exp3], _exp4: [Function: _exp4], _exp5: [Function: _exp5] }
linaria:module:00009 [evaluated] get PLAYER_FIXED_HEIGHT: 200
linaria:module:00010 [evaluated] get spx: { '0': '4px', '1': '8px', '2': '16px', '3': '24px', '4': '32px', '5': '40px', '6': '48px', '7': '56px', '8': '64px', '9': '72px', '10': '80px' }
linaria:module:00007 [evaluated] get minWidth: undefined
linaria:module:00009 [evaluated] get ASIDE_BREAK_POINT: 990

Extract from debug output: module:00007 before minWidth is undefined:

linaria:transform:00007 [createEntrypoint] /src/utils/style.ts (zi)
linaria:transform:00007 [stage-1] >> (zi)
...
linaria:transform:00007 [stage-1] << (zi)
linaria:transform:00007 [createEntrypoint] /src/utils/style.ts (minWidth)
linaria:transform:00007 [stage-1] >> (zi, minWidth)
linaria:preeval:00007 [start] Looking for template literals…
linaria:preeval:00007 [start] Strip all JSX and browser related stuff
Linaria template literals
linaria:transform:00007 [stage-1:evaluator:start] using shaker
linaria:transform:00007 [stage-1:preeval] metadata {}
linaria:shaker:00007 [import-and-exports] imports: 5 (side-effects: 0), exports: 8, reexports: 0
linaria:shaker:00007 [start] /src/utils/style.ts, onlyExports: zi,minWidth
linaria:shaker:00007 [end] remaining imports: Map(1) { '../constants/style' => [ 'Breakpoint', 'ZIndex' ] }
linaria:transform:00007 [stage-1:evaluator:end] 
linaria:transform:00007 [stage-1] << (zi, minWidth)
linaria:module:00004 [eval-cache] ➕ �[31;1mmodule:00007�[0m is going to be initialized
linaria:module:00007 [code-cache] ✅
linaria:module:00007 [evaluate] 
linaria:module:00007 [init] /src/utils/style.ts
linaria:module:00007 [eval-cache] ➕ �[36;1mmodule:00011�[0m is going to be initialized
linaria:module:00007 [evaluated] set zi: [Function: zi]
linaria:module:00007 [require] ../constants/style -> /src/constants/style.ts
linaria:module:00007 [evaluated] get zi: [Function: zi]
linaria:module:00005 [eval-cache] ✅ �[31;1mmodule:00007�[0m has been gotten from cache
linaria:module:00007 [code-cache] ✅
linaria:module:00007 [evaluate] is already evaluated
linaria:module:00007 [evaluated] get minWidth: undefined

[Anber]

Hi @PierreGUI!

If it's not something sensitive, could you please provide the code from logs behind linaria:transform:00007 [stage-1] >> (zi, minWidth) and linaria:transform:00007 [stage-1] << (zi, minWidth). It's untransformed /src/utils/style.ts in the first case and the code that is going to be evaluated in the second.

[PierreGUI]

Sure thing, I trimmed the files from other imports/exports:

Untransformed

constants/style.ts

export enum Size {
	xs = 'xs',
	sm = 'sm',
	md = 'md',
	lg = 'lg',
	xl = 'xl',
	xxl = 'xxl'
}

export enum Breakpoint {
	xs = 375,
	sm = 576,
	md = 768,
	lg = 930,
	xl = 1200,
	xxl = 1350,
}

export type ZIndex = 0 | 1 | 2 | 3 | 4 | 5
export const ZIndex = [
	2, // 0
	4, // 1
	6, // 2
	8, // 3
	10, // 4
	12, // 5
]

utils/style.ts

import { Breakpoint, FontSize, Size, SongBreakpoint, Space, Spacing, ZIndex } from '~/constants/style'

export function minWidth (min: Size | number): string {
	return `(min-width: ${typeof min === 'number' ? min : Breakpoint[min]}px)`
}

export function zi (index: ZIndex): number { return ZIndex[index] }

Transformed

utils/style.ts

	"use strict";
	
	Object.defineProperty(exports, "__esModule", {
	  value: true
	});
	exports.minWidth = minWidth;
	exports.zi = zi;
	var _style = require("../constants/style");
	
	function minWidth(min) {
	  return `(min-width: ${typeof min === 'number' ? min : _style.Breakpoint[min]}px)`;
	}
	
	function zi(index) {
	  return _style.ZIndex[index];
	}

Note: these functions and constants are used all across my codebase and do not seem to trigger an error in most cases. I can build one entrypoint using those.

[PierreGUI]

Also note, the build for this single entrypoint was failing until I removed the css util. So from my example above this works instead:

import { /* no css */ } from '@linaria/core'

const containerCSS = `
	@media ${minWidth(ASIDE_BREAK_POINT)} {
		...
	}
`

But while it fixes this specific case of the build error, I still have a few entrypoint which won't build. Some variable or some function evaluate to undefined.

[Anber]

Okay, the shaker works correctly, but apparently the evaluation or code cache wasn't updated. The cache was initialized with zi, and when some other code later tries to import minWidth, it still evaluates as undefined.

Should be easy now. Thank you!

[PierreGUI]

Fixed in Linaria 5