When I add a router, the console will report an error

[in-chong]

Firstly, thank you for providing such an excellent code repository

i have a problem,when i add a router,and i use useeffect in home.js,my console will report an error

Uncaught Error: React refresh runtime was loaded twice. Maybe you forgot the base path?
at refresh-runtime.js?v=0259888e:368:9

I'm not sure why this is happening. I hope I can get your help

//Popup.js


<Route path="/" element={} />

// home.js
const home = () => {

useEffect(() => {
console.log('234')
}, [])

return (

Home

)
}

export default home

[aklinker1]

Sorry, please follow the issue template, you haven't given me enough information to help you out.

I need a minimal reproduction (small but full project) to debug this.

[in-chong]

I just changed the export default function() to const testHome(),then will have this problem

[FarazFKhan]

Yes, I've noticed the same. If you use the "export default function()" synytax, there is no issue. But if you name the function and export it later, it causes an issue. Image attached to clarify.

[aklinker1]

Yes, I've noticed the same. If you use the "export default function()" synytax, there is no issue. But if you name the function and export it later, it causes an issue. Image attached to clarify.

Yeah, I will create and pin an issue about React. I don't know why it behaves like this. The react plugin seems to be doing something different than all the other framework's plugins.

So right now I don't have a solution for you, sorry.

[aklinker1]

And by the way, I can't reproduce the error itself by exporting a named variable later in the file @FarazFKhan. @in-chong I can't reproduce the error using the react template either.

Can you one of you share an entire project? Either upload a zip on your comment or share a github repo. But I can't reproduce this error using the template project.

Fast refresh doesn't work in some cases, but no log reporting "React refresh runtime was loaded twice".

Screen.Recording.2023-08-20.at.2.18.12.PM.mov

Screen.Recording.2023-08-20.at.2.24.21.PM.mov

[in-chong]

I commented out this code and it will run normally without prompting any errors,But you know, if I do this, my code won't be updated in real-time，So I guess if there are multiple imports of react refresh/runtime or related modules in the project？

[in-chong]

I noticed that vite's official website supports react refresh without the need for additional configuration. Perhaps this is an issue?

[FarazFKhan]

Thank you for looking into this and getting back to us @aklinker1.

I did a fresh install and just changed the "src/pages/Popup.tsx" to what you can see in the screenshot attached. I only made changes to line 4 and line 20 in the screenshot. I don't think the "React refresh runtime was loaded twice" came up immediately. It's only after running "npm run build", then if I run the dev mode again using "npm run dev", then the console shows that error log referred to above. At this point, you can also see that the popup doesn't actually show any content inside of it (screenshot attached below to show this).

[sotasan]

I got the same issue and read under crxjs that they got issues with hmr with swc.
So I just tried switching from "@vitejs/plugin-react-swc" to "@vitejs/plugin-react" and it looks like it solves this issue.
Furthermore it seems like you can remove the resolve alias for "@react-refresh" with this change.

Edit: Unfortunately, it seems like with "@vitejs/plugin-react" hmr doesn't work at all.

[beeman]

I think I found a way to reproduce the error: React refresh runtime was loaded twice. Maybe you forgot the base path?.

Here are the steps I took to reproduce it, example can be found here:

1. pnpm create vite-plugin-web-extension

• Project name: react-refresh-loaded-twice-issue
• Template: react-ts
• Package Manager: PNPM

2. cd react-refresh-loaded-twice-issue
3. pnpm dev
4. Create src/providers.tsx with the content below
5. Update src/popup.tsx and wrap the Popup component in the Providers component

// src/providers.tsx
export function Providers({children}: {children: React.ReactNode}) {
    return (
        <div className="providers">
            {children}
        </div>
    );
}

// src/popup.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import Popup from "./pages/Popup";
import {Providers} from "./providers";

ReactDOM.createRoot(document.body).render(
  <React.StrictMode>
      <Providers>
            <Popup />
      </Providers>
  </React.StrictMode>
);

[beeman]

I think I found a way to reproduce the error: React refresh runtime was loaded twice. Maybe you forgot the base path?.

Here are the steps I took to reproduce it, example can be found here:

1. pnpm create vite-plugin-web-extension

• Project name: react-refresh-loaded-twice-issue
• Template: react-ts
• Package Manager: PNPM

2. cd react-refresh-loaded-twice-issue
3. pnpm dev
4. Create src/providers.tsx with the content below
5. Update src/popup.tsx and wrap the Popup component in the Providers component

// src/providers.tsx
export function Providers({children}: {children: React.ReactNode}) {
    return (
        <div className="providers">
            {children}
        </div>
    );
}

// src/popup.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import Popup from "./pages/Popup";
import {Providers} from "./providers";

ReactDOM.createRoot(document.body).render(
  <React.StrictMode>
      <Providers>
            <Popup />
      </Providers>
  </React.StrictMode>
);

FYI: After getting stuck here, I found WXT, a Next-gen Web Extension Framework by the same author and it's really great.