Storybook - Ember.js - Getting stuck on loading state

Question

I've installed storybook/ember on an existing Ember project, but unfortunatelly it stuck on loading screen with no error - doesn't display the welcome page and shows the spinner instead.

.storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

I haven't touched anything in the stories or .storybook (everythins is the default).

package.json

{
  "name": "web-ui",
  "version": "0.0.0",
  "description": "Small description for web-ui goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "private": true,
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test -r xunit",
    "coverage": "COVERAGE=true ./node_modules/.bin/ember test --silent",
    "storybook": "start-storybook -p 6006 -s dist",
    "build-storybook": "build-storybook -s dist"
  },
  "engines": {
    "node": ">= 10.*"
  },
  "devDependencies": {
    "@babel/core": "7.11.6",
    "@ember/jquery": "1.1.0",
    "@ember/optional-features": "2.0.0",
    "@glimmer/component": "1.0.1",
    "@storybook/addon-actions": "^6.0.22",
    "@storybook/addon-essentials": "^6.0.22",
    "@storybook/addon-links": "^6.0.22",
    "@storybook/ember": "^6.0.22",
    "acorn": "^8.0.1",
    "babel-eslint": "10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-ember-modules-api-polyfill": "^3.1.1",
    "babel-plugin-htmlbars-inline-precompile": "^4.2.0",
    "bootstrap": "3.4.1",
    "broccoli-asset-rev": "3.0.0",
    "broccoli-funnel": "3.0.3",
    "broccoli-merge-trees": "4.2.0",
    "browser": "0.2.6",
    "d3": "6.1.1",
    "ember-ajax": "5.0.0",
    "ember-auto-import": "1.6.0",
    "ember-can": "3.0.0",
    "ember-cli": "3.16.0",
    "ember-cli-app-version": "3.2.0",
    "ember-cli-babel": "7.22.1",
    "ember-cli-code-coverage": "1.0.0",
    "ember-cli-content-security-policy": "1.1.1",
    "ember-cli-dependency-checker": "3.2.0",
    "ember-cli-document-title-northm": "1.0.3",
    "ember-cli-htmlbars": "5.3.1",
    "ember-cli-inject-live-reload": "2.0.2",
    "ember-cli-json-module": "1.0.0",
    "ember-cli-jstree": "1.0.12",
    "ember-cli-less": "3.0.1",
    "ember-cli-mirage": "1.1.8",
    "ember-cli-nouislider": "1.2.1",
    "ember-cli-pagination": "3.1.5",
    "ember-cli-sri": "2.1.1",
    "ember-cli-template-lint": "1.0.0-beta.3",
    "ember-cli-test-loader": "3.0.0",
    "ember-cli-uglify": "3.0.0",
    "ember-data": "3.16.0",
    "ember-diff-attrs": "0.2.2",
    "ember-disable-proxy-controllers": "1.0.2",
    "ember-export-application-global": "2.0.1",
    "ember-flatpickr": "2.16.2",
    "ember-infinity": "2.1.2",
    "ember-inflector": "3.0.1",
    "ember-inline-svg": "1.0.0",
    "ember-intl": "5.4.2",
    "ember-load-initializers": "2.1.1",
    "ember-math-helpers": "2.15.0",
    "ember-maybe-import-regenerator": "0.1.6",
    "ember-power-select": "3.0.4",
    "ember-qunit": "4.6.0",
    "ember-radio-button": "2.0.1",
    "ember-resolver": "7.0.0",
    "ember-simple-auth": "2.1.1",
    "ember-source": "3.16.0",
    "ember-storage": "2.0.0",
    "ember-table": "2.2.3",
    "ember-template-lint": "1.13.2",
    "ember-tooltips": "3.4.5",
    "ember-truth-helpers": "2.1.0",
    "ember-vega": "1.1.5",
    "emberx-select": "3.1.1",
    "eslint": "5.16.0",
    "eslint-plugin-ember": "7.7.2",
    "eslint-plugin-node": "11.1.0",
    "jquery-mockjax": "2.6.0",
    "jshint": "2.12.0",
    "json-merger": "1.1.2",
    "loader.js": "4.7.0",
    "material-design-icons-iconfont": "4.0.5",
    "minimatch": "3.0.4",
    "node-gyp": "6.0.0",
    "qunit-dom": "1.5.0",
    "react-is": "^16.13.1",
    "request": "2.88.2",
    "rsvp": "4.8.5",
    "valid-url": "1.0.9",
    "vega-lib": "4.4.0",
    "yaml-lint": "1.2.4"
  },
  "dependencies": {
    "@ember/test-helpers": "^1.7.2",
    "@storybook/core": "^6.0.22",
    "core-js": "^3.6.5",
    "faker": "^4.1.0",
    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7",
    "semver": "^6.3.0",
    "ts-dedent": "^2.0.0"
  }
}

Any help/suggestions are appreciated.

Answer 1

You need to make sure to run ember install @storybook/ember-cli-storybook after running npx sb init, this will make sure that the ember adapter is installed.

Once you've made thoses steps, make sure to first run your ember app (ie ember s nor ember build) then once the app is built, you can run storybook as you've done.

This is due to a limitation because today the install steps are a bit broken and need to be fixed, that's why we need to run thoses extra steps!

Let me know if you got any questions :)