Create-react-app build files tilde ~ character

Question

Is there a way to not use the tilde character in the create-react-app build js file names?

After I run npm run build on my create-react-app, I get a couple runtime~main.[hash].js files in the /static/js/ folder . My destination file system does not allow tilde characters in file or folder names.

Can I change config somewhere to output runtime-main.[hash].js with a - instead of tilde??

https://facebook.github.io/create-react-app/docs/production-build

I found new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]) in \node_modules\react-scripts\config\webpack.config.js - I believe this is where the name is generated. Can I just change this? I believe I need to eject first? — Ryan

Ryan Ryan · Accepted Answer · 2019-05-19T15:33:28

Solved without ejecting:

-Install rescripts: npm install @rescripts/cli --save-dev in your project

-Create a file .rescriptsrc.js at the root directory of your project and put the code below inside:

module.exports = config => {
    config.optimization.splitChunks.automaticNameDelimiter = '_';
    if (config.optimization.runtimeChunk) {
        config.optimization.runtimeChunk = {
            name: entrypoint => `runtime_${entrypoint.name}`
        };
    }
    return config;
};

In package.json in sripts section add a new entry "build-re": "rescripts build"

Now when running npm run build-re it will generate _ instead of ~ in file names.

https://github.com/harrysolovay/rescripts

Create-react-app build files tilde ~ character

1 Answers