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

**URL:** https://discourse.roots.io/t/error-occurred-while-trying-to-proxy-localhost-3000-in-windows/26347
**Category:** sage
**Tags:** wsl, windows, sage10
**Created:** 2023-12-01T10:12:30Z
**Posts:** 15
**Showing post:** 14 of 15

## Post 14 by @Suraj_Sanwal — 2023-12-18T10:45:45Z

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.

---

_[View the full topic](https://discourse.roots.io/t/error-occurred-while-trying-to-proxy-localhost-3000-in-windows/26347)._