How to use .js instead of .jsx

[marialovesbeans]

I understand using .js instead of .jsx extension will not yield optimal performance as it'll go through unnecessary AST transformation, but it's a trade-off I'm willing to sacrifice.

Another reason VSCode IntelliSense doesn't recognize index.jsx. This means intelliSense on the following doesn't work:

import Home from 'components/home'

where Home's full path is

components/home/index.jsx

To make IntelliSense work, I have to do:

components/home/index.js

So, I think we should give developers the choice to opt-in the usage of .js in Vitejs. How to make it happen? Thanks!

[nihalgonsalves]

There aren't plans to include this as a native option in Vite, but since #2991 (released in v2.3.0) you can use your own esbuild optimizeDeps config to specify a custom loader.

For example:

import { defineConfig } from 'vite'

export default defineConfig(() => ({
  esbuild: {
    loader: 'jsx',
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
})

[marialovesbeans]

To reproduce, simply create a vite project, add the above configs, and import a React component that has file ending in .js in the main.jsx, and it'll output the error.

error when starting dev server:
Error: Build failed with 1 error:
src/components/user/index.js:2:9: error: Unexpected "<"
    at failureErrorWithLog (/Users/maria/project/client/node_modules/esbuild/lib/main.js:1443:15)
    at /Users/maria/project/client/node_modules/esbuild/lib/main.js:1125:28
    at runOnEndCallbacks (/Users/maria/project/client/node_modules/esbuild/lib/main.js:915:63)
    at buildResponseToResult (/Users/maria/project/client/node_modules/esbuild/lib/main.js:1123:7)
    at /Users/maria/project/client/node_modules/esbuild/lib/main.js:1230:14
    at /Users/maria/project/client/node_modules/esbuild/lib/main.js:606:9
    at handleIncomingPacket (/Users/maria/project/client/node_modules/esbuild/lib/main.js:703:9)
    at Socket.readFromStdout (/Users/maria/project/client/node_modules/esbuild/lib/main.js:573:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)

[prathmesh-ka-github]

hey @nihalgonsalves Thanks for the solution! it helped me alot.... Actually I transferred one of my react projects from the normal react scripts to Vite, and I was facing the issue that it does not recognize the .jsx files and shows an error like
X [ERROR] The JSX syntax extension is not currently enabled
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
I was searching for the solution everywhere but couldn't seem to preclude that error
but seeing your comment helped me alot! just wanted to give you my rustic thanks!

[luckymore]

but after this, accur a new error：can't resolve .tsx

[rd273001]

import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig( {
  plugins: [
    {
      name: 'treat-js-files-as-jsx',
      async transform ( code, id ) {
        if ( !id.match( /src\/.*\.js$/ ) ) return null;           // include ts or tsx for TypeScript support 

        // Use the exposed transform from vite, instead of directly
        // transforming with esbuild
        return transformWithEsbuild( code, id, {
          loader: 'jsx',
          jsx: 'automatic',
        } );
      },
    },
    react(),
  ],
  optimizeDeps: {
    force: true,
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  server: {
    port: 3000,
  },
} );

[rd273001]

This works for me for using .js extension and having JSX code in it. I am using latest versions

[nihalgonsalves]

@marialovesbeans here's a working config:

import fs from 'fs/promises';

export default defineConfig(() => ({
  esbuild: {
    loader: "jsx",
    include: /src\/.*\.jsx?$/,
    // loader: "tsx",
    // include: /src\/.*\.[tj]sx?$/,
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: "load-js-files-as-jsx",
          setup(build) {
            build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
              loader: "jsx",
              contents: await fs.readFile(args.path, "utf8"),
            }));
          },
        },
      ],
    },
  },
}));

I would only recommend using this to try out Vite in your project - the plugin circumvents Vite's internal onLoad esbuild plugins, and could result in undefined behaviour. As of today, this would make using import.meta.glob in JS files impossible

