Storybook: 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.