Cannot build project using npm run build

Hey Guys!

First off, gotta say @coryhouse your pluralsight tutorial was awesome and so is this boilerplate. I know I’m echoing a lot of devs, but of course, it’s well deserved!

I’m having a bit of difficulty getting it to build for deployment on Azure. I tested locally and found out that the npm run build was giving me a error with jest. I’m hoping someone here can help.

Dependencies Here’s what I’m running (please let me know if I’m missing something that might help with troubleshooting).

node version: v10.1 npm version: 5.6.0 package.json

{
  "name": "streets-pub-app-stage",
  "version": "0.0.0",
  "description": "",
  "engines": {
    "node": "10.1",
    "npm": ">=3"
  },
  "scripts": {
    "preinstall": "node tools/nodeVersionCheck.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm run start-message",
    "start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run lint && npm run test && npm run clean-dist",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "jest",
    "test:CI": "jest",
    "test:cover": "npm run test -- --coverage ",
    "test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "jest --watchAll",
    "open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
    "analyze-bundle": "babel-node ./tools/analyzeBundle.js"
  },
  "author": "Me",
  "license": "MIT",
  "dependencies": {
    "connected-react-router": "4.4.1",
    "object-assign": "4.1.1",
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "react-redux": "5.0.7",
    "react-router-dom": "4.3.1",
    "redux": "4.0.0",
    "redux-thunk": "2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "7.0.0",
    "@babel/core": "7.0.0",
    "@babel/node": "7.0.0",
    "@babel/plugin-proposal-class-properties": "7.0.0",
    "@babel/plugin-transform-react-constant-elements": "7.0.0",
    "@babel/polyfill": "7.0.0",
    "@babel/preset-env": "7.0.0",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "9.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.4.2",
    "babel-loader": "8.0.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.15",
    "browser-sync": "2.24.7",
    "chalk": "2.4.1",
    "concurrently": "4.0.1",
    "connect-history-api-fallback": "1.5.0",
    "coveralls": "3.0.2",
    "css-loader": "1.0.0",
    "cssnano": "4.1.0",
    "enzyme": "3.5.0",
    "enzyme-adapter-react-16": "1.3.1",
    "eslint": "5.4.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-react": "7.11.1",
    "eslint-watch": "4.0.2",
    "file-loader": "2.0.0",
    "hard-source-webpack-plugin": "0.12.0",
    "history": "4.7.2",
    "html-webpack-plugin": "3.2.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.5.0",
    "jest-cli": "23.5.0",
    "json-loader": "0.5.7",
    "mini-css-extract-plugin": "0.4.2",
    "mockdate": "2.0.2",
    "node-sass": "4.9.3",
    "opn-cli": "3.1.0",
    "postcss-loader": "3.0.0",
    "prompt": "1.0.0",
    "prop-types": "15.6.2",
    "raf": "3.4.0",
    "react-hot-loader": "4.3.5",
    "react-test-renderer": "16.4.2",
    "redux-immutable-state-invariant": "2.1.0",
    "redux-mock-store": "1.5.3",
    "replace": "1.0.0",
    "rimraf": "2.6.2",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "url-loader": "1.1.1",
    "webpack": "4.17.1",
    "webpack-bundle-analyzer": "2.13.1",
    "webpack-dev-middleware": "3.2.0",
    "webpack-hot-middleware": "2.22.3"
  },
  "keywords": [],
  "repository": {
    "type": "git",
    "url": ""
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/assetsTransformer.js",
      "\\.(css)$": "<rootDir>/tools/assetsTransformer.js"
    },
    "setupFiles": [
      "raf/polyfill",
      "./tools/enzymeTestAdapterSetup.js"
    ]
  },
  "babel": {
    "env": {
      "development": {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ],
        "plugins": [
          "@babel/plugin-proposal-class-properties",
          "react-hot-loader/babel"
        ]
      },
      "production": {
        "presets": [
          [
            "@babel/preset-env",
            {
              "targets": {
                "ie": 9
              },
              "forceAllTransforms": true
            }
          ],
          "@babel/preset-react"
        ],
        "plugins": [
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-react-constant-elements",
          "transform-react-remove-prop-types"
        ]
      },
      "test": {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ],
        "plugins": [
          "@babel/plugin-proposal-class-properties"
        ]
      }
    }
  },
  "eslintConfig": {
    "root": true,
    "extends": [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:react/recommended"
    ],
    "plugins": [
      "react"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true,
        "experimentalObjectRestSpread": true
      }
    },
    "env": {
      "es6": true,
      "browser": true,
      "node": true,
      "jquery": true,
      "jest": true
    },
    "globals": {}
  }
}

Steps to Reproduce

I started off by running the demo app by following the README.md and was able to get the demo to run locally. Woohoo!

Steps