I saw that microsoft/vscode#123998 is solvable with a jsconfig.json, so adapting Vite to work with your project without workarounds would just mean renaming some files :)

[Namnika]

Thank you so much @nihalgonsalves, I am also having this same issue and created this #13715. And I reached here to this thread by someone's response!

Thank you for your answer, It made my whole problem solved! 👍

[oh-wion]

Failed to load url /src/main.jsx (resolved id: /src/main.jsx). Does the file exist?

@nihalgonsalves, here's my problem i installed react through vite and i deleted my src folder and created a new one in build a js file and i got the above error and i dont want to change to normal react file but use vite, please i need a solution

[Namnika]

@oh-wion hi, may I know the folder structure of yours? it will be helpful to get to the solution.

[chee]

@oh-wion the script tag in your index.html was pointing at /src/main.jsx

[rawasaditya]

Thanks for it worked for me I didn't need plugin
optimizeDeps: { esbuildOptions: { force:true, loader:{ '.js': 'jsx' } } }

worked for mr

[zhangchao828]

+1

[yhl10]

Hi, did u resolve this problem? May I view your code? thx

[yhl10]

may i see your code? i donnot know what should i modify...

…

------------------ 原始邮件 ------------------ 发件人: "vitejs/vite" ***@***.***>; 发送时间: 2021年5月31日(星期一) 上午9:26 ***@***.***>; ***@***.******@***.***>; 主题: Re: [vitejs/vite] How to use `.js` instead of `.jsx` (#3448) yes problem resolved thanks for help — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[LeungJacky]

not sure am i correct
i can see load in to the page after i modified the regex
filter: /src\\.*\.js$/

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import {resolve} from 'path'
import fs from 'fs/promises';
// https://vitejs.dev/config/
export default defineConfig({
  server:{
    port: 4200

  },
  resolve:{
    alias:{
      'src': resolve(__dirname,'src'),
    }
  },
  esbuild: {
    loader: "jsx",
    include: /src\/.*\.jsx?$/,
    // loader: "tsx",
    // include: /src\/.*\.[tj]sx?$/,
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: "load-js-files-as-jsx",
          setup(build) {
            build.onLoad({ filter: /src\\.*\.js$/ }, async (args) => ({ // i modified the regex here
              loader: "jsx",
              contents: await fs.readFile(args.path, "utf8"),
            }));
          },
        },
      ],
    },
  },
  plugins: [reactRefresh()]
})

[wingoflan]

this works for me, thanks!

[Srivathsa-km]

@LeungJacky Hey! i have created new file (vite.config.js) and copied the above code but still its throwing error saying "The JSX syntax extension is not currently enabled"...

import { defineConfig } from "vite";
import { resolve } from "path";
import reactRefresh from "@vitejs/plugin-react-refresh";
import fs from "fs/promises";
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      src: resolve(__dirname, "src"),
    },
  },
  esbuild: {
    loader: "jsx",
    include: /src\/.*\.jsx?$/,
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: "load-js-files-as-jsx",
          setup(build) {
            build.onLoad({ filter: /src\\.*\.js$/ }, async (args) => ({
              loader: { ".js": "jsx" },
              contents: await fs.readFile(args.path, "utf8"),
            }));
          },
        },
      ],
    },
  },
  plugins: [reactRefresh()],
});

am I missing anything ?

[LeungJacky]

Have you tried
loader: "jsx",
Instead of
loader: { ".js": "jsx" },

[agosmou]

minor change to import for use in 2023

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import {resolve} from 'path'
import fs from 'fs/promises';
// https://vitejs.dev/config/
export default defineConfig({
  server:{
    port: 4200

  },
  resolve:{
    alias:{
      'src': resolve(__dirname,'src'),
    }
  },
  esbuild: {
    loader: "jsx",
    include: /src\/.*\.jsx?$/,
    // loader: "tsx",
    // include: /src\/.*\.[tj]sx?$/,
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: "load-js-files-as-jsx",
          setup(build) {
            build.onLoad({ filter: /src\\.*\.js$/ }, async (args) => ({ // i modified the regex here
              loader: "jsx",
              contents: await fs.readFile(args.path, "utf8"),
            }));
          },
        },
      ],
    },
  },
  plugins: [reactRefresh()]
})

