Настройте Storybook для работы с тегом Link Next. js - PullRequest
Новая
       19

Настройте Storybook для работы с тегом Link Next. js

1 голос
/ 13 января 2020

Я пытаюсь настроить сборник рассказов для проекта Next. js. У меня есть компонент, который отображает тег Link из Next. js. Моя проблема в том, что при загрузке этого компонента Storybook выдает следующую ошибку: 

Cannot read property 'pageLoader' of null
   at Link.handleRef

Что нужно сделать, чтобы Storybook работал с Next. js Маршрутизация, в частности, отображение тега Link ?

Обновление: Код, вызывающий ошибку: 

// button-component.js
import Link from 'next/link.js';
import t from 'prop-types';
import React from 'react';

function Button({ as, children, href, ...props }) {
  const isExternal = href && href.startsWith('http');
  const a = (
    <a href={href} {...props}>
      {children}
    </a>
  );

  if (href) {
    return isExternal ? (
      a
    ) : (
      <Link href={href} as={as}>
        {a}
      </Link>
    );
  }

  return (
    <button type="button" {...props}>
      {children}
    </button>
  );
}

Button.propTypes = {
  as: t.string,
  children: t.node,
  href: t.string,
};

export default React.memo(Button);

// button.stories.js
import React from 'react';

import Button from './button-component';

export default {
  title: 'Button',
};

export const standardButton = () => <Button>Standard Button</Button>;

export const internalLink = () => <Button href='/buy'>
  Internal Link
</Button>;

export const externalLink = () => (
  <Button target="_blank" href="https://www.hopin.to">
    External Link
  </Button>
);

1 Ответ

2 голосов
/ 13 января 2020

Я обнаружил проблему, о которой сообщили об этом, на Next. js github: https://github.com/zeit/next.js/issues/9951

Было сообщено, что только 5 дней go, так что вы можете быть имея ту же проблему. Разрешение должно быть обновлено до следующего js v9.1.8-canary.6. Читая больше об этом и глядя на исходный код, это, вероятно, ваша проблема. Кроме того, есть более поздние канареечные сборки следующего js, если вы хотите попробовать что-то более новое.

Если это не решит проблему, я думаю, что вы получаете ошибки, потому что вы используя Link вне страницы Next. js. Далее. js может включать зависимости для страниц, за кулисами. Link может полагаться на эти зависимости и выдает ошибку, когда они не найдены. Если вы хотите проверить свои компоненты вне страниц Next. js, вы можете создать пользовательский компонент Link, который проверяет, находитесь ли вы в Next. js и отображает Link, только если вы это делаете. Например: 

import Link from 'next/link'
import Router from 'next/router'

const CustomLink = ({children, ...otherProps}) => {
  const isPage = () => {
    // if we're in a next.js route, then Router.router will be set
    return Boolean(Router.router)
  }

  return isPage()
    ? (<Link {...otherProps}>{children}</Link>)
    : children
}

Затем используйте CustomLink вместо Link.

...