How to enable js files to be parsed as jsx

[thusharamitrai]

I have tried all possible solutions that i could find online. i have migrated my react js project to vite js and am facing issues when running 'vite serve'

Im getting the error

[ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/createAnimatedComponent.js:511:20:
      511 │             return (<Component {...props} ref={this._setComponentRef} {...platformProps}/>);
          ╵                     ^

  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.

here is my vite.config.js

import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import {viteCommonjs} from "@originjs/vite-plugin-commonjs";
import {flowPlugin, esbuildFlowPlugin} from "@bunchtogether/vite-plugin-flow";
import {babel} from "@rollup/plugin-babel";

export default defineConfig({
  // depending on your application, base can also be "/"
  base: "",
  plugins: [react(), viteCommonjs(), viteTsconfigPaths(), flowPlugin()],
  esbuild: {
    loader: "jsx",
    include: [
      // Add this for business-as-usual behaviour for .jsx and .tsx files
      "src/**/*.jsx",
      "src/**/*.tsx",
      "node_modules/**/*.jsx",
      "node_modules/**/*.tsx",


      // --- OR ---

      // Add these lines to allow all .js files to contain JSX
      "src/**/*.js",
      "node_modules/**/*.js",

      // Add these lines to allow all .ts files to contain JSX
      "src/**/*.ts",
      "node_modules/**/*.ts",
    ],
    exclude: [],
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".js": "jsx",
      },
      plugins: [esbuildFlowPlugin()],
      mainFields: ["module", "main"],
      resolveExtensions: [".web.js", ".js", ".ts"],
    },
  },
  resolve: {
    extensions: [".web.tsx", ".web.jsx", ".web.js", ".tsx", ".ts", ".js", ".jsx"],
    alias: {
      "react-native": "react-native-web",
    },
    preserveSymlinks: true, 
  },
  server: {
    // this ensures that the browser opens upon server start
    open: true,
    // this sets a default port to 3000
    port: 3000,
  },
});

here is my tsconfig.json

// prettier-ignore
{
  "extends": "@tsconfig/react-native/tsconfig.json", /* Recommended React Native TSConfig base */
  "baseUrl": ".",
  "lib": ["ES2021", "dom","DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
  "include": ["src"],
  "exclude": ["packages"],
  "compilerOptions": {
    "jsx": "react",
    "skipLibCheck": true,
    "typeRoots": ["./src/types"],
    "noEmit": false,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "shared/*": ["src/shared/*"]
    }
  }
}

i keep getting the error asking me to enable jsx loader for js files even though i have already done that. any help would be greatly appreciated.

[chaejunlee]

The easiest, yet best solution is to change your *.js file to *.jsx.

There are walk-arounds here #3112. However, As it is mentioned in the discussion, using the walk-around causes unexpected behaviors like HMR not working.

[Wayjourney]

try this in vite.config.js

defineConfig({
  ...
  esbuild: {
    loader: 'jsx',
    include: /.*\.jsx?$/,
    exclude: []
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },

[rommyarb]

try this in vite.config.js

defineConfig({
  ...
  esbuild: {
    loader: 'jsx',
    include: /.*\.jsx?$/,
    exclude: []
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },

Thank you! I was working with One. After installing expo-linear-gradient, the error appeared. Then I add these into my vite.config.ts, and it works!