Ember console error: Assertion Failed: You cannot make a new Ember.Application using a root element that is an ancestor of an existing Ember.Application

[transitorytammy]

Describe the bug Adding storybook to my ember-addon, I get a console error right away that notes. Assertion Failed: You cannot make a new Ember.Application using a root element that is an ancestor of an existing Ember.Application

I am unsure what is causing this issue.

Expected behavior I would expect that there is no console error.

Screenshots

System:

• OS: [MacOS]
• Device: [Macbook Pro 2018]
• Browser: [chrome]
• Framework: [ember]
• Addons: [@storybook/addon-a11y]
• Version: [e.g. 4.0.0]

[igor-dv]

Can you please share your setup/configuration/stories?

[transitorytammy]

Sure. Here is what I have. Let me know if I am missing sharing any files that might help. Thanks. :)

config.js

import { configure, addDecorator } from '@storybook/ember';
import { withNotes } from '@storybook/addon-notes';
import { checkA11y } from "@storybook/addon-a11y";
import Centered from "@storybook/addon-centered/ember";
import { withBackgrounds } from "@storybook/addon-backgrounds";
import { setConsoleOptions } from '@storybook/addon-console';
import { configureViewport } from '@storybook/addon-viewport';
import { withOptions } from "@storybook/addon-options";

setConsoleOptions({
    panelExclude: [],
});

addDecorator(withNotes);
addDecorator(checkA11y);
addDecorator(Centered);
addDecorator(
    withBackgrounds([
        { name: "white", value: "#FFF" },
        { name: "slate", value: "#474C4F" }
    ])
);

addDecorator(
  withOptions({
    name: "XXX",
    url: 'https://github.com/XXX/YYY',
    goFullScreen: false,
    showStoriesPanel: true
  })
);

function loadStories() {
    require('../stories/Modals.stories.js');
    require('../stories/Buttons.stories.js');
    require('../stories/Tooltip.stories.js');
    require('../stories/TextField.stories.js');
    require('../stories/SelectField.stories.js');
    require('../stories/SearchSelectField.stories.js');
    require('../stories/StaticComponents.stories.js');
    require('../stories/Icons.stories.js');
}

configure(loadStories, module);

addon.js

import "@storybook/addon-storysource/register";
import "@storybook/addon-notes/register";
import '@storybook/addon-actions/register';
import "@storybook/addon-a11y/register";
import "@storybook/addon-viewport/register";
import "@storybook/addon-options/register";
import '@storybook/addon-backgrounds/register';

webpack.config.js

// https://github.com/wahengchang/react-redux-boilerplate/blob/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6/.storybook/webpack.config.js

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.

// const path = require("path");
const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    // Use NoErrorsPlugin for webpack 1.x
    new webpack.NoEmitOnErrorsPlugin()
    // your custom plugins
  ],
  entry: ['webpack-hot-middleware/client'],
  devServer: {
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js?$/,
        loaders: [
          {
            loader: require.resolve("@storybook/addon-storysource/loader"),
            options: {
              parser: "javascript",
              prettierConfig: {
                printWidth: 80,
                singleQuote: false
              }
            }
          }
        ],
        enforce: "pre"
      }
    ]
  }
};

ember-cli-build.js

'use strict';

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
    // Add options here
    freestyle: {
      snippetSearchPaths: ['addon', 'tests/dummy/app']
    },
    sourcemaps: {
      enabled: true
    },
    'ember-cli-babel': {
      includePolyfill: true
    }
  });

  /*
    This build file specifies the options for the dummy test app of this
    addon, located in `/tests/dummy`
    This build file does *not* influence how the addon or the app using it
    behave. You most likely want to be modifying `./index.js` or app's build file
  */

  return app.toTree();
};

