javascript - Storybook addon-docs MDX does not work on Edge
问题描述
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.
解决方案
它通过使用@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找到了修复程序。
推荐阅读
- swift - 键盘上方的视图不显示
- image - 在 d3.js 散点图中悬停在点上时显示图像
- python-3.x - 父类公开标准方法,子类提供子方法做工作
- javascript - 在antd的多列表中制作单独的单列行
- html - Zalando 的页面高于 429 - 它是如何制作的?
- php - 在 PHP 中使用 XMLReader 读取子节点
- python - 通过json导航(python)
- google-chrome-extension - 如何以编程方式在 Chrome 中启用 Flash?
- django - Django如何扩展通用视图类
- hive - 如何从直线访问 Metastore?