故事书错误无法读取未定义的属性“位置”

Posted 2023-02-19

【中文标题】故事书错误无法读取未定义的属性“位置”

【英文标题】：Storybook error Cannot read property 'location' of undefined

【发布时间】：2020-09-14 21:35:21

【问题描述】：

我正在尝试让我的 Storybook 与我的 React 应用程序一起工作。我正在使用 redux 4.0.1。

我不能使用我也使用 redux 的特定组件。 这是我得到的错误：

Storybook 错误无法读取未定义的属性“位置”

---

这是我的devDependencies：

  "devDependencies": 
    "@babel/core": "^7.10.0",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^5.3.19"
  

我的组件Navbar.js：

import React,  Component  from "react";
import  connect  from "react-redux";

class Navbar extends Component 
  render() 
    const  user  = this.props.auth;
    return (
      <div className="navbar-fixed">
        <nav className="z-depth-0">Hello, user.name </nav>
      </div>
    );
  

const mapStateToProps = state => (
  auth: state.auth
);
export default connect(
  mapStateToProps
)(Navbar);

还有我的故事2-Navbar.stories.js：

import React from 'react';
import Provider from '../src/Provider.js'
import configureStore from "../src/configureStore";
import Navbar from '../src/components/layout/Navbar';

export default 
  title: 'Navbar',
  decorators: [storyFn => <Provider store= configureStore >storyFn()</Provider>]
;

export const Yay = () => <Navbar />;

我想使用“模拟”数据传递到我的导航栏（如名称和头像 url），否则我会遇到 redux 错误。

感谢任何帮助。

【参考方案1】：

升级 StoryBook 后我遇到了同样的问题。我找到的解决方法是删除 node_modules 文件夹、.storyBook 文件夹，删除 package-lock.json，并删除 package.json 中对 StoryBook 的任何引用。之后运行“npx sb init”和“npm install”。然后“npm run storybook”，问题就解决了！