Error occurred while trying to proxy: localhost:3000 in Windows

sage
, ,
14

After a workaround. I just found that there is something wrong with importing React and adding react components.

I have just created a basic component which returns a text. Then added that component to the app.js of my theme like this:

import domReady from '@roots/sage/client/dom-ready';
import React from 'react';
import { createRoot } from 'react-dom';
import Hello from './components/Hello';
/**
 * Application entrypoint
 */
domReady(async () => {
  // ...
  createRoot(document.getElementById('footer-component')).render(<Hello />)
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

And this is how I’ve created Hello.js component:

const Hello = () => {
    return(
        <div>
            <h1>Hello!</h1>
        </div>
    )
}

export default Hello;

When I run yarn dev browser throws an error: Uncaught ReferenceError: $RefreshReg$ is not defined and once I run yarn build the component renders without any error. But again if I make any changes to the component, the syncing fails and the same error occurs.

It seems like React is causing an issue which only works when I use yarn build.