Hot reload broken with @vitejs/plugin-react-swc

[MichailShcherbakov]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

While rendering page show the next error:

If I replace @vitejs/plugin-react-swc with @vitejs/plugin-react then it will work well

Reproduction

vite.config.ts

import { crx } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

import { manifest } from "./manifest";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
  server: {
    port: 5173,
    strictPort: true,
    hmr: {
      port: 5173,
    },
  },
});

manifest.ts

import { defineManifest } from "@crxjs/vite-plugin";

import { version } from "./package.json";

// Example: 0.1.0-beta6
const [major, minor, patch, label = "0"] = version.replace(/[^\d.-]+/g, "").split(/[.-]/);

export const manifest = defineManifest(() => ({
  manifest_version: 3,
  name: "App",
  description: "Browser Extension",
  version: `${major}.${minor}.${patch}.${label}`,
  version_name: version,
  content_scripts: [
    {
      js: ["src/content.tsx"],
      matches: ["http://*/*", "https://*/*", "file:///*"],
    },
  ],
}));

content.tsx

import * as React from "react";
import * as ReactDOM from "react-dom/client";

function Popup2() {
  return <div>Popup2</div>;
}

const root = document.createElement("div");
root.id = "content_popup2";
document.body.append(root);

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <Popup2 />
  </React.StrictMode>
);

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i3-10100F CPU @ 3.60GHz
    Memory: 3.91 GB / 15.90 GB
  Binaries:
    Node: 20.2.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - D:\Program Files\nodejs\yarn.CMD
    npm: 9.6.6 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.57)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.17 => 2.0.0-beta.17
    vite: ^4.3.8 => 4.3.9

Severity

annoyance

[Toumash]

I guess we could at least inform the new crxjs users to not select "js/ts + swc" while running npm init vite@latest in the docs for now because its not a first issue #769

PS C:\repo\test-test> npm init vite@latest
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

The official crxjs tutorial uses @vitejs/plugin-react

[gabrielgrant]

any idea why it doesn't work with swc? seems to be the direction most projects are moving

[Toumash]

any idea why it doesn't work with swc? seems to be the direction most projects are moving

No idea. You're right about the swc and we will need to eventually make it supported in this project, but first we need to know why it does not work

[gabrielgrant]

Is this the one canonical issue tracking swc support? If so, could someone with access modify this issue:

title -> "Hot reload broken with @vitejs/plugin-react-swc"

(there are lots of other issues regarding HMR, would be good to have one place where this particular problem is tracked)

[gabrielgrant]

Interestingly according to this comment, this user seems to be having success with swc?

https://github.com/crxjs/chrome-extension-tools/issues/696#issuecomment-1785659180