[jyash97]

I have created a CLI app which can help updating the extension from .js to .jsx when updating the extensions manually would take lot of time.

This will make sure that file with React components are only changed and thus follows vite guidelines.

Link: https://github.com/jyash97/cra-to-vite

[shinaBR2]

@jyash97 thanks so much, it saved tons of time for me

[jules-deguglielmi]

thank you for this !

[yhl10]

thx bro, u help me to kill the problem which bother me a long time, thx!

…

------------------ 原始邮件 ------------------ 发件人: "vitejs/vite" ***@***.***>; 发送时间: 2021年6月1日(星期二) 中午11:07 ***@***.***>; ***@***.******@***.***>; 主题: Re: [vitejs/vite] How to use `.js` instead of `.jsx` (#3448) not sure am i correct i can see load in to the page after i modified the regex filter: /src\\.*\.js$/ import { defineConfig } from 'vite' import reactRefresh from ***@***.***/plugin-react-refresh' import {resolve} from 'path' import fs from 'fs/promises'; // https://vitejs.dev/config/ export default defineConfig({ server:{ port: 4200 }, resolve:{ alias:{ 'src': resolve(__dirname,'src'), } }, esbuild: { loader: "jsx", include: /src\/.*\.jsx?$/, // loader: "tsx", // include: /src\/.*\.[tj]sx?$/, exclude: [], }, optimizeDeps: { esbuildOptions: { plugins: [ { name: "load-js-files-as-jsx", setup(build) { build.onLoad({ filter: /src\\.*\.js$/ }, async (args) => ({ // i modified the regex here loader: "jsx", contents: await fs.readFile(args.path, "utf8"), })); }, }, ], }, }, plugins: [reactRefresh()] }) — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[webmasterdevlin]

You can use python. Here is the script that I've used to convert all JS to JSX.

import os
import sys
rootdir = 'src'
for subdir, dirs, files in os.walk(rootdir):
    for file in files:
        address = os.path.join(subdir,file)
        split = os.path.splitext(address)
        if split[1]=='.js':
           os.rename(address,split[0]+'.jsx')

[aboucodeur]

Using linux command is very fast and simple
find ./src/ -name '*.js' -exec echo {} {}x \;

[FezVrasta]

For anyone looking for a script to rename files containing jsx to .jsx I used this one:

const path = require('path');
const fs = require('fs');
const parser = require('@babel/parser');

const listDir = (dir, fileList = []) => {
  const files = fs.readdirSync(dir);

  files.forEach((file) => {
    if (fs.statSync(path.join(dir, file)).isDirectory()) {
      fileList = listDir(path.join(dir, file), fileList);
    } else {
      if (/\.js$/.test(file)) {
        const name = `${file}x`;
        const src = path.join(dir, file);
        const newSrc = path.join(dir, name);

        const data = fs.readFileSync(src, 'utf8');

        try {
          parser.parse(data, { sourceType: 'module', plugins: ['flow'] });
        } catch (err) {
          fileList.push({
            oldSrc: src,
            newSrc: newSrc,
          });
        }
      }
    }
  });

  return fileList;
};

const foundFiles = listDir(__dirname + '/src');

foundFiles.forEach((f) => {
  fs.renameSync(f.oldSrc, f.newSrc);
});

[dons20]

I made a different version before seeing yours. It just uses some regex to test the content, and seems to work pretty fast as well.

It has the benefit of some more logging so you can know what changed, and it's pretty flexible to new changes if needed.

const fs = require('fs').promises;
const arg = require('arg');
const glob = require('glob');
const chalk = require('chalk');

const defaultDirectory = './src/**/*.js';
const defaultIgnoredFiles = ['./src/**/*.?(spec|config|test|stories).js'];

/**
 * Matches any valid opening component tag <div> | <Component>
 * as well as their closing variants
 * except for JSDoc comments
 */
const validJSXFileRegex = /^[^*\n]*(<\/?[a-zA-Z]*>)[\s\w]*$/im;

/**
 * Used to organize command line arguments
 */
function parseArgs(raw) {
  const args = arg(
    {
      '--dir': String,
      '--ignore': [String],
      '--help': Boolean,
      '--silent': Boolean,
      '-d': '--dir',
      '-i': '--ignore',
      '-h': '--help',
      '-s': '--silent',
    },
    {
      argv: raw.slice(2),
    }
  );
  return {
    directory: args['--dir'] || defaultDirectory,
    ignoredFiles: args['--ignore'] || defaultIgnoredFiles,
    showUsage: args['--help'],
    silent: args['--silent'] || false,
  };
}

/**
 * Prints the usage of the file
 */
function showUsage() {
  console.log(
    chalk.yellowBright`
  Usage: node ~/path/to/transformReact -d ~/glob/of/src/files [options]\n`,
    chalk.greenBright`
    [--dir]     <'./src/**/*.js'>                   glob pattern of files to check
        -d
    [--ignore]  <'*.(spec|config|test|stories).js'> glob pattern of files to ignore
        -i
    [--silent]  <false>                             Hides the verbose logs
        -s
    [--help]                                        show this usage
        -h
  `
  );
  process.exit(0);
}

function transformFiles() {
  const cliOptions = parseArgs(process.argv);
  if (cliOptions.showUsage) showUsage();
  const log = cliOptions.silent ? () => {} : console.log;

  glob(
    cliOptions.directory,
    // Add anything else you want to ignore here
    { ignore: cliOptions.ignoredFiles },
    async (err, matches) => {
      if (err) return;

      console.log(chalk.blue`Found ${matches.length} files matching the glob(s) specified`);
      log(matches);

      const matchingFiles = [];
      const failedFiles = [];

      await Promise.all(
        matches.map(async path => {
          const result = await fs.readFile(path, { encoding: 'utf8' });
          if (!result) return;

          if (result.match(validJSXFileRegex)) {
            const newPath = path.concat('x'); // Add 'x' to the end to make it 'jsx'
            matchingFiles.push(path);
            log(chalk.yellow`Renaming ${path} to ${newPath}`);
            const failStatus = await fs.rename(path, newPath);
            if (failStatus) failedFiles.push(failStatus);
          }
        })
      );

      console.log(chalk.green`Renamed ${matchingFiles.length} files successfully! ✅`);
      if (failedFiles.length > 0) console.log(chalk.red`We weren't able to rename ${failedFiles.length} files`);
    }
  );
}

transformFiles();

[alexanderjsx]

One liner to rename file in src in terminal:

for x in src/**/*.js; do mv "$x" "${x%.js}.jsx"; done

[FezVrasta]

You don't want to rename all the js files, otherwise you lose all the benefits of the separation. Only files using the JSX syntax should have the jsx extension.

[maximilize]

Another one liner with the regex of @dons20 to make sure only JSX files get renamed:

find src -type f | grep "\.[jt]s$" | xargs -n1 grep -HE "^[^*\n]*(<\/?[a-zA-Z]*>)[\s\w]*$" | cut -d: -f1 | uniq | awk '{print "mv "$1" "$1"x"}' | sh

[kwhitley]

Building on @maximilize answer, I'd recommend tweaking the regex to the following to catch some more edge cases:

find src -type f | grep "\.[jt]s$" | xargs -n1 grep -HE "^.*(<\/?[a-zA-Z]*[^>]*>).*$" | cut -d: -f1 | uniq | awk '{print "mv "$1" "$1"x"}' | sh

[christiaanwesterbeek]

This command did not worked on my Mac, but this one did.

find . -iname "*.js" -exec grep -q 'import \* as React' {} \; -exec mv "{}" "{}x" \;

source: https://unix.stackexchange.com/questions/708979/bash-recursive-rename-of-js-files-to-jsx

[pmorim]

Simplifying the regex to (<\/)|(\/>) catches even more edge cases.

find src -type f | grep "\.[jt]s$" | xargs -n1 grep -HE "(<\/)|(\/>)" | cut -d: -f1 | uniq | awk '{print "mv "$1" "$1"x"}' | sh

[rogeriochaves]

a lot of answers here are using plugins with setup(build) in it, but this is actually not a valid plugin hook for vite, people are mixing up esbuild build plugins which are actually not supported by vitejs

this is how I managed to actually get this working with a very simple plugin, just injecting the file into esbuild directly:

{
// ...
            plugins: [
                {
                    name: 'load-js-files-as-jsx',
                    async load(id) {
                        if (!id.match(/src\/.*\.js$/)) {
                            return
                        }

                        const file = await fs.readFile(id, 'utf-8')
                        return esbuild.transformSync(file, { loader: 'jsx' })
                    }
                }
            ]
// ...
}

[istonejoeljonsson]

a lot of answers here are using plugins with setup(build) in it, but this is actually not a valid plugin hook for vite, people are mixing up esbuild build plugins which are actually not supported by vitejs

this is how I managed to actually get this working with a very simple plugin, just injecting the file into esbuild directly:

{
// ...
            plugins: [
                {
                    name: 'load-js-files-as-jsx',
                    async load(id) {
                        if (!id.match(/src\/.*\.js$/)) {
                            return
                        }

                        const file = await fs.readFile(id, 'utf-8')
                        return esbuild.transformSync(file, { loader: 'jsx' })
                    }
                }
            ]
// ...
}

Can you show the full/enough config to make it work as i can't understand how to get this working? Does it work with Vite 3?

[istonejoeljonsson]

Got it to work, didn't notice the src part of the regex 👍

[KostiantynO]

Enabled Intellisense via adding
"typescript.suggest.autoImports": true,
to settings.json file for VSCode. Source: https://dev.to/equiman/vite-powerful-react-project-g4m

[jaw52]

try this cli，@jaw52/transform-jsx-for-vite can batch modify the file suffix name（.js=>.jsx）

npx @jaw52/transform-jsx-for-vite

See here for details，github

[justbearcause]

I have a dependency in a project that uses JSX inside of *.js files. The project itself is written in TypeScript.
After setting

  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },

