故事书 - Ember.js - 卡在加载状态

Question

我已经在一个现有的 Ember 项目上安装了 storybook/ember，但不幸的是，它卡在加载屏幕上没有错误 - 不显示欢迎页面，而是显示微调器。

.storybook/main.js

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

我没有触及故事或 .storybook 中的任何内容（一切都是默认设置）。

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"
  }
}

感谢任何help/suggestions。

Answer 1

您需要确保运行 ember install @storybook/ember-cli-storybook 在运行宁 npx sb init 之后，这将确保安装 ember 适配器。

完成这些步骤后，请务必先运行您的 ember 应用（即 ember s 或 ember build），然后在构建应用后，你可以运行故事书，就像你做的那样。

这是由于限制，因为今天的安装步骤有点损坏，需要修复，这就是我们需要运行这些额外步骤的原因！

如果您有任何问题，请告诉我:)

故事书 - Ember.js - 卡在加载状态

Storybook - Ember.js - Getting stuck on loading state

ember.js

storybook