rename all *.js files containing React markup to *.jsx

renameReactJsToJsx.sh

# 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"' {} \;

@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.

thanks, it worked

Does not seem to catch files that only have custom react hooks defined. But maybe those do not need to be .jsx? (In context of Vite).

@ViktorPontinen only files containing jsx code need to be .jsx (for vite)

Thank you!

Us poor windows users can use the following powershell command:

Get-ChildItem -Path ./src -Filter *.js -Recurse | Where-Object { 
    $_.Name -notlike '*.jsx' -and $_.Name -notlike '*.ejs' 
} | ForEach-Object {
    $fileContent = Get-Content $_.FullName
    if ($fileContent -match '</|/>') {
        $newFileName = $_.FullName -replace '\.js$', '.jsx'
        Rename-Item -Path $_.FullName -NewName $newFileName
    }
}

(The code above is ai generated but worked flawlessly for me. The matching logic should be the same as in the original bash script.)