Guide: How convert to a React App

[ClemensDinkel]

There are quite a few react forks of this template out there, but since this template is maintained regularly they're not necessarily up to date. That's why I gave it try myself and was surprised that it's actually not that hard.

So if you want to use the latest version of this template, but use React instead of Vue, here's a quick guide on how to convert this to React which I created while doing it myself:

1. remove Vue: npm uninstall vue @vitejs/plugin-vue @vue/test-utils vue-tsc
2. add React: npm install react react-dom
3. add Types: npm install -D @types/react @types/react-dom
4. go to packages/renderer
5. in index.html change the src attribute of the script tag to "./src/index.tsx"
6. go to src
7. rename index.ts to index.tsx
8. replace index.tsx code with:

import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('app')
);

9. to remove ts warnings add the following options to the compilerOptions in packages/renderer/tsconfig.json (not the one in the root folder!)

"jsx": "react-jsx",
"allowSyntheticDefaultImports": true,
"esModuleInterop":true,

10. in vite.config.js replace the vue plugin with the react plugin :

• replace vue-plugin import with import react from '@vitejs/plugin-react';
• in the plugins prop replace vue() with react()

11. remove APP.vue and all the Vue components
12. remove vue from the extends property in packages/renderer.eslintrc.json
13. create App.tsx and import it in index.tsx

//sample code for testing
const App = () => {
  return <p>hello from react</p>;
};
export default App;

14. in your root folder open package.json and replace vue-tsc by tsc in the typescript:renderer script
15. to use React Dev Tools: in main/src/index.ts replace VUEJS3_DEVTOOLS in all places by REACT_DEVELOPER_TOOLS
16. to import SVGs as React Components install vite-plugin-svgr and follow the instructions at https://www.npmjs.com/package/vite-plugin-svgr

happy hacking :)

---

Proper cleanup

Vue still is still buried in a lot of places. Your app should run nevertheless. If you want to do a proper cleanup simply search for vue and remove/replace every mention as you see fit.

---

If you think something should be handled differently or something is missing, drop a comment. I'll update this post.

[bjess9]

thank you for this 🤝

[ClemensDinkel]

glad I could be of help :)

[raphael10-collab]

I followed all the steps suggested.

The app shows up, but some strange error messages appear :

(base) raphy@pc:~/ViteElectronReactBuilder$ yarn run watch
yarn run v1.22.18
$ node scripts/watch.js
vite v3.0.0-alpha.11 building SSR bundle for development...

watching for file changes...

build started...
✓ 3 modules transformed.
rendering chunks (1)...Sourcemap is likely to be incorrect: a plugin (unplugin-auto-expose-preload) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
dist/index.cjs   0.55 KiB
dist/index.cjs.map 0.10 KiB
built in 50ms.
vite v3.0.0-alpha.11 building SSR bundle for development...

watching for file changes...

build started...
✓ 3 modules transformed.
dist/index.cjs   4.00 KiB
dist/index.cjs.map 10.38 KiB
built in 67ms.
8:47:14 PM [vite] ✨ new dependencies optimized: react, react-dom/client
8:47:15 PM [vite] ✨ optimized dependencies changed. reloading
8:47:15 PM [main] Failed create window: Error: ERR_ABORTED (-3) loading 'http://localhost:5173/'
    at rejectAndCleanup (node:electron/js2c/browser_init:161:7647)
    at EventEmitter.navigationListener (node:electron/js2c/browser_init:161:7953)
    at EventEmitter.emit (node:events:526:28) {
  errno: -3,
  code: 'ERR_ABORTED',
  url: 'http://localhost:5173/'
}
8:47:15 PM [main] [84984:0615/204715.636173:ERROR:CONSOLE(160)] "Electron sandbox_bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (160)
[84984:0615/204715.636210:ERROR:CONSOLE(160)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (160)

You can find the repo here: https://github.com/raphael10-collab/ViteElectronReactBuilder

[ClemensDinkel]

Is the issue still active? If yes I can take a look at your repo and see if I can find something.

[raphael10-collab]

Thank you Clemens. At the moment I'm using webpack' + forge, but it would be nice to be able to use a working vite-electron-react` base to start with

[ClemensDinkel]

I think i can shed some light into the issue:
For work I just updated the depencies (pnpm up --latest) in my project, which I hadn't done yet after building it a few months ago.
When I tried to open a development server using pnpm watch I got the exact same error.
I had never gotten this error before.
Then I did some research and found this issue: electron/electron#32133 where other people also get the same error. This led me to believe that the error isn't connected to the conversion to React. So then i cloned the template again, installed deps and ran npm run watch without making ANY changes to the code. The error even occured with this fresh clone of the template. However the error only occurs when building in development. When i built for production there was no error.

To sum it up:

• Error doesn't prevent app from building, error is only logged.
• Error only occurs in development, but not when building for production
• Error is NOT connected to the conversion to React and it's also NOT connected to the template (maybe just to one of the tools it uses). A lot of people seem to have this issue.
  ---> Most likely an electron / sandbox issue

[sirius-beck]

Thank you very much!!!

[omarduarte]

@ClemensDinkel great doc!
You should add @vitejs/plugin-react to step 3 ;)

[officialBeebe]

I had to npm install @vitejs/plugin-react --save-dev as well.

Thank you so much for the conversion! This plus the template by cawa-93 have helped me so much!

[cawa-93]

Now you can run npm run init and setup any framework