"Unexpected token '<' " with electron forge + vite + react

Question

I'm building an electron app using electron forge, the vite template, and react. I built my app using

npm init electron-app@latest my-new-app -- --template=vite

Which displays the hello world vite application just fine. Then I installed react

npm install --save react react-dom

This is my renderer.js file

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App.jsx'

const el = document.getElementById('root');
const root = ReactDOM.createRoot(el);

root.render(<App />);

But when I execute the program I get the following error. caught SyntaxError: Unexpected token '<' and it points to the line root.render(<App />);

Additionally I've installed @vitejs/plugin-react and my vite.renderer.config.mjs looks like this.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config
export default defineConfig({
  plugins: [react()],
})

What I'm reading online is that it's not transpiling the jsx code to javascript properly, and most of the solutions involve using babel with webpack to accomplish this. However, my understanding was that vite was supposed to provide this function and I haven't found any help with vite.

edit:

Here is App.jsx

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
};

export default App;

Answer 1

Vite doesn't support JSX in .js files, you need to rename renderer.js to renderer.jsx. Here is a discussion on this subject.