Migration from "styled-components" to "linaria"

[Jordi Mestres López]

I'm currently working on a project that utilizes the following stack of dependencies:

"dependencies": {
    "@noriginmedia/norigin-spatial-navigation": "^2.0.2",
    "preact": "^10.16.0",
    "preact-router": "^4.1.2",
    "react-virtuoso": "^4.6.2",
    "styled-components": "^6.0.0",
    "zustand": "^4.4.4"
}

Everything is functioning correctly, but I'm aiming to enhance the performance on older devices.

To achieve this, I'm looking to switch from using "styled-components" to "Linaria". However, when I attempt to add the following line of code to the focusable component:

const { ref, focused } = useFocusable();

I encounter the following error during development:

[vite] Internal server error: $RefreshSig$ is not defined in...

Have any of you encountered this issue before?

• Additional Information

The error is specific to the development environment and does not occur in the production environment.

[Jordi Mestres López]

SOLUTION
Update the Vite config disabling prefreshEnabled.

 plugins: [
    linaria(),
    preact({ prefreshEnabled: false }),
  ],