package.json

  "name": "xxx",
  "version": "0.0.0",
  "description": "ember component library",
  "keywords": [
    "ember-addon"
  ],
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "lint:js": "eslint ./*.js addon addon-test-support app blueprints config lib server test-support tests",
    "start": "ember serve",
    "test": "bin/test",
    "test:all": "ember try:each",
    "build-storybook": "ember build && build-storybook -p 9001 -s dist",
    "storybook": "start-storybook -p 9001 -s dist"
  },
  "dependencies": {
    "babel-plugin-ember-modules-api-polyfill": "^2.6.0",
    "ember-assign-polyfill": "^2.5.0",
    "ember-cli-babel": "^6.6.0",
    "ember-cli-clipboard": "^0.9.0",
    "ember-cli-htmlbars": "^2.0.1",
    "ember-cli-htmlbars-inline-precompile": "^1.0.0",
    "ember-cli-tailwind": "xxx/ember-cli-tailwind#master",
    "ember-get-config": "^0.2.4",
    "ember-tooltips": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@storybook/addon-a11y": "^4.1.2",
    "@storybook/addon-actions": "^4.1.2",
    "@storybook/addon-backgrounds": "^4.1.2",
    "@storybook/addon-centered": "^4.1.2",
    "@storybook/addon-console": "^1.1.0",
    "@storybook/addon-notes": "^4.1.2",
    "@storybook/addon-options": "^4.1.2",
    "@storybook/addon-storysource": "^4.1.2",
    "@storybook/addon-viewport": "^4.1.2",
    "@storybook/ember": "^4.1.1",
    "babel-loader": "^8.0.4",
    "bower": "^1.8.4",
    "broccoli-asset-rev": "^2.4.5",
    "ember-ajax": "^3.0.0",
    "ember-cli": "~3.1.4",
    "ember-cli-dependency-checker": "^2.0.0",
    "ember-cli-eslint": "^4.2.1",
    "ember-cli-inject-live-reload": "^1.4.1",
    "ember-cli-qunit": "^4.1.1",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-storybook": "0.0.1",
    "ember-cli-uglify": "^2.0.0",
    "ember-disable-prototype-extensions": "^1.1.2",
    "ember-export-application-global": "^2.0.0",
    "ember-freestyle": "^0.8.1",
    "ember-group-by": "0.0.5",
    "ember-load-initializers": "^1.0.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-resolver": "^4.0.0",
    "ember-source": "~3.1.0",
    "ember-source-channel-url": "^1.0.1",
    "ember-try": "^0.2.23",
    "ember-wormhole": "^0.5.4",
    "eslint-plugin-ember": "^5.0.0",
    "eslint-plugin-node": "^6.0.1",
    "loader.js": "^4.2.3",
    "stylelint-config-recommended": "^2.1.0",
    "webpack": "^4.27.1"
  },
  "engines": {
    "node": "~8.11.1",
    "npm": "~6.1.0"
  },
  "ember-addon": {
    "configPath": "tests/dummy/config"
  }
}

[barryofguilder]

I'm seeing this as well using the configuration specified in the Storybook Ember guides. This is for a brand new Ember 3.6 app.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[transitorytammy]

@igor-dv is there something more I can provide to help debug this?

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

@gabrielcsapo Mind taking a quick look at this?

[gabrielcsapo]

Hey 👋 @transitorytammy I am looking into this. Do you have a reproduction repo that I can use to debug?

[transitorytammy]

Hi @gabrielcsapo. You could use this repo to reproduce the bug. https://github.com/MatchbookLabs/bourbon . Please let me know if there is anything else I can provide to help with this issue. :)

[gabrielcsapo]

Okay so 4 hours later for some reason boot is being called twice, I am going to file an issue with ember and figure out why this happens, but in the meantime I was able to bump a ton of dependencies for you https://github.com/MatchbookLabs/bourbon/pull/124.

[transitorytammy]

Thank you @gabrielcsapo.

I tried updating to storybook v5 and I think this error is causing it to not load the components anymore since this is the only error in the console. Guess I will need to wait to figure out what this issue is before upgrading my storybook version.

[DwayneH]

I fixed this error by setting ENV.APP.autoboot to false in tests/dummy/config/environment.js. Hope this helps for you guys! 👍

const ENV = { APP: { autoboot: false } } Ofcourse you need to merge it with the existing config.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!