in vite.config.js, the project successfully runs via vite, but vite build still fails with SyntaxError: Unexpected token.
Any possible solution to this case?

[pmorim]

@justbearcause Have you managed to find a solution to this problem?

[opsb]

I've also seen this, works fine for the dev server but fails on vite build

[tscritch]

Having the same problem. I'm diving into the docs. Currently reading through this - https://github.com/rollup/plugins/tree/master/packages/commonjs
But I'm not sure this is the correct place to look ATM.

Will report back soon™️

[tscritch]

The answer from @rogeriochaves show's part of the solution.

You need to add esbuild as an import at the top. I saved it as a devDependency for my project.

I got this to work with vite build with the following:

// top of file `vite.config.ts`
import * as esbuild from "esbuild";

// in defineConfig:
export default defineConfig({
  // ...
  build: {
    manifest: true,
    target: "es2018",
    outDir: "...",
    emptyOutDir: true, 
    sourcemap: true, 
    rollupOptions: {
      /// ...
      plugins: [
        {
          name: "load-js-files-as-jsx",
          async load(id) {
            // fix for modules using JSX in .js files (add to regex here for any modules that throw errors)
            if (
              !id.match(/svgs\/index\.js/) &&
              !id.match(/react-native-reanimated\/lib\/.*\.js/)
            ) {
              return;
            }

            const file = await fs.readFile(id, "utf-8");
            return esbuild.transformSync(file, { loader: "jsx" });
          },
        },
      ],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },

[opsb]

Thankyou @tscritch, this works! I've adapted your solution a little so that it's easier to track which configuration had been added to vite to handle this (in the hope that one day it may be removed :) ). It also adds some configuration I found necessary for vite serve to work.

// vite/jsx-in-js.js
import esbuild from "esbuild";
import fs from "fs";

// Vite doesn't support JSX in .js files by default so we need to use esbuild to transform them

const rollupPlugin = matchers => ({
  name: "js-in-jsx",
  async load(id) {
    if (matchers.some(matcher => matcher.test(id))) {
      const file = await fs.readFileSync(id, { encoding: "utf-8" });
      return esbuild.transformSync(file, { loader: "jsx" });
    }
  }
});

export default {
         build: {
           rollupOptions: {
             plugins: matchers => [rollupPlugin(matchers)]
           },
           commonjsOptions: {
             transformMixedEsModules: true
           }
         },
         optimizeDeps: {
           esbuildOptions: {
             loader: {
               ".js": "jsx"
             }
           }
         }

import jsxInJs from "./vite/jsx-in-js";

export default defineConfig({
  ...
  build: {
    outDir: "../dist",
    rollupOptions: {
      plugins: jsxInJs.build.rollupOptions.plugins([/.*files\/containing\/jsx-code.*js/])
    },
    commonjsOptions: {
      transformMixedEsModules: jsxInJs.build.commonjsOptions.transformMixedEsModules
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: jsxInJs.optimizeDeps.esbuildOptions.loader
    }
  }
}

[tscritch]

Love it! Thanks for adding to it!

[amcsi]

And does this fully work, or are there some gotchas like people were mentioning throughout this discussion?

[ThinkerDreamer]

plugins: jsxInJs.build.rollupOptions.plugins([/.*files\/containing\/jsx-code.*js/])  

Is this supposed to be used literally as it is, or is the files\/containing\/jsx-code.* part a placeholder? Using it as is, I can't get it to work, but I'm not sure what to put there instead. I would like it to look at all of the files and directories in my project.

[fwextensions]

@ThinkerDreamer yes, that regex is a placeholder. I'd assume you don't actually want it to look at all files and directories, just those that contain source files. What I used is /\/src\/.*\.js$/, which will match any .js file anywhere in the src directory. You could add multiple patterns to that array for different top-level directories.

Combining @tscritch and @opsb's suggestions (neither of which worked out of the box for me), I created this config file. That final esbuild section, including both include and exclude keys (I have no idea why that empty exclude array is necessary), was critical for getting the dev server to work in addition to the build process.

I'm probably going to abandon trying to move to vite for this project, though, as getting it to place nicely with existing CJS modules is too much of a pain.

// vite.config.js
import fs from "node:fs";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import * as esbuild from "esbuild";

const rollupPlugin = (matchers) => ({
  name: "js-in-jsx",
  load(id) {
    if (matchers.some(matcher => matcher.test(id))) {
      const file = fs.readFileSync(id, { encoding: "utf-8" });
      return esbuild.transformSync(file, { loader: "jsx" });
    }
  }
});

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      plugins: [
        rollupPlugin([/\/src\/.*\.js$/])
      ],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".js": "jsx",
      },
    },
  },
  esbuild: {
    loader: "jsx",
    include: /\/src\/.*\.js$/,
    exclude: [],
  },
});

