Identifier '__Runtime' has already been declared. (ReactRefreshPlugin)

[jet10000]

I want to test placing svelte app, vue app, react app on the same page, if you just put svlet app and vue ap on the same page, there is no problem, but when I configure ReactRefreshPlugin, the command line shows conflict ：Identifier'__Runtime' has already been declared

node reboost

Error while parsing "/Users/jet/github/fastapi-reboost-app/src/main.js"
You may need proper loader to handle this kind of files.

  12 |     window.$RefreshSig$ = __Runtime.createSignatureFunction;
  13 | 
> 14 |   import*as __Runtime from"/Users/jet/github/fastapi-reboost-app/node_modules/@reboost/plugin-react-refresh/dist/browser/runtime.js";import{hot as ReboostHot}from'reboost/hot';const __prevRefreshReg=window.$RefreshReg$;const __prevRefreshSig=window.$RefreshSig$;window.$RefreshReg$=(type,id)=>{const fullId=ReboostHot.id+' '+id;__Runtime.register(type,fullId);};window.$RefreshSig$=__Runtime.createSignatureFunction;import"tailwindcss/tailwind.css";import"./main.css";import App2 from"./App.svelte";const app=new App2({target:document.getElementById("svelteApp"),props:{}});window.app=app;export default app;import{createApp}from"vue";import App22 from"./App.vue";createApp(App22).mount("#vueApp");;window.$RefreshReg$=__prevRefreshReg;window.$RefreshSig$=__prevRefreshSig;ReboostHot.self.accept(updatedModule=>{if(__Runtime.isReactRefreshBoundary(updatedModule)){__Runtime.performReactRefresh();}else{ReboostHot.invalidate();}});;
     |            ^ Identifier '__Runtime' has already been declared
  15 |     window.$RefreshReg$ = __prevRefreshReg;
  16 |     window.$RefreshSig$ = __prevRefreshSig;

reboost.js

const {
    start,
    builtInPlugins: {
        UsePlugin
    }
} = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
const VuePlugin = require('@reboost/plugin-vue');
const ReactRefreshPlugin = require('@reboost/plugin-react-refresh');
const PostCSSPlugin = require('@reboost/plugin-postcss');

start({
    entries: [
        ['./src/main.js', './static/dist/main.js'],
        // ['./src/react/App3.jsx', './static/dist/react.js'],
    ],
    // contentServer: {
    //   root: './static',
    //   open: false
    // },
    // resolve: {
    //     extensions: ['.vue', '.svelte'].concat(DefaultConfig.resolve.extensions),
    //     mainFields: ['.vue', 'svelte', ...DefaultConfig.resolve.mainFields]
    // },
    plugins: [
        UsePlugin({
            // The following regex enables fast refresh for files
            // with .js, .ts, .jsx or .tsx extensions
            // Feel free to use any regex for your files
            include: /\.[jt]sx?$/i,
            use: ReactRefreshPlugin()
        }),
        SveltePlugin(),
        VuePlugin(),
        ReactRefreshPlugin(),
        PostCSSPlugin({
            // Options
        }),

    ]
});

[sarsamurmu]

Never considered that someone might use both ReactRefreshPlugin and SveltePlugin on a same file. I will soon release a hot fix for that.

[sarsamurmu]

Sadly, the fix would be delayed because somehow my monitor burnt out 😞. Until then you can't use the ReactRefreshPlugin. That's it.

[sarsamurmu]

I found out now. The problem is in your plugins, you have put the ReactRefreshPlugin two times. One using UsePlugin and another using ReactRefreshPlugin. Either remove the UsePlugin or the ReactRefreshPlugin to fix the issue.

[jet10000]

[jet10000]

But when I change the content of the react app, the entire page is refreshed

[sarsamurmu]

No way left until I investigate the issue.

[sarsamurmu]

Try to part up your component files. One file should contain only component(s) and the other files should render the elements to the document using ReactDOM.render()

[jet10000]

It works, thank you.

I create a project for test

https://github.com/jet10000/reboost-test-app

[sarsamurmu]

Glad it worked!