[Preact + Vite] Internal server error: $RefreshSig$ is not defined

[quangkhaidam93]

Environment

My configs

package.json

 "dependencies": {
    "@linaria/babel-preset": "^5.0.3",
    "@linaria/core": "^5.0.2",
    "@linaria/react": "^5.0.3",
    "firebase": "^10.5.2",
    "preact": "^10.16.0",
    "preact-router": "^4.1.2"
  },
"devDependencies": {
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.23.2",
    "@linaria/vite": "^5.0.3",
    "@preact/preset-vite": "^2.5.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }

vite.config.ts

export default defineConfig({
  plugins: [
    preact(),
    linaria({
      include: ["**/*.{ts,tsx}"],
      babelOptions: {
        presets: ["@babel/preset-typescript", "@babel/preset-react"],
      },
    }),
  ],
  server: {},
});

• Linaria version: 5.0.2
• Bundler (+ version): Vite 4.4.5
• Node.js version: v20.9.0, v18.12.0
• OS: macOS Sonoma 14.1

Description

There is error overlay shows that [plugin:linaria] $RefreshSig$ is not defined in development mode (npm run dev) → Either I comment all Linaria related code in my component (particularly styled) or comment used custom hook, the error disappears.

I cannot found any solutions or reasons about this error.

File that error occur
MyComponent.tsx

import { styled } from "@linaria/react";
import useAuth from "../../hooks/useAuth";

const SignInPage = () => {
  const { currentUser } = useAuth();

  return <Container>My Component</Container>;
};

export default SignInPage;

const Container = styled.div`
  padding: 32px 64px;
`;

Comment Linaria code will work

// import { styled } from "@linaria/react";
import useAuth from "../../hooks/useAuth";

const SignInPage = () => {
  const { currentUser } = useAuth();

  return <div>My Component</div>;
};

export default SignInPage;

// const Container = styled.div`
//   padding: 32px 64px;
// `;

or comment custom hook will work

import { styled } from "@linaria/react";
// import useAuth from "../../hooks/useAuth";

const SignInPage = () => {
  // const { currentUser } = useAuth();

  return <Container>My Component</Container>;
};

export default SignInPage;

const Container = styled.div`
  padding: 32px 64px;
`;

[jorgitoml]

Try updating the Vite's config disabling prefreshEnabled. It worked for me.

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

[aziis98]

Try updating the Vite's config disabling prefreshEnabled. It worked for me.

preact({ prefreshEnabled: false }),

I had the same problem in Astro with Preact and this fixed it! I copied the @astrojs/preact integration from https://github.com/withastro/astro/blob/main/packages/integrations/preact/src/index.ts to a new file inside my project and added

...
const preactPlugin = preact({
    include,
    exclude,
+   prefreshEnabled: false,
    babel: {
        cwd: fileURLToPath(babelCwd),
    },
});
...

maybe this helps somebody with the same problem.

[functionalDev]

Disabling prefresh is a workaround with some drawbacks. We had the same issue, but I didn't want to sacrifice the nice DX prefresh brings. Instead I added the missing part to the context to be available during the transformation

import wyw from '@wyw-in-js/vite';
//...
wyw({
  // all your options
  overrideContext: context => (env.mode === 'development'
    ? { ...context, $RefreshSig$: () => () => () => {} }
    : context),
}),

[quangkhaidam93]

Disabling prefresh is a workaround with some drawbacks. We had the same issue, but I didn't want to sacrifice the nice DX prefresh brings. Instead I added the missing part to the context to be available during the transformation

import wyw from '@wyw-in-js/vite';
//...
wyw({
  // all your options
  overrideContext: context => (env.mode === 'development'
    ? { ...context, $RefreshSig$: () => () => () => {} }
    : context),
}),

It works perfectly. Many thanks!

For whom want linaria config

export default defineConfig({
  plugins: [
    // ... your plugins
    linaria({
      include: ["**/*.{ts,tsx}"],
      babelOptions: {
        presets: ["@babel/preset-typescript", "@babel/preset-react"],
      },
      // Lines need to be added → change true condition to your condition (i.e. environment)
      overrideContext: (context) =>
        true ? { ...context, $RefreshSig$: () => () => () => {} } : context,
    }),
  ],
  server: {},
});