[mxxk]

Expanding on earlier work in this thread, here is the vite.config.js which fixes many problems with earlier attempts. It has been tested with Vite 4.2.2. Some of the changes are subtle, and are documented in a separate section below:

vite.config.js

import fs from "node:fs/promises";
import url from "node:url";
import react from "@vitejs/plugin-react";
import * as vite from "vite";

// Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
function escapeRegExp(string) {
  // $& means the whole matched string
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); 
}

// NOTE: Keep trailing slash to use resulting path in prefix matching.
const srcDir = url.fileURLToPath(new URL("./src/", import.meta.url));
// NOTE: Since ESBuild evaluates this regex using Go's engine, it is not
// clear whether the JS-specific regex escape logic is sound.
const srcJsRegex = new RegExp(`^${escapeRegExp(srcDir)}.*\\.js$`);

const vitePlugin = (isProd) => ({
  name: "js-in-jsx",
  enforce: "pre",
  async transform(code, id) {
    // Ignore Rollup virtual modules.
    if (id.startsWith("\0")) {
      return;
    }
    // Strip off any "proxy id" component before testing against path.
    // See: https://github.com/vitejs/vite-plugin-react-swc/blob/a1bfc313612a8143a153ce87f52925059459aeb2/src/index.ts#L89
    // See: https://rollupjs.org/plugin-development/#inter-plugin-communication
    [id] = id.split("?");
    if (id.startsWith(srcDir) && id.endsWith(".js")) {
      return await vite.transformWithEsbuild(code, id, {
        loader: "jsx",
        jsx: "automatic",
        jsxDev: !isProd,
      });
    }
  }
});

