Skip to content

Instantly share code, notes, and snippets.

@parties
Last active April 23, 2024 12:06
Show Gist options
  • Star 67 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save parties/90cdf35f9a3d05bea6df76dc83a69641 to your computer and use it in GitHub Desktop.
Save parties/90cdf35f9a3d05bea6df76dc83a69641 to your computer and use it in GitHub Desktop.
rename all *.js files containing React markup to *.jsx
# finds all *.js files that have either `</` or `/>` tags in them and renames them to *.jsx
find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l -E "</|/>" "$0"' {} \; -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;
@sean-roberts
Copy link

for files that don't have </ in them, you can run it with /> as well

@andokai
Copy link

andokai commented May 19, 2022

Thanks!

@bishhop5
Copy link

Bravo!

@jsakas
Copy link

jsakas commented Feb 24, 2023

@parties thanks for the snippet, worked great.

One suggestion, if using git, I changed mv to git mv.

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

@wafaa-ismail
Copy link

Nice

@parties
Copy link
Author

parties commented May 16, 2023

Updated to also check for self-closing tags (/>), thank you @sean-roberts!

@jsakas I decided not to change it to git mv because it will throw errors if the files aren't under source control, but it's an easy change to make either way. Thanks for calling it out!

@SaadBazaz
Copy link

Works really well. Good job!

@Dev-Zhao
Copy link

Dev-Zhao commented Jul 26, 2023

@parties Thanks for the snippet

The command doesn't work if the file or any of its parent folders have names with spaces in them.
/src/pages/Folder With Spaces/Another Folder With Spaces/file.js

To fix this we need to add quotes around $0 for grep: grep -l -E "</|/>" $0 -> grep -l -E "</|/>" "$0"

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

@parties
Copy link
Author

parties commented Aug 22, 2023

Updated to handle spaces, thank you @Dev-Zhao!

@ratelChief
Copy link

this one also renames a *.test.js files to *.test.jsx so it could impact the tests

@petemihaylov
Copy link

Thanks!

@skandog
Copy link

skandog commented Oct 24, 2023

Thank you!

@marlo22
Copy link

marlo22 commented Jan 11, 2024

A big time saver, thank you. 🙂

@faridescate
Copy link

Thanks!

@yasminadelia
Copy link

Thank you so much!

@INR-L
Copy link

INR-L commented Mar 26, 2024

Whats is the beinfits after changin this, how to prevent error in pollyfill webpack 5

@Dev-Zhao
Copy link

Dev-Zhao commented Mar 26, 2024

@inrl-md This is used when you have something like: https://vitejs.dev/ to run your React app instead of create-react-app. Vite requires any files containing jsx code to have the .jsx file extension. Vite uses a preconfigured Rollup as the bundler which is more efficient instead of Webpack (used by create-react-app). Changing .js to .jsx does not help resolve any errors in polyfill for Webpack 5.

@INR-L
Copy link

INR-L commented Mar 27, 2024

@inrl-md This is used when you have something like: https://vitejs.dev/ to run your React app instead of create-react-app. Vite requires any files containing jsx code to have the .jsx file extension. Vite uses a preconfigured Rollup as the bundler which is more efficient instead of Webpack (used by create-react-app). Changing .js to .jsx does not help resolve any errors in polyfill for Webpack 5.

Bro how to fix polyfill for Webpack 5.

I tried many different methods for 2 days, still error

i want to run nodemailer on my react project

@Dev-Zhao
Copy link

Dev-Zhao commented Mar 27, 2024

@inrl-md All this gist does is change .js files containing jsx code to have the .jsx extension. If you need help with polyfill for webpack 5, you can post a question on stackoverflow or open an issue in the webpack repo. No one will know why your webpack is not working when you have not provided any information. I suggest setting up your react project in a https://codesandbox.io/ and try to reproduce the error, so someone can help debug it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment