storybook: Cannot run storybook after upgrade to 5.3.17

Describe the bug Cannot run storybook after upgrade from 5.3.9 to 5.3.17

Uncaught TypeError: Cannot read property 'replace' of undefined
    at getSourceInfoErrorAddendum (react.development.js:1554)
    at getSourceInfoErrorAddendumForProps (react.development.js:1564)
    at Object.createElementWithValidation [as createElement] (react.development.js:1766)

System:

System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 10.16.2 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 73.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.17 => 5.3.17
    @storybook/addon-docs: ^5.3.17 => 5.3.17
    @storybook/addon-knobs: ^5.3.17 => 5.3.17
    @storybook/addon-links: ^5.3.17 => 5.3.17
    @storybook/addon-storyshots: ^5.3.17 => 5.3.17
    @storybook/addon-storyshots-puppeteer: ^5.3.17 => 5.3.17
    @storybook/addon-viewport: ^5.3.17 => 5.3.17
    @storybook/addons: ^5.3.17 => 5.3.17
    @storybook/preset-create-react-app: ^2.1.0 => 2.1.0
    @storybook/react: 5.3.17 => 5.3.17

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 12
Comments: 15 (2 by maintainers)

Most upvoted comments

I had the exact same error. Reinstalling sadly did not help. I had 2 story files where I had declared a React Component at the end of the story file and used it further up in the file. Moving the declaration of those components above the place I used them, fixed the error.

Shadowlauch on Apr 7, 2020

The same issue is reproduced in v5.3.19. And I found a workaround.

I had declared inner components (styled-components) after a outer component. Like this:

import React, { FC } from "react"
import styled from "styled-components"

type Props = {
  className?: string
}

export const SideNav: FC<Props> = (props) => {
  const { className } = props
  return (
    <Root className={className}>
      <Heading>SideNav</Heading>
    </Root>
  )
}

const Root = styled.nav``

const Heading = styled.h1``

I got around the problem by defining inner components before the outer component. Like this:

import React, { FC } from "react"
import styled from "styled-components"

type Props = {
  className?: string
}

const Root = styled.nav``

const Heading = styled.h1``

export const SideNav: FC<Props> = (props) => {
  const { className } = props
  return (
    <Root className={className}>
      <Heading>SideNav</Heading>
    </Root>
  )
}

yassh on Jul 29, 2020