const esbuildPlugin = {
  name: "jsx-loader",
  setup(build) {
    // See: https://github.com/vitejs/vite/discussions/3448#discussioncomment-749919
    build.onLoad({ filter: srcJsRegex }, async args => {
      return {
        contents: await fs.readFile(args.path),
        loader: "jsx",
      };
    });
  },
};

export default function defineConfig({ mode }) {
  return {
    plugins: [
      vitePlugin(mode === "production"),
      // Include React plugin to serve `/@react-refresh` and transform HTML to
      // inject this dependency.
      react(),
    ],
    optimizeDeps: {
      esbuildOptions: {
        plugins: [esbuildPlugin],
      },
    },
  };
};

Changes

• Use Vite plugin (plugins) instead of Rollup-specific plugin (build.rollupOptions.plugins) so the JSX transformation can happen during vite dev and vite build. Vite Plugin API is very similar to Rollup.

  • Use transform plugin hook instead of load. load happens before transform, but transform is a better fit for this plugin's role. Use enforce: "pre" to ensure the plugin is called before Vite's core plugins.

  • Replace synchronous functions (fs.readFileSync, esbuild.transformSync) with asynchronous versions, since the Rollup plugin hook transform supports async.

  • Ignore Rollup virtual modules (starting with \0) and strip off any "proxy ID" (?), like vitejs/vite-plugin-react.

  • Use vite.transformWithEsbuild instead of esbuild.transform because the former automatically propagates warnings and source maps the way Vite already expects.

