Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Addon-Docs: Newlines in HTML MDX <Story> gives compile error

See original GitHub issue

Describe the bug

When newlines are present in a MDX story you get a compilation error.

This works:

<Story name="function" height="100px">
  {() => {
    const btn = document.createElement('button');
    btn.innerHTML = 'Hello Button';
    return btn;
  }}
</Story>

This does not:

<Story name="function" height="100px">
  {() => {
    const btn = document.createElement('button');
    btn.innerHTML = 'Hello Button';

    return btn;
  }}
</Story>

System:

  System:                                                                                │+ 125 </Story>                                                                              OS: macOS 10.14.5                                                                    │<MAL  +15 ~3 ᚠ component-stor…  guide.stories.mdx  utf-8[unix]   95% ☰  119/125 ㏑ :  1
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz                                │7 lines yanked                                                                            Binaries:                                                                              ├────────────────────────────────────────────────────────────────────────────────────────
    Node: 10.15.0 - ~/.nodenv/versions/10.15.0/bin/node                                  │  1 const path = require('path')                                                            Yarn: 1.13.0 - /usr/local/bin/yarn                                                   │  2 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    npm: 6.4.1 - ~/.nodenv/versions/10.15.0/bin/npm                                      │  3 const jsonImporter = require('node-sass-json-importer')                               Browsers:                                                                              │  4 const sassTypes = require('node-sass').types
    Chrome: 76.0.3809.132                                                                │  5                                                                                         Firefox: 67.0.4                                                                      │  6 module.exports = async ({ config, mode }) => {
    Safari: 12.1.1                                                                       │  7   // Storybook tries to load svgs by url by default. We need to use an inline-loader  npmPackages:                                                                           │     some times.
    @storybook/addon-a11y: ^5.2.0-beta.36 => 5.2.0-beta.36                               │  8   // This augments the storybook rule to not include SVGs so we can configure it our    @storybook/addon-actions: ^5.2.0-beta.36 => 5.2.0-beta.36                            │    selves below.
    @storybook/addon-backgrounds: ^5.2.0-beta.36 => 5.2.0-beta.36                        │  9   // We also strip out woff/woff2 and configure how they are served separately.         @storybook/addon-docs: ^5.2.0-beta.36 => 5.2.0-beta.36                               │ 10   config.module.rules = config.module.rules.map(rule => {
    @storybook/addon-knobs: ^5.2.0-beta.36 => 5.2.0-beta.36                              │ 11     {                                                                                   @storybook/addon-storysource: ^5.2.0-beta.36 => 5.2.0-beta.36                        │ 12       if (String(rule.test) === String(/\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf
    @storybook/addon-viewport: ^5.2.0-beta.36 => 5.2.0-beta.36                           │    |woff|woff2|cur|ani|pdf)(\?.*)?$/)) {                                                   @storybook/html: ^5.2.0-beta.36 => 5.2.0-beta.36                                     │ 13         return {
    @storybook/react: ^5.2.0-beta.36 => 5.2.0-beta.36

Issue Analytics

State:
Created 4 years ago
Reactions:26
Comments:24 (15 by maintainers)

Top GitHub Comments

4reactions

shilmancommented, Oct 26, 2021

@micDropper it’s a breaking change, so i’m waiting until SB 7.0 to release it. However, I will try to get a prototype working ASAP so I can figure out:

what migration steps are required for users, if any
whether i can do an earlier release with MDXv2 in it, possibly behind a feature flag?

4reactions

shilmancommented, Jun 9, 2021

@yairEO It’s been over a year and we’re still waiting for MDX 2.0

Top Results From Across the Web

Storybook mdx files are not displayed - Stack Overflow

In my case the problem was that I didn't want to go with Storybook's default naming convention *.stories.mdx . I tried to omit...

Scaffolding a React Component Library with Storybook (Using ...

It tells Storybook how to render stories within the "preview" iframe, which renders components in isolation. By default, only one named export ...

alibaba-aero/storybook-addon-docs

When you install Docs, every story gets a DocsPage . ... const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin'); module.exports ...

@storybook/html | Yarn - Package Manager

6.5.14 (December 2, 2022). Bug Fixes. Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043; CLI/React native: Fix addons template ......

DocsPage code preview indentation is wrong. #8078 - Issuehunt

Describe the bug When creating stories for a DocsPage with an MDX file, the code preview ... ^5.2.0-rc.10 => 5.2.0-rc.11 @storybook/addon-docs: ^5.2.0-rc.11 ...