Addon-docs: When using storybook for angular, cant load docs

[glappsi]

Describe the bug
I tried to use storybook addon-docs for my angular storybook project. After creating my first mdx story, it fail with the message SyntaxError: file: Unexpected token (15:9), pointing to JSX-syntax: return <div {...props}/>.
Thats why I installed @babel/preset-react. Now everything loads fine, my template also gets displayed, but unfortunately it fails when I click on Docs with the following StackTrace

index.js:47 TypeError: Cannot read property 'toLowerCase' of undefined
    at sanitize (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:87301)
    at sanitizeSafe (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:87308)
    at toId (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:87318)
    at VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:81811
    at updateContextConsumer (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:171400)
    at beginWork (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:171588)
    at performUnitOfWork (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:175228)
    at workLoop (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:175268)
    at renderRoot (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:175351)
    at performWorkOnRoot (VM654 vendors~main.d14197376ef6ce2839d3.bundle.js:176258)

To Reproduce
Steps to reproduce the behavior:

1. Create storybook
2. Install addon-docs by using the manual configuration described here: https://www.npmjs.com/package/@storybook/addon-docs
3. Create mdx story with tag

import { Story } from '@storybook/components';

export const componentMeta = {
  title: 'MDX|Button',
};

# Hello Docs

Welcome to the future of Storybook!

<Story name="with text">
  {{
    template: '<div class="button">Button</div>',
  }}
</Story>

Expected behavior
It should render the given template and the documentation

Code snippets
If applicable, add code samples to help explain your problem.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: Chrome
• Framework: angular
• Addons: docs
• Version: 5.2.0-alpha.3

[shilman]

Make sure you follow full setup instructions in the technical preview: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing

[ronnyek]

I realize react was the primary target for storybook, and as I understand what some/all of it is written in... but I think documentation and examples (and even the full setup instructions) appear to be specifically written for @storybook/react, and potentially not some of the others.

I'm running into problems attempting to get MDX support working like it should... for angular, and I have no idea what example syntax for MDX should look like for angular components. I tried the example above... and get

SyntaxError: C:\...\button-mdx.stories.mdx: Identifier 'componentMeta' has already been declared (50:6)

[shilman]

We'll be fixing up the docs soon. In the meantime, check out https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/src/stories/addon-docs.stories.mdx

[daiyis]

Is there any update for the SB6 version angular document of using MDX?

[shilman]

nothing yet, reopening cc @jonniebigodes

[daiyis]

nothing yet, reopening cc @jonniebigodes

Thanks for the update, meanwhile, is there any internal example I can reference to? the angular-cli example in the github source code doesn't have any latest code example.

[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!

[ojemuyiwa]

Lol love how there's no resolution and things get closed haha.. back to google

[bmayen]

@shilman , can this be reopened? This is a primary use-case that isn't documented.

[shilman]

@bmayen This issue is already open?! 🤔

[brettm523]

Ah, looks like stalebot had it inactive back in December but it's active again.