Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
quangkhaidam93 opened this issue Nov 5, 2023 · 4 comments
Open
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided platform: ssr 🛠️ Issue related to SSR

Comments

@quangkhaidam93
Copy link

quangkhaidam93 commented Nov 5, 2023

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;
`;
@quangkhaidam93 quangkhaidam93 added bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided needs: triage 🏷 Issue needs to be checked and prioritized labels Nov 5, 2023
@github-actions github-actions bot added bundler: webpack 📦 Issue is related to webpack bundler platform: ssr 🛠️ Issue related to SSR and removed needs: triage 🏷 Issue needs to be checked and prioritized bundler: webpack 📦 Issue is related to webpack bundler labels Nov 5, 2023
@jorgitoml
Copy link

jorgitoml commented Feb 1, 2024

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

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

@aziis98
Copy link

aziis98 commented Mar 25, 2024

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
Copy link

functionalDev commented Mar 26, 2024

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
Copy link
Author

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: {},
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided platform: ssr 🛠️ Issue related to SSR
Projects
None yet
Development

No branches or pull requests

4 participants