Storybook addon-docs MDX does not work on Edge

Question

Good day. My team has implemented Storybook for our React components, and the addon-docs plugin has been added to allow the developers to document the components on Storybook. While the MDX addon works perfectly on Chrome, it throws the following error on Edge:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number main.554ccfd9e9a074dd1831.bundle.js (1042,3)

When I click on the Webpack bundle, the breakpoint on Edge's debugger stopped at function MDXContent({components, ...props}){...}

Below are main.js and preview.js of our Storybook.

main.js

const path = require("path");
const { TsConfigPathsPlugin } = require("awesome-typescript-loader");
const pathToInlineSvg = path.resolve(__dirname, "../libs/components/src/assets");
const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin");

module.exports = {
  stories: ["../libs/components/src/**/*.stories.tsx", "../libs/components/src/**/*.stories.mdx"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-knobs",
    "@storybook/addon-backgrounds",
    "@storybook/addon-docs/register",
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.unshift({
      test: /\.svg$/,
      include: pathToInlineSvg,
      use: ["@svgr/webpack", "url-loader"],
    });

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: "awesome-typescript-loader",
    });

    config.module.rules.push({
      test: /\.(stories|story)\.mdx$/,
      use: [
        {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"],
            plugins: ["@babel/plugin-transform-react-jsx", "@babel/plugin-transform-spread"],
          },
        },
        {
          loader: "@mdx-js/loader",
          options: {
            compilers: [createCompiler({})],
          },
        },
      ],
    });

    config.module.rules.push({
      test: /\.(stories|story)\.[tj]sx?$/,
      loader: require.resolve("@storybook/source-loader"),
      exclude: [/node_modules/],
      enforce: "pre",
    });

    config.resolve.extensions.push(".ts", ".tsx");

    config.resolve.plugins.push(
      new TsConfigPathsPlugin({
        baseUrl: "src",
      })
    );

    return config;
  },
};

preview.js

import { addDecorator, addParameters } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import "./index.scss";
import { create } from "@storybook/theming";
import { themes } from "@storybook/theming/dist/create";
import { withBackgrounds } from "@storybook/addon-backgrounds";
import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks";

addParameters({
  options: {
    showPanel: true,
    panelPosition: "right",
    theme: create({
      base: themes.light,
    }),
    storySort: (a, b) => {
      return a[1].id.localeCompare(b[1].id);
    },
  },
});

addParameters({
  backgrounds: [
    { name: "beige", value: "#FEF4D8" },
    { name: "blue", value: "#00aeef" },
    { name: "dark", value: "#333" },
    { name: "light blue", value: "#e6f7fd" },
  ],
});

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

addDecorator(withBackgrounds);
addDecorator(withKnobs);

Could someone please point me in the right direction to get it works on Edge?

Thank you.

Answer 1

It appears by using the @storybook/addon-docs preset options and configure its babelOptions on main.js as below:

const path = require("path");
const { TsConfigPathsPlugin } = require("awesome-typescript-loader");

const pathToInlineSvg = path.resolve(__dirname, "../libs/components/src/assets");

module.exports = {
  stories: ["../libs/components/src/**/*.stories.tsx", "../libs/components/src/**/*.stories.mdx"],
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-actions",
    "@storybook/addon-knobs",
    "@storybook/addon-backgrounds",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,

        babelOptions: {
          presets: [
            [
              "@babel/preset-env",
              {
                useBuiltIns: "entry",
              },
            ],
          ],
        },
        sourceLoaderOptions: null,
        showRoots: true,
      },
    },
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.unshift({
      test: /\.svg$/,
      include: pathToInlineSvg,
      use: ["@svgr/webpack", "url-loader"],
    });

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: "awesome-typescript-loader",
    });
    config.resolve.extensions.push(".ts", ".tsx");

    config.resolve.plugins.push(
      new TsConfigPathsPlugin({
        baseUrl: "src",
      })
    );

    return config;
  },
};

Credit to my colleague who found the fix from https://github.com/storybookjs/storybook/issues/8794.