英文:
"Unexpected token '<' " with electron forge + vite + react
问题
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
This 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;
英文:
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;
答案1
得分: 1
Vite 不支持在 .js
文件中使用 JSX,您需要将 renderer.js
重命名为 renderer.jsx
。这里有关于这个主题的讨论。
英文:
Vite doesn't support JSX in .js
files, you need to rename renderer.js
to renderer.jsx
. Here is a discussion on this subject.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论