Publish to chromatic doesn't work on NPM 7

@anthony-hull wrote (npm 7.5.3):

I was getting an empty build folder and it was hanging on the build stage. downgrading to npm install -g npm@next-6 fixed the build stage

---

In https://github.com/chromaui/chromatic-cli/issues/299, Ky6uk wrote:

Running npm run build-storybook manually works correctly, but npm run chromatic just hanging out after some timeout on build-storybook step.

• Node.js: 15.10
• NPM: 7.6.0
• Chromatic: 5.6.3
• Storybook 6.1.21

Starting: build-storybook -- --output-dir /tmp/chromatic--34-bm7FCFVqGuuV
node:internal/modules/cjs/loader:926
  throw err;
  ^
Error: Cannot find module '/builds/company/webapp/storybook/build-storybook'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:923:15)
    at Function.Module._load (node:internal/modules/cjs/loader:768:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
    → Command failed: build-storybook -- --output-dir /tmp/chromatic--34-bm7FCFVqGuuV

┆Issue is synchronized with this Asana task by Unito

[cgodo]

Apparently, it works if calling chromatic from local package instead of using npx: See this other’s issue comment.

I guess the issue is how npx with npm >= 7.0 runs chromatic in a different way.

Summarizing the workaround:

1. Install Chromatic locally

npm i -D chromatic

1. Change package.json so it runs local chromatic:

Instead of "chromatic": "npx chromatic --project-token <your-token>" put "chromatic": "chromatic --project-token <your-token>"

[anthony-hull]

Yes I was. I had run npx sb@latest upgrade before and I checked the version number against NPM for this project.