how do I enable JSX syntax for .js extensions?

[prabirshrestha]

How do I enable JSX syntax for .js extension.

I'm trying react-native-paper but getting compilation error. Is there an official doc on how to do this via vite config or some other settings?

prabirshrestha@Mac ~/c/t/hello-world (main)> bun dev
$ one dev
[vxrn] cleaning

    ➡ [tamagui] built config and components (224ms)
[vite] connected.
Cannot optimize dependency: moti/author, present in ssr 'optimizeDeps.include'
Cannot optimize dependency: @expo/cli, present in ssr 'optimizeDeps.include'
✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-vector-icons/lib/create-icon-set.js:70:8:
      70 │         <Text selectable={false} {...props}>
         ╵         ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-vector-icons/lib/icon-button.js:116:8:
      116 │         <TouchableHighlight
          ╵         ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.


 ERROR  Build failed with 2 errors:                                                                                                            6:00:35 PM
node_modules/react-native-vector-icons/lib/create-icon-set.js:70:8: ERROR: The JSX syntax extension is not currently enabled
node_modules/react-native-vector-icons/lib/icon-button.js:116:8: ERROR: The JSX syntax extension is not currently enabled

  node_modules/react-native-vector-icons/lib/create-icon-set.js:70:8: ERROR: The JSX syntax extension is not currently enabled
  node_modules/react-native-vector-icons/lib/icon-button.js:116:8: ERROR: The JSX syntax extension is not currently enabled
  at failureErrorWithLog (node_modules/esbuild/lib/main.js:1472:15)
  at node_modules/esbuild/lib/main.js:945:25
  at node_modules/esbuild/lib/main.js:1353:9
  at process.processTicksAndRejections (node:internal/process/task_queues:105:5)



 ERROR  Build failed with 2 errors:                                                                                                            6:00:35 PM
node_modules/react-native-vector-icons/lib/create-icon-set.js:70:8: ERROR: The JSX syntax extension is not currently enabled
node_modules/react-native-vector-icons/lib/icon-button.js:116:8: ERROR: The JSX syntax extension is not currently enabled

error: script "dev" exited with code 1

[zetavg]

Thanks for reporting; this is one of the common challenges we faced while letting Vite support packages built for RN since RN there's only Metro, and Metro is very tolerant of things such as putting JSX syntax inside .js files, leaving flow type in dist .js files, etc.

We're trying to find a better solution (especially with Rolldown), but in the meanwhile, a way to work around this is to define package patches in your vite.config.* to fix packages like this:

// vite.config.ts
export default {
  plugins: [
    one({
      // ...
      deps: {
        'react-native-vector-icons': {
          '**/*.js': [
            'jsx', // Transpile JSX in .js files
            'flow', // Remove flow types
          ],
        },
      },
    }),
  ],
}

Unfortunately, this still can't make react-native-vector-icons work since it imports react-native on the web, and currently, I think One removes the react-native package on web to reduce the bundle size. Looking into this.

[zetavg]

I got react-native-vector-icons working! Please see this commit if you're interested: 9286ffd

Basically we'll need to also include react-native-vector-icons/Ionicons (or any other icon being used) in ssr.optimizeDeps.

[zetavg]

Also tried FontAwesome but perhaps that font is not included in Expo Go and icons didn't show on native.