Add an option to transpile .js file with esbuild

[pd4d10]

In React development case it is a common habit to use .js file instead of .jsx for JSX component.

Vite seems simply skips the esbuild plugin if the file name does not match this Regex:

vite/src/node/esbuildService.ts

Line 9 in e24133e

export const tjsxRE = /\.(tsx?|jsx)$/

vite/src/node/server/serverPluginEsbuild.ts

Lines 22 to 29 in e24133e

	if (
	!tjsxRE.test(ctx.path) ||
	!ctx.body ||
	ctx.type === 'text/html' ||
	resolver.isPublicRequest(ctx.path)
	) {
	return
	}

which means only .ts, .tsx and .jsx files would have the opportunity to be transpiled by esbuild.

How about adding an option to also transpile .js file with esbuild? It would be great for React developers.

[antfu]

Out of curiosity, is there any reason you would like to use js over jsx for React?

[pd4d10]

For example, the template of CRA use .js instead of .jsx by default:

https://github.com/facebook/create-react-app/tree/master/packages/cra-template/template/src

[unbyte]

Just to supplement this issue, there is a great discussion about using .jsx or .js for JSX component: airbnb/javascript#985

[apazzolini]

This is already supported in esbuild (--loader:.js=jsx), but I don't see a way to pass that option through to it from vite.

[Ginhing]

Maybe we could use jsx/tsx loader of esbuild for all .js / .ts files in vite?

[underfin]

It can be use include at 2.0, docs is here https://vitejs.dev/config/#esbuild

[haflinger]

Hi, the include option doesn't seem to work anymore. ( vite => ^2.0.0-beta.64 )

  vite:config bundled config file loaded in 78ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'react-refresh',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:define',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   esbuild: { include: 'js' },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   configFile: '/project/packages/front/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/project/packages/front',
  vite:config   base: '/',
  vite:config   publicDir: '/project/packages/front/public',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '/project/packages/front/node_modules/.vite',
  vite:config   alias: [ { find: /^\/@vite\//, replacement: [Function: replacement] } ],
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +5ms
[rollup-plugin-dynamic-import-variables] Unexpected token (10:2)
file: /project/packages/front/src/index.js:10:2
error during build:
SyntaxError: Unexpected token (10:2)
    at Object.pp$4.raise (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15778:13)
    at Object.pp.unexpected (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:13470:8)
    at Object.pp$3.parseExprAtom (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15177:10)
    at Object.pp$3.parseExprSubscripts (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14980:19)
    at Object.pp$3.parseMaybeUnary (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14957:17)
    at Object.parseMaybeUnary (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:19372:29)
    at Object.pp$3.parseExprOps (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14892:19)
    at Object.pp$3.parseMaybeConditional (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14875:19)
    at Object.pp$3.parseMaybeAssign (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14843:19)
    at Object.pp$3.parseExprList (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15681:18)

index.js

[lordfpx]

@underfin I'm sorry, but it doesn't seem to work (see @haflinger comment).

[joshjg]

Seems that there are two reasons that include doesn't solve this:

1. If you aren't already passing an exclude array, it defaults to exclude all .js files:

   vite/packages/vite/src/node/plugins/esbuild.ts

   Line 105 in 46bb853

   options.exclude || /\.js$/

2. The loader will be chosen based on the file extension by default:

   vite/packages/vite/src/node/plugins/esbuild.ts

   Line 60 in 46bb853

   loader: ext.slice(1) as Loader,

To work around this you might be able to pass:

esbuild: {
    include: /\.(tsx?|jsx?)$/,
    exclude: [],
    loader: 'tsx'
}

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

[amcsi]

It's been the common practice for years in React projects to not name files with the .jsx extension and just use .js for files including React components.

While it's not possible to use React components in .js files in Vite, it makes it difficult for me to migrate our create-react-app project to Vite (which uses a mixture of js and tsx).

(I tried what @joshjg wrote, but that didn't work either; I'm still getting: src/index.js:31:4: error: Unexpected "<")

[yyx990803]

The reason why you shouldn't use JSX in .js with Vite (and in general):

In modern dev environments like Vite, most of the time there is no need to perform any full-AST code transformation to plain JS files during dev. That's part of the reason why it is fast. If you allow JSX in .js files, then Vite will have to perform a full parse/transform/codegen pass for every .js file even if a lot of them contain no JSX at all. This is a pure overhead that can be avoided by simply differentiating .js and .jsx files.

[mijamo]

This still needs to be a configuration option. None of the options above seem to work for me.

I cannot simply rename hundreds of files in my project to adopt a new bundler.

[yyx990803]

@mijamo

I cannot simply rename hundreds of files in my project to adopt a new bundler.

Then don't.