react scripts build generate new hash even if the code not changes

Question

I build react app without create-react-app (without eject). I want to generate new hash every build if the code not change (because cache issue). I installed react-app-rewired for using config overloads and change package.json to

    "build": "react-app-rewired build",

in config-overrides.js I'm trying to create new hash for each build (minified, css, js,styled and etc) but not sure I do it in right way

require('dotenv').config();
var uniqid = require('uniqid');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack: function (config, env) {
    console.log('outputconfig before', config.output);
    const buildHash = uniqid();
    config.output.filename = `static/js/[name].${buildHash}.js`;
    config.output.chunkFilename = `static/js/[name].${buildHash}.chunk.js`;
    console.log('outputs config', config.output);
    return config;
  },
};

when I deploy it to production it looks like the hash build is the same if the code has not changes.. not sure if I configure the config-overloads.js right, maybe I need to add webpack or something not sure.

I want every build to generate new unique name to js, css and html files.

Hash is generate from the source code. Same code will always generate the same hash, it's not random characters. — Konrad
– Konrad, Commented Sep 4, 2022 at 17:14
yes I know, I want to force it to generate a new one, even if the code has not changed.. no needs hash, it can be unique number using uniqueId package — Manspof
– Manspof, Commented Sep 4, 2022 at 18:02

Yilmaz · Accepted Answer · 2022-09-06 22:19:52Z

3

+450

If the input is the same, if you did not change anything in the codebase, webpack will ALWAYS produce the same hash. This is the main property of a hash function. So you have to somehow always change the codebase. To achieve this you can write to a js file and import it in app.js so webpack will see that file's input has changed. In your webpack.config.js

const crypto = require("crypto");
const fs = require("fs");

const content = crypto.randomBytes(8).toString("hex");
const value = JSON.stringify(content);
// we have to write a valid javascript
fs.writeFile("src/test.js", `export const a=${value}`, (err) => {
  if (err) {
    console.error(err);
  }
});

this test.js has no effect on your code. So you could safely import in app.js

import "./test.js";

If you dont import it will not work. Because webpack will read only imported code.

in webpack.config.js i defined the filename like this

output: {
    filename: "[name].[hash].js",
    path: path.join(__dirname, "dist"),
    publicPath: "/",
  },

every time I run npm run build it creates a different hash. Proof of work:

edited Sep 6, 2022 at 22:19

answered Sep 6, 2022 at 22:13

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Manspof Over a year ago

is there any way to do it without to write every time? maybe the way I did with create unique id?

Yilmaz Over a year ago

@Manspof changes in webpack.config did not produce a new hash. even i wrote it to test.js without importing, did not work neither. you have to somehow make sure that there is a change in your code base and webpack should detect it

Manspof Over a year ago

ok, I don't have webpack.config.js, I have config-overrides.js, can I write it there?

Yilmaz Over a year ago

@Manspof yeah. it should not be issue. try it

Collectives™ on Stack Overflow

react scripts build generate new hash even if the code not changes

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related