• Remove top-level esbuild.loader option for reasons mentioned in Add an option to transpile .js file with esbuild #769 (comment):

  Unfortunately, this workaround only works if you can use the same loader for every type of file.

  It is no longer needed since the Vite plugin above takes care of the same transformation.

• Make regex which filters for .js files within ./src more strict.

  • Do not match files within node_modules by including absolute path to ./src in regex (special characters escaped).

  • Do not match directories which begin with src but are not src.

• Use new automatic JSX runtime and pass dev flag if triggered by vite dev.

• Do not use @vitejs/plugin-react, since it does not seem necessary.

Caveats

• As pointed out in How to use `.js` instead of `.jsx` #3448 (comment), the ESBuild plugin bypasses Vite's own onLoad ESBuild plugins, which may be a problem.

  • Question for Vite maintainers: The playground example here

    vite/playground/optimize-deps/vite.config.js

    Lines 30 to 38 in 2a8779c

    	setup(build) {
    	build.onLoad(
    	{ filter: /dep-esbuild-plugin-transform(\\|\/)index\.js$/ },
    	() => ({
    	contents: `export const hello = () => 'Hello from an esbuild plugin'`,
    	loader: 'js',
    	}),
    	)
    	},

    demonstrates how to replace a file using onLoad, so is this any indication of the validity of this approach?

• The filter passed to ESBuild is actually processed using Go's regular expression engine, instead of JavaScript's, so it's unclear whether there is an edge case between the regex syntaxes which might cause a problem. (Though, the likelihood of a special character appearing in a filepath seems quite low.)

