Search code examples
node.jscreate-react-apppackage.jsonnpm-scripts

npm postbuild script gives error in renaming file


I have made a node script for npm postbuild that does simple task to rename the file in build folder after build is generated in a react app.

here is the file postbuild.js

let fs = require("fs");
let path = require("path");

const oldJSPath = path.join(__dirname, "build", "static", "js", "*.js");
const newJSPath = path.join(__dirname, "build", "static", "js", "bundle.js");

const oldCSSPath = path.join(__dirname, "build", "static", "css", "*.css");
const newCSSPath = path.join(__dirname, "build", "static", "css", "bundle.css");

fs.renameSync(oldJSPath, newJSPath);
fs.renameSync(oldCSSPath, newCSSPath);

Now the problem is that I keep getting error:

ENOENT: no such file or directory, rename C:\Users\HDL\Documents\demo-redux-app\build\static\js\*.js' -> 'C:\Users\HDL\Documents\demo-redux-app\build\static\js\bundle.js

Even though file and directory does exist in the build directory

structure of build dir:

-build
  -static
    -css
      *.css
    -js
      *.js

    -media
      *.png, jpg etc

Don't Know if this is essential but here is package.json :

{
  "name": "demo-redux-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-promise-middleware": "^5.1.1",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "node postbuild.js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Solution

  • Node.js fs doesn't support wildcards.

    If the intention is to match the first file among *.js and rename it to bundle.js, this can be done with globs:

    const globby = require('globby');
    
    const newJSPath = path.join(__dirname, "build", "static", "js", "bundle.js");
    const oldJSWildcardPath = path.join(__dirname, "build", "static", "js", "*.js");
    const [oldJSPath] = globby.sync(oldJSWildcardPath);
    if (oldJSPath) {
      fs.renameSync(oldJSPath, newJSPath);
    }
    ...
    

    Or with regexps:

    const newJSPath = path.join(__dirname, "build", "static", "js", "bundle.js");
    const oldJSDirPath = path.join(__dirname, "build", "static", "js");
    const [oldJSPath] = fs.readdirSync(oldJSDirPath).filter(filename => /.js$/.test(filename));
    if (oldJSPath) {
      fs.renameSync(oldJSPath, newJSPath);
    }
    ...