Regression: wyw-in-js can't handle @radix-ui/react-tooltip side-effectful import

[Malien]

A simple vite project (no react, no babel presets, no nothing) (hey I even could get a minimal repro)

The magic happens here:

import { css } from "@linaria/core"
import * as Tooltip from "@radix-ui/react-tooltip"

// A dummy css rule just to trigger linaria evaluation thingy
css`
  background-color: red;
`

import "@radix-ui/react-tooltip" is also sufficient.

NOTE: If I were to do something like this:

import { Tooltip } from "@radix-ui/react-tooltip"
<Tooltip />

The bug would not manifest. It's only when I import the entire module that it does.
The import gets tree-shaken away.

If I were to miss the <Tooltip /> part, the bug would be back.

I've marked this as a regression, since the same exact project with @linaria/vite (tagged under git tag of @linaria/vite in the original repro repo) doesn't exhibit the same issue.

❯ pnpm build

> [email protected] build <redacted>/linaria-regression-repro
> vite build

vite v5.2.8 building for production...
✓ 9 modules transformed.
x Build failed in 367ms
error during build:
<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/module.js:223
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
      ^

EvalError: $a093c7e1ec25a057$var$createTooltipContext is not defined in<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-tooltip/dist/index.mjs
| <redacted>/linaria-regression-repro/src/main.js

    at Module.evaluate (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/module.js:223:13)
    at require.Object.assign.ensure (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/module.js:117:7)
    at <redacted>/linaria-regression-repro/src/main.js:3:39
    at <redacted>/linaria-regression-repro/src/main.js:21:3
    at Script.runInContext (node:vm:133:12)
    at Module.evaluate (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/module.js:208:14)
    at evaluate (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
    at BaseAction.evalFile (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)
    at evalFile.next (<anonymous>)
    at <redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
    at EventEmitter.action (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
    at BaseAction.emitAction (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
    at nextFn (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
    at processNext (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
    at Object.next (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
    at asyncActionRunner (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
    at async asyncActionRunner (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async transform (<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected]/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
    at async Object.transform (file://<redacted>/linaria-regression-repro/node_modules/.pnpm/@[email protected][email protected]/node_modules/@wyw-in-js/vite/esm/index.mjs:117:22)
    at async transform (file://<redacted>/linaria-regression-repro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18513:16)
    at async ModuleLoader.addModuleSource (file://<redacted>/linaria-regression-repro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18729:36)

• wyw-in-js version: 0.5.0
• custom processor: none
• Bundler (+ version): [email protected]
• Node.js version: 21.5.0
• OS: macOS 14.4.1 (Sonoma)

[Anber]

Yeah… If the import is not used in the file, the shaker keeps it alive because it may be used for side effects. In such a case, the whole imported file will be evaluated, which is sometimes impossible.

I will take a look. Maybe I can find some workaround for this specific lib.

[Malien]

Similar issue is also present with @radix-ui/react-toolbar

[dlehmhus]

I encountered the same Issue with other radix libs, like @radix-ui/react-toast and @radix-ui/react-checkbox. @Malien did you find a workaround for that issue?

[Malien]

Well, yeah. I have two solutions.

1. Just don't use namespace imports, import all of the named components. This way the import gets tree-shaken away. Yeah it's tad a bit annoying to spell components twice, but it's really not bad:

import * as Tooltip from "@radix-ui/tooltip"
// Use-site:
<Tooltip.Provider />

Instead do

import { TootipProvider, Root as TooltipRoot, TooltipTrigger /* etc */ } from "@radix-ui/tooltip"

// Use-site
<TooltipProvider />

2. Inject a small, hand-written, babel transform plugin into wyw preprocessing pipeline that rewrites

import * as Tooltip from "@radix-ui/tooltip"

into

const Tooltip = {}

The latter is a lot more hacky, but wasn't too bad in my case, since I already have to rewrite imports that get transformed by the bundler.

[dlehmhus]

@Malien works great for me too! Thanks a lot.