storybookjs / ember-cli-storybook

📒 Ember storybook adapter
MIT License
38 stars 39 forks source link

UnhandledPromiseRejectionWarning while running `ember serve` #42

Closed bfitch closed 2 years ago

bfitch commented 4 years ago

Thank you for this excellent addon! And for your work to bring storybook to Ember users 🙌.

While running ember serve after following the (workaround) install instructions in this issue:

ember install @storybook/ember-cli-storybook
npx -p @storybook/cli sb init
ember generate ember-cli-storybook

I'm getting a UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'content' of undefined error.

The fuller stacktrace is:

(node:16479) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'content' of undefined
    at removeRootURL (/Users/bfitch/src/icisstaff/facesheet/node_modules/@storybook/ember-cli-storybook/util.js:61:64)
    at parse (/Users/bfitch/src/icisstaff/facesheet/node_modules/@storybook/ember-cli-storybook/util.js:97:10)
    at Class.outputReady (/Users/bfitch/src/icisstaff/facesheet/node_modules/@storybook/ember-cli-storybook/index.js:84:26)
    at addonPromises.project.addons.reduce (/Users/bfitch/src/icisstaff/facesheet/node_modules/ember-cli/lib/models/builder.js:183:28)
    at Array.reduce (<anonymous>)
    at Builder.processAddonBuildSteps (/Users/bfitch/src/icisstaff/facesheet/node_modules/ember-cli/lib/models/builder.js:180:43)
    at tryCatcher (/Users/bfitch/src/icisstaff/facesheet/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:326:21)
    at invokeCallback (/Users/bfitch/src/icisstaff/facesheet/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:498:33)
    at publish (/Users/bfitch/src/icisstaff/facesheet/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:484:9)
    at flush (/Users/bfitch/src/icisstaff/facesheet/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:2441:7)
    at process._tickCallback (internal/process/next_tick.js:61:11)
(node:16479) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

From my initial debugging, it looks like the parse() method in util.js is expecting a meta tag with a URLencoded representation of the host app's config/environment.js file?

According to the corresponding test for parse(), it's expecting a JS object that looks like:

{
      meta: [{
        name: 'storybook-ember-3-1/config/environment',
        content: '%7B%22modulePrefix%22%3A%22storybook-ember-3-1%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22none%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22LOG_ACTIVE_GENERATION%22%3Afalse%2C%22LOG_VIEW_LOOKUPS%22%3Afalse%2C%22rootElement%22%3A%22%23ember-testing%22%2C%22autoboot%22%3Afalse%2C%22name%22%3A%22storybook-ember-3-1%22%2C%22version%22%3A%220.0.0+eebe77e5%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D'
      }]

// other tags omitted

}

But, while running ember serve and console.loging the config value (in removeRootURL()), that meta tag appears to be missing, which is what's causing the rejected promise:

{ meta: [],
  link:
   [ { rel: 'stylesheet', href: '/chirp/assets/vendor.css' },
     { rel: 'stylesheet', href: '/chirp/assets/app.css' } ],
  script:
   [ { src: '/chirp/ember-cli-live-reload.js' },
     { src: '/chirp/assets/vendor.js' },
     { src: '/chirp/assets/app.js' } ] }

I'm at the limits of my understanding of the addon build process, but it seems that that meta tag, with the expected config, is dynamically built and injected into index.html in the broccoli build process, but it's not there for some reason.

Is there a a missing file or config option I'm missing or a workaround so I can get storybook to load when I run yarn run storybook?

Thank you!


node: 10.15.0 ember-source: 3.15.0 @storybook/ember: 5.3.19 @storybook/ember-cli-storybook: 0.2.1

aklkv commented 3 years ago

Any update on this? I am still facing the same issue.

gabrielcsapo commented 3 years ago

@bfitch would you have a project that I can look at that shows this experience?

bfitch commented 3 years ago

@gabrielcsapo I'm sorry. I don't have a repo I can share publicly.

gabrielcsapo commented 3 years ago

@bfitch are the assets you are looking for shown in the output for test/index.html when you start tests? Also are you using engines for any of this?

tcouloumy commented 3 years ago

I faced the same issue and linked it to the way embler-cli was configured in the ember-cli-build.js file of my project.

storeConfigInMeta was set to false in the options, which prevented the injection of meta name="*/config/environment" tag in the generated index.html, which embler-cli-storybook looks for in parse() of utils.js as you mentioned

Setting storeConfigInMeta: true allowed ember serve and storybook to run

ghost commented 2 years ago

This is quite simple to fix, you just need to add this line at the beginning of removeRootURL() in util.js: if(!config.meta.length) return config; I'm not sure about the process of getting a PR open for this, will just fork the repo for now.