Сборник рассказов MDX не работает на Edge - PullRequest
Новая
       8

Сборник рассказов MDX не работает на Edge

0 голосов
/ 28 февраля 2020

Добрый день. Моя команда внедрила Storybook для наших компонентов React, и был добавлен плагин addon-docs, позволяющий разработчикам документировать компоненты в Storybook. Хотя надстройка MDX отлично работает на Chrome, на Edge выдается следующая ошибка:

SCRIPT1028: SCRIPT1028: ожидаемый идентификатор, строка или число main.554ccfd9e9a074dd1831.bundle. js (1042,3)

Когда я нажимаю на пакет Webpack, точка останова на отладчике Edge останавливается на function MDXContent({components, ...props}){...}

enter image description here

Ниже приведены main. js и preview. js нашего сборника рассказов.

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;
  },
};

Предварительный просмотр. 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);

Может Кто-нибудь, пожалуйста, укажите мне правильное направление, чтобы заставить его работать на Edge?

Спасибо.

1 Ответ

1 голос
/ 05 марта 2020

Появляется с помощью предустановленных параметров @storybook/addon-docs и настраивает его babelOptions на main.js, как показано ниже: 

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;
  },
};

Кредит моему коллеге, который нашел исправление от https://github.com/storybookjs/storybook/issues/8794 .

...