• Follow Inital Machine Setup
• npm run setup
• npm start
• npm remove demo

Once removed the demo, I started by making a simple HomePage.js (similar to the demo’s about page).

In the default emptyTest.js I updated with a simple test script.

Here’s what I did for HomePage.js

import React from 'react';
import { Link } from 'react-router-dom';

const HomePage = () => {
  return (
    <div>
      <h1>Hi There!</h1>

      <h2>Home</h2>

      <ol>
        <li>Go to the <Link to="/about">About Page</Link></li>
        <li>Go to the <Link to="/project-details">Project Details Page</Link></li>
        <li><Link to="/badlink">Click this bad link</Link> to see the 404 page.</li>
      </ol>

    </div>
  );
};

export default HomePage;

Here’s what did for the HomePage.spec.js

// Must have at least one test file in this directory or Mocha will throw an error.
// This is a placeholder test file that checks the homepage for a an h2 tag with the strong "Home"
import React from 'react';
import { shallow } from 'enzyme';
import HomePage from './HomePage';

describe('<HomePage />', () => {
  it('should have a header called \'Home\'', () => {
    const wrapper = shallow(<HomePage />);
    const actual = wrapper.find('h2').text();
    const expected = 'Home';

    expect(actual).toEqual(expected);
  });
});

After which running npm start worked fine.

However when I run npm build I run into the following error.

 PASS  src/components/HomePage.spec.js
  <HomePage />
    ✓ should have a header called 'Home' (9ms)

Snapshot Summary
 › 1 snapshot file obsolete from 1 test suite. To remove it, run `npm test -- -u`.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 file obsolete, 0 total
Time:        1.509s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! streets-pub-app-stage@0.0.0 test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the streets-pub-app-stage@0.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional loggingoutput above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oxymoron/.npm/_logs/2019-01-09T23_08_15_269Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! streets-pub-app-stage@0.0.0 prebuild: `npm run lint && npm run test && npm run clean-dist`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the streets-pub-app-stage@0.0.0 prebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional loggingoutput above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oxymoron/.npm/_logs/2019-01-09T23_08_15_286Z-debug.log

Reviewing the logs, this is what I get.

