I am migrating from react-scripts to vite and have been unable to do so successfully. My project is built using .js files (not JSX). However, I have been inundated with error of
[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
Let me stress, I have not a single file that are .jsx extensions. I have the following index file (additionally, in react-scripts I did not need to specify my index.js file in my index.html).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Favicon -->
<link rel="apple-touch-icon" href="/favicon/favicon_apple_touch.jpg">
<link rel="shortcut icon" type="image/x-icon" href="/favicon/fav_shortcut.jpg">
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Using Google Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Using Local Font -->
<link rel="stylesheet" type="text/css" href="/fonts/index.css" />
<title>Web app is I</title>
<meta name="description"
content="web application." />
<meta name="keywords" content="react" />
<meta name="author" content="Author" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="./src/index.js"></script>
</body>
</html>
and my index.js:
// scroll bar
import 'simplebar/src/simplebar.css';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';
import './index.css';
//
import App from './App';
import * as serviceWorker from './serviceWorker';
import reportWebVitals from './reportWebVitals';
// ----------------------------------------------------------------------
ReactDOM.render(
<HelmetProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</HelmetProvider>,
document.getElementById('root')
);
// If you want to enable client cache, register instead.
serviceWorker.unregister();
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
My vite config has been adjusted so many times from a simple plugins: [react()] to trying to convert various JS, base one is:
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig ({
// config options
base: './',
plugins: [react()],
server: {
open: true,
port: 3000
}
})
And I have tried:
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig ({
// config options
base: './',
server: {
open: true,
port: 3000
},
presets: ['@babel/preset-react',react()],
plugins: ['@babel/plugin-transform-react-jsx'],
include: '**/*.js'
})
and:
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig ({
// config options
base: './',
plugins: [react()],
server: {
open: true,
port: 3000
},
esbuild: {
jsxInject: `import React from 'react';`,
},
optimizeDeps: {
esbuildOptions: {
loader: {
'.js': 'jsx',
},
},
},
})
Nothing is working. I do not want to just convert all my code to jsx it makes no sense to me. Is there any advice anyone can impart?
For anyone else in this position, the issue is that react-scripts does not mind that you have JSX like code in your JS files. Vite is very picky and will raise this issue until you fix every file. I tried work arounds and none of them worked for me.
Also to keep in mind that vite does not work with svgs the way react did, so you will have to import something like vite-svg-loader and add it to your plug ins with react to use your imports as you did with react scripts.
Good luck!