addon-info returning "Uncaught TypeError: template.asWrappedLayout is not a function"

[transitorytammy]

Describe the bug
I am trying to add @storybook/addon-info to my ember storybook repo.

This is what my .storybook/config.js file looks like.

import { configure, addDecorator } from '@storybook/ember';
import { withInfo } from "@storybook/addon-info";
import { withNotes } from '@storybook/addon-notes';
import { checkA11y } from "@storybook/addon-a11y";
import Centered from "@storybook/addon-centered/ember";

addDecorator(withInfo);
addDecorator(withNotes);
addDecorator(checkA11y);
addDecorator(Centered);

function loadStories() {
    require('../stories/index.js');
    // You can require as many stories as you need.
}

configure(loadStories, module);

When I go to http://localhost:9001/, I see this error in the console and my elements don't load on the page.

To Reproduce
Steps to reproduce the behavior:

1. Go to .storybook/config and add import { withInfo } from "@storybook/addon-info"; and addDecorator(withInfo); to the file.
2. Start server by running npm run storybook
3. Go to http://localhost:9001 and open console to see error

Expected behavior
I expect no error and to be able to use addon-info

System:

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

[igor-dv]

If you leave only an info addon configured, does the error remain?

[transitorytammy]

hi @igor-dv. i tried removing everything else and just using the info addon and i am still getting the same error.

[gabrielcsapo]

@transitorytammy can you comment the version of ember you are using and the story code?

[transitorytammy]

@gabrielcsapo I am on Ember 3.14

ember-cli: 3.1.4
node: 10.13.0
os: darwin x64

[ilkkao]

I had this error too in my Ember app that uses React. My parent Ember component had layout property set to a string. This stopped working after upgrading Ember. In my case I was simply able to remove the overridden layout and fallback to default layout.

[transitorytammy]

@ilkkao where did you "remove the overridden layout"? just wondering what file you are talking about adjusting to fix the issue. thanks.

[ilkkao]

I was talking about my Ember component. https://www.emberjs.com/api/ember/release/classes/Component

I'm not sure what the context is here. I just saw the exact same error message in my Ember app and this PR was the only hit when I googled it. Please ignore my comment if you are not using Ember components here.

[stale]

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!

[shilman]

@transitorytammy addon-info is only compatible with React at the moment. We'll be moving that functionality to the addons panel and making it cross framework as soon as v5 is released in a few weeks. #1147

Closing this for now.

[tau150]

@ilkkao I am having the same issue in Ember, I am new in Ember, could you pass me an example of how did you solve it?

[ilkkao]

@tau150 in my case it was ember component with layout property set to HTML string. If you are in same situation you can find it by searching for layout: in your code.

[shilman]

Addon-info is being superceded by addon-docs, which fixes a bunch of bugs and is easier to maintain. Please give it a try! https://medium.com/storybookjs/storybook-docspage-e185bc3622bf