Storybook: MDX docs import with IE11?

[dontsave]

in a typescript project, doing
import docs from './docs.mdx'

Causes Internet Explorer 11 to fail when loading the storybook CSF page that imports that MDX document. Is there a workaround for importing MDX in an IE11 friendly way?

[shilman]

What's the error?

[dontsave]

a syntax error that picks out a line in the bundle that includes an arrow function

const makeShortcode = name => function ....

it seems like this should have been transpiled as i'm using a custom tsconfig which targets es5. here's my presets.js:

const path = require('path')

module.exports = [
  {
    name: '@storybook/preset-typescript',
    options: {
      tsLoaderOptions: {
        transpileOnly: true,
        configFile: path.resolve(__dirname, './tsconfig.json'),
      },
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
      },
    },
  },
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      configureJSX: true,
      babelOptions: {},
      sourceLoaderOptions: null,
    },
  },
]

[shilman]

Hmm maybe you need to add something to babelOptions to specify the target? I.e. https://babeljs.io/docs/en/babel-preset-env

If you can get something working, I'd love to add it back into the default settings

[dontsave]

adding

babelOptions: {
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: 'entry',
            },
          ],
        ],
      },

seems to fix it!

[shilman]

@igor-dv do you think we can safely add this to the default babel setup for MDX?

[PSJgit]

To add to this I've also had the same error for IE11, where it fails at

const makeShortcode = name => function ....

I've tried adding the above babelOptions in my presets.js however my app now fails in chrome with:

pragma has been set but pragmafrag has not been set

Any ideas where I may be going wrong?

[PSJgit]

Sorry for the confusion - I've got my presets.js set up like this now and its running fine in chrome and IE11:

module.exports = [{
  name: '@storybook/addon-docs/react/preset',
  options: {
    configureJSX: true,
    babelOptions: {
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry',
            corejs: '3',
            targets: {
              "ie": "11"
            }
          },
        ],
      ],
      plugins: [
        [
          "@babel/plugin-transform-react-jsx", 
          {
            "pragmaFrag": "React.Fragment"
          },
          "storybook-transform-jsx"
        ]
      ]
    },
    sourceLoaderOptions: null,
  },
}];

[clonitza]

I tried everything I could on 5.3.18, including the above config for the preset and it still crashes on IE11 due to they way react-syntax-highlighter is imported which results in this chunk for vendors main:

...
/* harmony default export */ __webpack_exports__["default"] = ({
  oneC: Object(_create_language_async_loader__WEBPACK_IMPORTED_MODULE_0__["default"])("oneC", function () {
    return import(
    /* webpackChunkName: "react-syntax-highlighter_languages_highlight_oneC" */
    "highlight.js/lib/languages/1c");
...

My webpack config is:

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]]
    }
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

[shilman]

@clonitza we recently fixed this on 6.0-alpha, maybe try there?

[clonitza]

@shilman I actually upgraded to alpha right after the fix was released and and it's breaking in the same place. I'll try again in isolation, did you guys test it with typescript, the docs addon and mdx stories?

[shilman]

cc @tooppaaa

[tooppaaa]

Everything should be fine on IE 11 now.
Just tried this on the next branch which I think is a reproduction of the original issue

import markdown from './markdown.stories.mdx';
export const Typography = () => {
  const Docs = markdown.parameters.docs.page;
  return <Docs />;
};

[tooppaaa]

Closing this. Feel free to reopen if needed !