Vite Fails to Parse .jsx Files in Remix + Nx Setup

[marouanechoukri31]

👋 Hi everyone,

I’m running into a recurring issue with Vite, Remix, and Nx, and would appreciate any help!

Context:

I’m working on a Remix app with Nx and Vite in SPA mode (SSR is disabled). The issue I keep running into is with .jsx files in the dist directory, where Vite fails to parse the files and throws an error about invalid JS syntax. I previously resolved this by configuring Vite to treat .js files as .jsx, using transformWithEsbuild. However, since switching to Remix with Nx and Vite, the same error has come up again.

Current Vite Configuration:

Here’s what I currently have in my vite.config.js:

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig, transformWithEsbuild } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import reactNativeWeb from 'vite-plugin-react-native-web';

export default defineConfig({
    root: __dirname,
    plugins: [
        remix({
            ssr: false
        }),
        reactNativeWeb(),
        nxViteTsPaths(),
    ],
    optimizeDeps: {
        force: true,
        esbuildOptions: {
            loader: {
                '.mjs': 'jsx',
                '.js': 'jsx',
            },
        },
    },
});

Problem:

Even with this setup, I’m still getting errors saying that Vite couldn’t parse certain files due to invalid JS syntax. It’s especially confusing since this approach used to work before I switched to using Remix with Nx.

Has anyone else encountered something similar, or does anyone have suggestions on how to resolve this?

I’m using the react-native-reusables (RnR) library, which I know is optimized for Expo projects but I’m trying to use it in a Remix + Vite environment without Expo. Any advice on how to properly configure it would be appreciated!

Thanks so much!