Using "npm run build" fails with "npm ERR! missing script: build"

Solution 1:

1. Try setting the output.path in webpack.config.js to an absolute path

   module.exports = {
       entry: ['./app/index.js'],
       output: {
           path: __dirname + '/build',
           filename: 'bundle.js'
       }
   }
   

   I don't have Windows (on Linux) but with node 8.16.0 and npm 6.4.1, replicating your package.json and webpack.config.js, I got the following error:

   Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    - configuration.output.path: The provided value "./build" is not an absolute path!
       -> The output directory as **absolute path** (required).
   

   See more on the absolute-path stuff here

2. Since you are on Windows, check your file line-endings (CRLF vs LF). If you've cloned code from another place, depending on your git config, it might have carried over different line endings. You can quickly check line endings in the lower-right corner of VSCode.

Steps I did to mimic your setup:

1. copied your package.json and webpack.config.js
2. run npm i (or npm install)
3. run npm run build - received the invalid configuration error noted above
4. changed the output.path to an absolute path concatenating with __dirname (not sure if Windows is different...)
5. reran npm run build and got:

   ERROR in multi ./app/index.js
   Module not found: Error: Can't resolve './app/index.js' in '/tmp/es6'
   @ multi ./app/index.js
   

6. ran mkdir app && touch app/index.js (in linux, creates folder 'app' and then creates the index.js file inside the app folder)

7. reran npm run build and success:

   > [email protected] build /tmp/es6
   > webpack
   
   Hash: 0578ec98b09c215702c6
   Version: webpack 3.12.0
   Time: 34ms
       Asset     Size  Chunks             Chunk Names
   bundle.js  2.59 kB       0  [emitted]  main
   [0] multi ./app/index.js 28 bytes {0} [built]
   [1] ./app/index.js 0 bytes {0} [built]
   

Solution 2:

First check you have .babelrc file in your root folder.

if you already have

Add this in your package.json file

"scripts": {
    "dev": "webpack --config=Scripts/config/webpack.dev.js --watch",
    "build": "webpack --config=Scripts/config/webpack.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Solution 3:

You put "npm run build && gh-pages -d build" in your deploy script, but you need to tell npm what to do when npm run build is being run. Configure build to whatever command needs to run to build your project.

Since you are using webpack, I assume it would be webpack --config webpack.conf.js. With gulp, gulp build, with TypeScript tsc -p tsproject.json, and so on. It depends on your project.

you can check out the full writeup here: https://github.com/npm/npm/wiki/Troubleshooting#a-brief-note-on-the-built-in-windows-configuration

Solution 4:

Also it might be helpful to delete empty ui src folder (or where you usually store package-lock.json and etc). This might appear for example when you checkout and switching between different branches and some branch has already deleted ui src folder, but git doesn't delete empty folders.

Solution 5:

including "build": "webpack --config webpack.conf.js" didn't work!

I tried webpack --config webpack.config.js which was clean run but after upgrading to 4.41.2 and a little while I used,

"scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
      "build": "webpack"
    },

which worked well for me. It's good to make sure build is correct for the version since I'm using webpack 4.41.2