React JS project - treat *.js files as JSX

[V-B-F]

I have a project created with "create-react-app". Each JS file in it is actually JSX. I would like to try ViteJS to develop such project. The problem is that when I create ViteJS 'react' template project and try to rename '.jsx' to '.js', I am getting syntax errors as Vite parses such files as 'javascript' files.

I am wondering if there is a way to tell Vite that all (or some) JS files are actually JSX files...

If anyone knows any trick, please, let me know. Thank you.
Regards,
Vadim

[patak-dev]

You need to rename your files to .jsx, Vite needs to know the difference between a javascript file and JSX file.
https://twitter.com/youyuxi/status/1362050255009816577

[patak-dev]

It is not possible by configuring Vite. You may be able to use a plugin to achieve this, but I haven't seen one so far.

[Summer-andy]

It is not possible by configuring Vite. You may be able to use a plugin to achieve this, but I haven't seen one so far.

i will finish it soon ~

[kwhitley]

I totally think it's appropriate in your own project to rename files to JSX, no matter how they were generated - as you have control.

That said, I'm also curious about how/if to configure vite to parse JSX in .js file - for the sake of deps. I'm finding deps that export jsnext paths, yet have JSX in .js files. Not ideal, but as I don't control that naming, what's the solution?

[Summer-andy]

I have a project created with "create-react-app". Each JS file in it is actually JSX. I would like to try ViteJS to develop such project. The problem is that when I create ViteJS 'react' template project and try to rename '.jsx' to '.js', I am getting syntax errors as Vite parses such files as 'javascript' files.

I am wondering if there is a way to tell Vite that all (or some) JS files are actually JSX files...

If anyone knows any trick, please, let me know. Thank you.
Regards,
Vadim

you can look the https://github.com/dravenww/vite-plugin-react-js-support, i have apply this plugin to my project(Role.jsx -> Role.js, User.jsx -> User.js)

[V-B-F]

I see, thank you. It is a solution but I am a bit doubtful, as you do this conversion manually by using babel. It can ruin vite behavior in other aspects, probably.

[V-B-F]

Overall, I found my question here: #769

[Summer-andy]

first you need update your vite to 2.3.X, and then add
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) => { return ({ loader: "jsx", contents: await fs.readFile(args.path, "utf8"), }) }); }, }, ], }, },

to your vite.config.js

[nihalgonsalves]

Please look at the discussion here: #3448. I described a workaround there that you could use to test Vite, but a rename is still recommended.

[Summer-andy]

good ~

[V-B-F]

Thank you, this is perfect! Works as advertised.

And, yes, I understand that '.jsx' should be used. This is a workaround for a very specific situation - when there is a big old React project, you are not alone developer, and you want to use Vite for development to make the process faster.

[nihalgonsalves]

There are subtle differences between Webpack and esbuild/Vite, so I'm not sure I would recommend doing that.

You could use https://github.com/privatenumber/esbuild-loader with create-react-app. This uses esbuild purely for transpilation, but still gives you a decent speed-up.

[V-B-F]

Thank you, I understand that. But now I can at least try and evaluate the result. Your comment about esbuild-loader is certainly valuable too and I will try it, no matter how Vite testing goes. Thanks.

[dons20]

If you'd like to simplify the process of renaming the files you could try running a simple node script for this. This could easily be customized and improved in many ways, but I just wrote it for my own purposes.

Note: In my project, React was always manually imported (pre-v17 pattern), so it made it easier to differentiate between standard js files.

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

const matchingReactString = "from 'react'";

glob(
  // Modify the paths as you like
  './src/**/*.js',
  // Add anything else you want to ignore here
  { ignore: ['./src/**/*.spec.js', './src/**/*.config.js', './src/**/*.test.js', './src/**/*.stories.js'] }, 
  (err, matches) => {
    if (err) return;

    console.log(chalk.blue`Found these files matching the globs specified:`);
    console.log(matches);

    matches.forEach(async path => {
      const result = await fs.readFile(path);
      if (!result) return;

      if (result.includes(matchingReactString)) {
        const newPath = path.concat('x'); // Pretty much add 'x' to the end to make it 'jsx'
        console.log(chalk.yellow`Renaming ${path} to ${newPath}`);
        fs.rename(path, newPath);
      }
    });
  }
);

[brenelz]

This is a bit outdated but I feel like this approach is better

https://gist.github.com/rxgx/6587ee8d24b34b92cd248c37e49e9627

[dons20]

Seems like a good option as well! My code just reduces the number of dependencies (and steps) necessary to rename the files. However eslint would probably be more accurate depending on your file/folder structure.

[vishalvisd]

this works fine for me in general

find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l "</" $0' {} \; -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;

[jaw52]

You can try this cli tool，@jaw52/transform-jsx-for-vite can batch modify the file suffix name（.js=>.jsx） https://www.npmjs.com/package/@jaw52/transform-jsx-for-vite

npx @jaw52/transform-jsx-for-vite

[SerdarSanri]

I totally disagree with renaming files to make vite happy. In my case not all the js files are react components. There are services, redux stores, selectors, redux-thunks and so on. If I keep them js and components jsx, yeah it works. HMR only kicks in if I edit a jsx file, but if I edit any other files, hot-reload kicks in and entire page reloads. All state lost.

I also tried to rename all files to jsx, results has not changed. Because import react doesn't exist on those files, instead of hmr, hot-reload kicks in. Vite is great, fast and such but from what I seen in some of the tickets shared, vite collaborators, devs, support is not there yet. One of the posts closed with an answer Then don't use it, very mature and point on response from a open-source dev.

I will deal with hot-reload for now, but if anyone found a solution much appreciated.

[madilekci-avena]

Here is the configuration that worked for me. I am trying to migrate my project from CRA to Vite and I do not want to rename file extensions to .jsx either.

Tell esbuild to use the jsx loader :

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

Add a vite plugin to transform .js files to .jsx using exposed transformWithEsbuild method from vite. Modify regex according to your needs.

import { defineConfig, transformWithEsbuild } from 'vite';

 {
      name: 'load+transform-js-files-as-jsx',
      enforce: 'pre',
      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
        });
      },
    },

So config is like this but we add enforce: pre for HMR to work properly. I hope it helps