• HMR may not work. The implementation of @vitejs/plugin-react and @vitejs/plugin-react-swc is more sophisticated than the ad-hoc Vite plugin above, and a lot of it is for HMR. No consideration for HMR was given to the ad-hoc plugin.

[gbedardsiceupgrade]

Regarding HMR, see my comment here for a fix.

[oh-wion]

Failed to load url /src/main.jsx (resolved id: /src/main.jsx). Does the file exist?

here's my problem i installed react through vite and i deleted my src folder and created a new one in build a js file and i got the above error and i dont want to change to normal react file but use vite, please i need a solution

[dac09]

FYI here's the config I'm now using: https://stackblitz.com/edit/vitejs-vite-ka3qkc?file=vite.config.js

The key steps (after a lot of trial an error, and following guidance in this thread):

1. We do not need a esbuild plugin. We just need to tell esbuild to use the jsx loader
This is done by setting the loader in line 26 of vite config:

  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },

Note that this is the esbuildOptions nested inside optimizeDeps - not the esbuild options at the top level vite config!

2. Add a Vite plugin (as one of the posts above suggests) - but use the transform hook
Line 9 in Vite.config.js

    {
      name: 'load+transform-js-files-as-jsx',
      async transform(code, id) {
        if (!id.match(/src\/.*\.js$/)) {
          return null;
        }

        // Use the exposed transform from vite, instead of directly
        // transforming with esbuild
        return transformWithEsbuild(code, id, {
          loader: 'jsx',
          jsx: 'automatic', // 👈 this is important
        });
      },
    },

If you don't set jsx to automatic, you still get an error.

This probably doesn't happen in TypeScript projects where Vite or Esbuild must know somehow to use the jsx option from the tsconfig.json. Notice that I'm using the transformWithEsbuild function imported from vite. According to the docs - this should match Vite's internal config.

---

Grateful for all the responses above, but I'm still not certain what the most correct option is.

[dac09]

Seems to work for me - @zhangchao828 - could you explain more what you mean?

Can confirm, it does a reload, rather than HMR with this setting ☹️

[dac09]

In case you didn't already know this and weigh the tradeoff, hope this helps. 🙂

Don't fully follow what the downside here is :) in performance?

[gbedardsiceupgrade]

For HMR, I was able to get it to work by setting the jsxRuntime to classic in the react plugin.

{
  ...
  plugins: [react({ jsxRuntime: 'classic' })]
  ...
}

This will make the plugin check for import React to inject fast refresh.

[Staz]

I was able to get HMR working by adding enforce: 'pre' to the plugin

const transformJsxInJs = isProd => ({
  name: 'transform-jsx-in-js',
  enforce: 'pre', // important for HMR to work!
  async transform(code, id) {
    if (!id.match(/.*\.js$/)) {
      return null;
    }

    return await transformWithEsbuild(code, id, {
      loader: 'jsx',
      jsx: 'automatic',
      jsxDev: !isProd,
    });
  },
});

Hope this helps others!

[ElliotNB]

@Staz You are a saint, thank you! I was struggling with this same hot module replacement issue and your tweak got things working. For any others reading this, what worked for me was to use Staz's tweak and not use the { jsxRuntime: 'classic' } tweak up above. HMR was still broken for me when I had both enabled at the same time.

[MrUsmanDev]

Heres the solution

please create config file for vite

import { defineConfig, transformWithEsbuild } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
plugins: [
{
name: 'treat-js-files-as-jsx',
async transform(code, id) {
if (!id.match(/src/.*.js$/)) return null

    // Use the exposed transform from vite, instead of directly
    // transforming with esbuild
    return transformWithEsbuild(code, id, {
      loader: 'jsx',
      jsx: 'automatic',
    })
  },
},
react(),

],

optimizeDeps: {
force: true,
esbuildOptions: {
loader: {
'.js': 'jsx',
},
},
},
})

[prathmesh-ka-github]

Thanks for the solution. I was stuck at this for a while now... but nice alternative to circumvent the problem.