Create-react-app: How to change output filename of runtime chunk?

[march08]

currently the output is runtime~xxx.[hash].js

How do I change that? I can't make it work on cloudfront to serve files with ~ in the filename...

Example:
S3: https://s3.eu-central-1.amazonaws.com/timesheet-app.topmonks.com/static/js/runtime~main.229c360f.js Works
CF: https://timesheet-app.topmonks.com/static/js/runtime~main.229c360f.js doesn't work

Thanks a lot

Edit:
Proposed changes:

webpack.prod InlineChunkHtmlPlugin

new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/])

webpack.prod runtimeChunk

runtimeChunk: { 
    name: entrypoint => `runtime-${entrypoint.name}`,
},

Edit: seems like the cloudfront link somehow works now, anyway I would perform the change anyway as imo ~ is not the best idea for file naming.

[Timer]

This is probably a bad default name, we should replace the ~ with something else.

[march08]

This is probably a bad default name, we should replace the ~ with something else.

Mm ok, just found it here if there is anyone with the same situation.

I assume that without ejecting, I can do nothing here?

[Timer]

If your app isn't embedded in a larger app, you shouldn't need this file for your app to function. Just delete it. 😄

[march08]

You shouldn't need this file for your app to function. Just delete it. 😄

I would have to delete all the references from the build folder.
At this moment I receive mixes content (http(s)) and the serviceWorker is not up...

[yordis]

I think we should replace it with - instead of ~.

@Timer we are embedded 😢

[pjoe]

Having the same issue. Who came up with putting ~ in the file name 😮

Filenames should only contain 1 and 0 😛

[adamplabarge]

+1 for changing the ~ to something else. . -_ would all be better options.

[iansu]

This is not something we're doing in our webpack config. These are the default names that webpack uses for chunks. I'm not sure that we can easily change them. You might want to file an issue with webpack and then link to it here.

[march08]

This is not something we're doing in our webpack config. These are the default names that webpack uses for chunks. I'm not sure that we can easily change them. You might want to file an issue with webpack and then link to it here.

I've attached links to files where the problem is in the webpack configuration

[javadoug]

My company has a firewall rule that rejects any url with ~ in it. I need this fix (would not want to eject) for this issue.

Per Webpack #runtimeChunk documentation the config change is easily done as noted by op.

PR provided https://github.com/facebook/create-react-app/pull/7679

If this fix is already provided elsewhere I will gladly close.