404 when including scoped npm packages

shezankazi commented 6 years ago

The error

remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        npm ERR! code E404
remote:        npm ERR! 404 Not found : @myname/my-component
remote:        npm ERR! 404
remote:        npm ERR! 404  '@mynamei/my-component' is not in the npm registry.
remote:        npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
remote:        npm ERR! 404 It was specified as a dependency of 'my-app'
remote:        npm ERR! 404
remote:        npm ERR! 404 Note that you can also install from a
remote:        npm ERR! 404 tarball, folder, http url, or git url.
remote:
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /tmp/npmcache.qNZip/_logs/2018-09-02T15_54_04_848Z-debug.log
remote:
remote: -----> Build failed
remote: npm ERR! code E404
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        Some possible problems:
remote:
remote:        - Node version not specified in package.json
remote:        https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to merle-agent.
remote:
To https://git.heroku.com/my-app.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/my-app.git'

my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mars/heroku-js-runtime-env": "^3.0.2",
    "@myname/my-component": "^0.9.1",
    "axios": "^0.18.0",
    "bootstrap": "4.0.0-beta",
    "draft-js": "^0.10.5",
    "draftjs-to-html": "^0.8.4",
    "html-to-draftjs": "^1.4.0",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "node-sass-chokidar": "^1.3.3",
    "npm-run-all": "^4.1.3",
    "perfect-scrollbar": "^1.4.0",
    "prop-types": "^15.6.2",
    "rc-slider": "^8.6.1",
    "react": "^16.4.2",
    "react-beautiful-dnd": "^9.0.0",
    "react-datetime": "^2.15.0",
    "react-dom": "^16.4.2",
    "react-draft-wysiwyg": "^1.12.13",
    "react-dropzone": "^5.0.1",
    "react-geosuggest": "^2.8.0",
    "react-moment": "^0.7.9",
    "react-notification-alert": "0.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "react-select": "^2.0.0",
    "react-table": "^6.8.6",
    "react-toastify": "^4.1.0",
    "reactstrap": "5.0.0-alpha.4",
    "timeago": "^1.6.3",
    "timeago-react": "^2.0.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar ./src/ -o ./src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

my .npmrc

registry.npmjs.org/:_authToken={NPM_TOKEN}
init.author.name=My Name
scope=username
@username:registry=https://registry.npmjs.org/

Including the scoped package from npm works locally but not when deploying to heroku.

mars commented 6 years ago

Howdy @shezankazi 😄

I'm not personally familiar with what you're trying to do, but here's some ideas that might help:

Local vs deployment difference

The simplest reason for differences between local & Heroku deployment is that some files, like .npmrc in this case, are not committed to git.

Confirm the git status does not show that the file is untracked.

Config vars for build

When using config vars like NPM_TOKEN for the build, anytime the var is changed, a new commit must be pushed to trigger a fresh build with the new value. You can push an empty commit to do this:

git commit --allow-empty -m deploy

git push heroku master
# …or if you're working on a branch, replace $BRANCH_NAME for this command,
git push heroku $BRANCH_NAME:master

Registry protocol specifier

The npm docs show that the .npmrc file only requires one line, and that it starts with //,

//registry.npmjs.org/:_authToken=${NPM_TOKEN}

I think those other options you specify are for publishing, which is not normally done from an app using a private package. Maybe those confuse it when building on Heroku.

Multiple .npmrc files

The npm docs list four different sources for .npmrc,

per-project config file (/path/to/my/project/.npmrc)
per-user config file (~/.npmrc)
global config file ($PREFIX/etc/npmrc)
npm builtin config file (/path/to/npm/npmrc)

Confirm that these aren't somehow overriding or conflicting in some way locally that would allow remote deployment to fail.

Hopefully one of these helps! There's no practical reason I can imagine that would make npm registry private scoped packages work locally but not when deployed.

mars commented 6 years ago

One other idea:

Unreachable private registry

If you're using a self-hosted private npm registry that restricts access by IP address, then it's possible that the Heroku build process does not have access.

shezankazi commented 6 years ago

@mars Thanks for the quick reply. I tried all your suggestions and in the end it turns out the error was that my .env variables did not start with REACT APP. Sorry for the post :-(

mars commented 6 years ago

Which env vars needed the prefix? NPM_TOKEN does not need a prefix.

In fact if you set REACT_APP_NPM_TOKEN (do not do this) the secret token value will be included in the javascript bundle, accessible publicly to anyone who can view the source of the React app. That’s a security vulnerability exposing all of your private modules in the registry.

shezankazi commented 6 years ago

Did not know that!! Thanks @mars!

mars / create-react-app-buildpack