Zenn
Closed2

Storybook の開発環境で React is not defined が表示された場合の対処

React
Storybook
kiiiyokiiiyo

事象

あるコンポーネントで Storybook 上でレンダリング時に、「React is not defined」と表示される事象に遭遇しました。

kiiiyokiiiyo

解決策

自分の場合の解決策としてReact Fragment の記述方法を修正することで解決できた。

❌ NG

Fragmentの記載を省略するとで記述するとレンダリングされなかった

const Example: FC = () => {
  return (
    <>
      <p>Rendering test</p>
    </>
  )
}

export default Example

✅ OK

Fragmentの記載を省略しないで記述するとレンダリングされた

import { Fragment } from 'react'

const Example: FC = () => {
  return (
    <Fragment>
      <p>Rendering test</p>
    </Fragment>
  )
}

export default Example
このスクラップは2022/04/04にクローズされました