故事书找不到模块"@reach/路由器"。但是盖茨比工作得很好

Question

获取错误

Storybook can't find module '@reach/router'.盖茨比工作得很好。

import * as React from "react";
import { useLocation } from "@reach/router";

const Header = () => {
const { pathname } = useLocation();
const isCheckoutHeader = pathname.includes("quote-process");
return (
<>
<div>code here</div>
</>
);
};
export default Header;

Answer 1

使用Gatsby v4，您需要将@reach/router重新映射到@gatsbyjs/reach-router。如果使用Storybook v6和Webpack5，则可以使用NormalModuleReplacementPlugin执行此重新映射。

这假设您的设置类似于Gatsby文档中解释的设置：使用Storybook进行视觉测试。

// .storybook/main.js
const webpack = require("webpack")
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: "@storybook/react",
core: {
builder: "@storybook/builder-webpack5",
},
staticDirs: ["../public", "../static"],
webpackFinal: async config => {
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
config.module.rules[0].exclude = [/node_modules/(?!(gatsby)/)/]
// Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
config.module.rules[0].use[0].options.plugins.push(
require.resolve("babel-plugin-remove-graphql-queries"),
)
// remap @reach/router to fork included in Gatsby
config.plugins.push(
new webpack.NormalModuleReplacementPlugin(
/^@reach/router/,
"@gatsbyjs/reach-router",
),
)
return config
},
}

Answer 2

这是因为Storybook的目的是查看组件，而不是在页面之间进行路由。