0 info it worked if it ends with ok
1 verbose cli [ '/Users/oxymoron/.nvm/versions/node/v10.1.0/bin/node',
1 verbose cli   '/Users/oxymoron/.nvm/versions/node/v10.1.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using npm@5.6.0
3 info using node@v10.1.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle streets-pub-app-stage@0.0.0~prebuild: streets-pub-app-stage@0.0.0
6 verbose lifecycle streets-pub-app-stage@0.0.0~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle streets-pub-app-stage@0.0.0~prebuild: PATH: /Users/oxymoron/.nvm/versions/node/v10.1.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/oxymoron/Industry/projects/code/at/streets-pub-app/node_modules/.bin:/Users/oxymoron/.nvm/versions/node/v10.1.0/bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/usr/local/git/bin:/usr/local/sbin
8 verbose lifecycle streets-pub-app-stage@0.0.0~prebuild: CWD: /Users/oxymoron/Industry/projects/code/at/streets-pub-app
9 silly lifecycle streets-pub-app-stage@0.0.0~prebuild: Args: [ '-c', 'npm run lint && npm run test && npm run clean-dist' ]
10 silly lifecycle streets-pub-app-stage@0.0.0~prebuild: Returned: code: 1  signal: null
11 info lifecycle streets-pub-app-stage@0.0.0~prebuild: Failed to exec prebuild script
12 verbose stack Error: streets-pub-app-stage@0.0.0 prebuild: `npm run lint && npm run test && npm run clean-dist`
12 verbose stack Exit status 1
12 verbose stack     at EventEmitter.<anonymous> (/Users/oxymoron/.nvm/versions/node/v10.1.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
12 verbose stack     at EventEmitter.emit (events.js:182:13)
12 verbose stack     at ChildProcess.<anonymous> (/Users/oxymoron/.nvm/versions/node/v10.1.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
12 verbose stack     at ChildProcess.emit (events.js:182:13)
12 verbose stack     at maybeClose (internal/child_process.js:957:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:246:5)
13 verbose pkgid streets-pub-app-stage@0.0.0
14 verbose cwd /Users/oxymoron/Industry/projects/code/at/streets-pub-app
15 verbose Darwin 17.7.0
16 verbose argv "/Users/oxymoron/.nvm/versions/node/v10.1.0/bin/node" "/Users/oxymoron/.nvm/versions/node/v10.1.0/bin/npm" "run" "build"
17 verbose node v10.1.0
18 verbose npm  v5.6.0
19 error code ELIFECYCLE
20 error errno 1
21 error streets-pub-app-stage@0.0.0 prebuild: `npm run lint && npm run test && npm run clean-dist`
21 error Exit status 1
22 error Failed at the streets-pub-app-stage@0.0.0 prebuild script.
22 error This is probably not a problem with npm. There is likely additional logging output above.
23 verbose exit [ 1, true ]

Expected Behavior If I’m understanding this correctly, npm run build build the project and place a compiled version in the dist/ directory

When I try to deploy this to Azure, I’m getting a similar error message.

Additional Notes I tried updating the package.json with the following per the Things to check if you get an npm run lint error or build error section on the READEME.md

    "lint": "esw webpack.config.* src tools; exit 0",
    "lint:watch": "esw webpack.config.* src tools --watch; exit 0",

I then deleted the node_modules folder and re-ran npm install

While npm start works, I get the following when running npm build

> streets-pub-app-stage@0.0.0 prebuild /Users/oxymoron/Industry/_clients/projects/ladot/code/at/streets-pub-app
> npm run lint && npm run test && npm run clean-dist


> streets-pub-app-stage@0.0.0 lint /Users/oxymoron/Industry/_clients/projects/ladot/code/at/streets-pub-app
> esw webpack.config.* src tools; exit 0

✓ Clean (3:46:16 PM)


> streets-pub-app-stage@0.0.0 test /Users/oxymoron/Industry/_clients/projects/ladot/code/at/streets-pub-app
> jest

 PASS  src/components/HomePage.spec.js
  <HomePage />
    ✓ should have a header called 'Home' (10ms)

Snapshot Summary
 › 1 snapshot file obsolete from 1 test suite. To remove it, run `npm test -- -u`.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 file obsolete, 0 total
Time:        1.529s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! streets-pub-app-stage@0.0.0 test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the streets-pub-app-stage@0.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional loggingoutput above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oxymoron/.npm/_logs/2019-01-09T23_46_18_658Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! streets-pub-app-stage@0.0.0 prebuild: `npm run lint && npm run test && npm run clean-dist`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the streets-pub-app-stage@0.0.0 prebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional loggingoutput above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oxymoron/.npm/_logs/2019-01-09T23_46_18_676Z-debug.log

With the following log file

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@6.4.1
3 info using node@v11.0.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle streets-pub-app-stage@0.0.0~prebuild: streets-pub-app-stage@0.0.0
6 verbose lifecycle streets-pub-app-stage@0.0.0~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle streets-pub-app-stage@0.0.0~prebuild: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/oxymoron/Industry/_clients/projects/ladot/code/at/streets-pub-app/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/usr/local/git/bin:/usr/local/sbin
8 verbose lifecycle streets-pub-app-stage@0.0.0~prebuild: CWD: /Users/oxymoron/Industry/_clients/projects/ladot/code/at/streets-pub-app
9 silly lifecycle streets-pub-app-stage@0.0.0~prebuild: Args: [ '-c', 'npm run lint && npm run test && npm run clean-dist' ]
10 silly lifecycle streets-pub-app-stage@0.0.0~prebuild: Returned: code: 1  signal: null
11 info lifecycle streets-pub-app-stage@0.0.0~prebuild: Failed to exec prebuild script
12 verbose stack Error: streets-pub-app-stage@0.0.0 prebuild: `npm run lint && npm run test && npm run clean-dist`
12 verbose stack Exit status 1
12 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
12 verbose stack     at EventEmitter.emit (events.js:182:13)
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
12 verbose stack     at ChildProcess.emit (events.js:182:13)
12 verbose stack     at maybeClose (internal/child_process.js:962:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
13 verbose pkgid streets-pub-app-stage@0.0.0
14 verbose cwd /Users/oxymoron/Industry/_clients/projects/ladot/code/at/streets-pub-app
15 verbose Darwin 17.7.0
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
17 verbose node v11.0.0
18 verbose npm  v6.4.1
19 error code ELIFECYCLE
20 error errno 1
21 error streets-pub-app-stage@0.0.0 prebuild: `npm run lint && npm run test && npm run clean-dist`
21 error Exit status 1
22 error Failed at the streets-pub-app-stage@0.0.0 prebuild script.
22 error This is probably not a problem with npm. There is likely additional logging output above.
23 verbose exit [ 1, true ]

Closing I’ve since reverted the package.json back. Is there something I may be missing or should try to get the build to work?

I’m making an assumption that the reason I can’t get a production build to deploy to Azure (after setting the NODE_ENV to “production”) is related.

Thanks in advance! Keep kicking butt!!

[nickytonline]

That’s out of scope of react-slingshot, but you have some third party or local assets violating your content security policy (CSP). I’d suggest running a server locally with the same policy and debug from there.

[kwelch]

Can you try to clean up that unused snapshot? I don’t think based on your configuration that would cause jest to error out, but it could be worth a shot there is no message to why jest would exit with 1.