Media files Hash mismatch in SSR React

Question

I was implementing SSR (Server side Rendering) in a CRA (Create React App) and for mapping of the static media files, like svg I used the following code snipet,

require('ignore-styles');

require('@babel/register')({
  "presets": [
  "@babel/preset-env",
  "@babel/preset-react"
 ],
 "plugins": [
  [
   "transform-assets",
   {
     "extensions": [
       "css",
       "svg"
     ],
     "name": "static/media/[name].[hash:8].[ext]"
   }
  ]
 ]
});

But due to some reason, the hash that is generated through the following code, mismatch the hash generated from the webpack build. I figured out it is due to the versions of the react-scripts,

In package.json, if you see

"axios": "^0.21.0",
"babel-plugin-transform-assets": "^1.0.2",
"express": "^4.17.1",
"ignore-styles": "^5.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",

I have used react-scripts version 3.4.1, if I try to upgrade the version of react-scripts, and try to run with any updated versions it doesn't generate the same hash for the files.

Like the logo.svg is mapped to logo.5d5d9eef.svg So in here the hash value that is 5d5d9eef differs for any updated version of react-scripts.

What is the solution for this? It seems to be inconsistent approach.

Or Is there any other alternative for this mapping, please mention.

Thanks in Advance, Feel free for ask for more clarity

Answer 1

It's weird that the hash does not match. Let's just use the same file-loader that react-scripts is using. You don't have to npm install file-loader because react-scripts already installs this dependency for you.

The following config works for me.

     {
        test: /\.(svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              emitFile: false,
              name: "/static/media/[name].[hash:8].[ext]"
            }
          }
        ]
      }