@linaria/babel-preset's resolver cannot resolve node builtin modules

[Shinyaigeek]

Environment

• Linaria version: 5.0.2
• Bundler (+ version): not using on the environment in which this behavior happens
• Node.js version: 20
• OS: macOS

Description

Thank you for developing nice tool!

My service uses linaria. My service is based on react + webpack. I develop react based application, and build(bundle, transpile, and also process linaria stylesheet) it with webpack. I uses linaria/webpack-loader to process linaria stylesheet on building. And also, I take a snapshot testing for the react component styled with linaria, with jest. To make linaria's processor work on jest, I uses @linaria/babel-preset with babel configuration for the testing environment.

With v5.0.2, linaria/webpack-loader works fine so I can build my service correctly, but I cannot test my service because linaria's processor fail with below message.

/~~/mycomponent.jsx: ENOENT: no such file or directory, open 'url'

This is caused in resolving nodejs's builtin url package.

In my application, I prepare some styling tokens for the stylesheet, such as color: black. These styling tokens include icon's url, such as url(~~) and icon's url is built with nodejs's builtin url module.

example)

import { URL } from "url";

export const getIcon = function(icon) {
  const BASE_URL = "https://~~/";
  switch (icon) {
    case "logo": {
       const url = new URL(`${BASE_URL}/{file path}`)
       return `url(${url})`
    }
  }
}

linaria/babel-preset seems to fail in resolving nodejs's builtin url module.

I assume this difference is caused by module resolver's difference. linaria/webpack-loader uses module resolver ( asyncResolver ) based on the webpack's resolver (ref: https://github.com/callstack/linaria/blob/master/packages/webpack5-loader/src/index.ts#L71), but linaria/babel-presets uses module resolver (syncResolver) based on the linaria/utils (ref: https://github.com/callstack/linaria/blob/master/packages/utils/src/asyncResolveFallback.ts#L19)

Reproducible Demo

I create reproduction: https://github.com/Shinyaigeek/linaria-babel-plugin-resolver-bug-report

pnpm i //setup

pnpm preview // webpack-loader works

pnpm test // jest based on babel presets fails

[straxico]

i get this error on my project after update to 5.0.2

- error ./src/Components/Atoms/Button/index.tsx
/home/aaa/Desktop/kutam/node_modules/@linaria/babel-preset/lib/module.js:224
      throw new EvalError(`${e.message} in${this.callstack.join('\n| ')}\n`);
      ^

EvalError: Missing initializer in const declaration in/home/aaa/Desktop/kutam/src/utils/Token.tsx
| /home/aaa/Desktop/kutam/src/Components/Atoms/Button/index.tsx
    at evalFile.next (<anonymous>)
Import trace for requested module:
./src/Components/Atoms/Button/index.tsx

[Anber]

@straxico, you need to add @babel/preset-typescript to your Linaria config:

babelOptions: {
  presets: [
    [
      '@babel/preset-typescript',
    ],
  ],
}

[Anber]

Hi @Shinyaigeek!

Thank you for your report! The problem was fixed.

[straxico]

presets: [
[
'@babel/preset-typescript',
],
],

tanks @Anber .
i use this config as my .bablerc and this is work fine

{
"presets": ["next/babel", "@linaria","@babel/preset-typescript"]
}

[Shinyaigeek]

@Anber v5.0.3 works fine in my application, Thank you!!