Issue with new version of the cli

[jonniebigodes]

While working on the ember version of the intro to storybook tutorial, upon reaching the testing section the reader is prompted to install storybook-chromatic. During the install process a warn is issued with the following:

npm WARN deprecated [email protected]: Please switch to the 'chromatic' package

I removed the storybook-chromatic package and installed chromatic instead. All went well with the installation.
Issuing the following in the console to run chromatic to setup the baseline stories:

npx chromatic --project-token=my-token

I get the following error:

chromatic info Verifying build (this may take a few minutes depending on your connection)
chromatic ERR! The following problems were reported from your Storybook:
Errors:
=========================
Error: Could not load script: "https://5e9cb6954116c2002255f15d-bvcihcnzce.chromatic.com:4200/_lr/livereload.js?port=4200&host=5e9cb6954116c2002255f15d-bvcihcnzce.chromatic.com"
    at onErrorWrapped (C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\chromatic\node_modules\jsdom\lib\jsdom\browser\resources\per-document-resource-loader.js:38:19)
    at Object.check (C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\chromatic\node_modules\jsdom\lib\jsdom\browser\resources\resource-queue.js:72:23)
    at C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\chromatic\node_modules\jsdom\lib\jsdom\browser\resources\resource-queue.js:124:14
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
=========================
This is very likely caused by some stories either not working right or not getting detected by Chromatic
Please fix the errors, we can't continue..
=========================
chromatic ERR! ** Chromatic build failed. **
Please note the session id: '85875b46-3a0d-490c-a9f6-fc94e38ab515'
contact [email protected] -or- open a support ticket at https://www.chromatic.com


chromatic ERR! Problems encountered:

chromatic ERR! Errors detected in Storybook runtime

As a test i removed the chromatic package and added back storybook-chromatic and when i run npx chromatic --app-code=my-token i get the following error:

npx chromatic --app-code=my-token
C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\storybook-chromatic\bin\lib\log.js:1
Error: Cannot find module './cli'
Require stack:
- C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\storybook-chromatic\bin\lib\log.js
- C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\storybook-chromatic\bin\main.js
- C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\storybook-chromatic\bin\register.js
    at Object.<anonymous> (C:\Users\myuser\myfolder\storybook_fork\storybook-related\learnstorybook_with_ember\taskbox\node_modules\�[4mstorybook-chromatic�[24m\bin\lib\log.js:1) {
  code: �[32m'MODULE_NOT_FOUND'�[39m,
  requireStack: [
    �[32m'C:\\Users\\myuser\\myfolder\\storybook_fork\\storybook-related\\learnstorybook_with_ember\\taskbox\\node_modules\\storybook-chromatic\\bin\\lib\\log.js'�[39m,
    �[32m'C:\\Users\\myuser\\myfolder\\storybook_fork\\storybook-related\\learnstorybook_with_ember\\taskbox\\node_modules\\storybook-chromatic\\bin\\main.js'�[39m,
    �[32m'C:\\Users\\myuser\\myfolder\\storybook_fork\\storybook-related\\learnstorybook_with_ember\\taskbox\\node_modules\\storybook-chromatic\\bin\\register.js'�[39m
  ]
}

I'm going to check and see if reverting back to version 3.5.5 works and update the documentation to use the specific version for now as this is addressed. Probably the addon might need some work aswell.

Feel free to provide feedback

[tmeasday]

"https://5e9cb6954116c2002255f15d-bvcihcnzce.chromatic.com:4200/_lr/livereload.js?port=4200&host=5e9cb6954116c2002255f15d-bvcihcnzce.chromatic.com"

Hmm this seems like a development request (for HMR) against our uploaded build.

I wonder what has happened here? Certainly a normal Storybook build doesn't make that request.

What if you run build-storybook locally, running npx serve from inside the built directory, and browsing to it. Do you see a network request for livereload.js?

Could this have something to do with #81 @ndelangen?

[ndelangen]

Could be related.

livereload.js is an ember specific thing, I think. it's NOT HMR.

HMR request are for sure not made by storybook in static mode, (they also look different).

@jonniebigodes I think the best way forward for right now is:

• upgrade to the new package
• add --allow-console-errors for now

This should result in a functioning storybook / upload.

We need to investigate how to stop ember from adding that request that fails in static mode in storybook, I think.

[jonniebigodes]

@tmeasday regarding this:

What if you run build-storybook locally, running npx serve from inside the built directory, and browsing to it. Do you see a network request for livereload.js?

As you can see below nope, there's no network request to the file in question.

The image above is the result of running this and then the script below, more specifically storybook-local-prod.

Also regarding this:

Hmm this seems like a development request (for HMR) against our uploaded build.

This stems from this when the user/reader is following the tutorial, he/she is normally using storybook in development mode. And that's being injected into his/hers storybook. As per documentation here and here.

Which means that when the reader goes through that section he/she will have a build based on that. And it will generate this issue.

I just did a test to confirm something and i think i solved it.

What i did was:

• Cleared the previous storybook-static folder that was generated when i was checking the livereload.js file.
• Issued npx chromatic --project-token=my-token and i got:

chromatic info Building your Storybook (this can take a minute depending on how many stories you have)
chromatic info Uploading your built Storybook...
uploading [====================] 988kb/s 100% 0.0s

chromatic info Verifying build (this may take a few minutes depending on your connection)
chromatic info Found 10 stories
chromatic info Started build 2 (3 components, 10 stories, 10 snapshots).
chromatic info Taking snapshots 1/10
chromatic info Taking snapshots 3/10
chromatic info Taking snapshots 9/10
chromatic info Build 2 has 6 changes.

chromatic info Pass --exit-zero-on-changes if you want this command to exit successfully in this case.
Alternatively, pass --auto-accept-changes if you want changed builds to pass on this branch.
Read more: https://www.chromatic.com/docs/test

Why this worked was that per previous test a build was present that was not using the livereload server and it seems that the preview.head.html was not injected when the chromatic package runs.

With this i think i need to make some adjustments to the documentation and move some things around and make some rewording so that the reader can get his/hers storybook deployed to chromatic correctly and do some tests to see if it all checks out.

Do you mind keeping this open for a bit longer while i "battle test" (pardon the bad pun) this?

[tmeasday]

Of course!

[tmeasday]

@jonniebigodes I am going to assume this is solved, LMK if not.

[jonniebigodes]

@tmeasday sorry for not closing this earlier. Yeah it was solved a few releases ago, still in 5.x.x . I completely forgot to close this.