[storybook] React is not defined 문제 해결하기

실행환경

• yarn berry
• nextjs v13
• react v18
• babel-loader v8
• babel-core v7

문제

Next.js를 사용하게 되면 next/babel에 의해서 import React from 'react';구문을 작성하지 않아도 자동으로 만들어준다. 그렇기 때문에 상단에 해당 구문을 적는 것이 불필요하나 스토리북을 통해 렌더링 하게 되는 경우 import React from 'react';가 없으면 React is not defiend 에러를 발생하게 된다.

해결 방법

해결 방법에 대해 여러가지 방면으로 생각해 보았다.

1. import React from 'react'를 모두 작성해주기
2. stroybook preset에 next/babel 추가해주기

결론부터 말하자면 1번의 경우에는 불필요한 작업을 추가하는 것이라 선택지에서 제외 하였고 2번의 방법으로 하려고 했으나 Module Build error가 발생하면서 충돌이 발생하였다.

3. stack overflow를 통해 해결, 다음 링크를 통해 문제를 해결 할 수 있었다
   https://stackoverflow.com/questions/74995855/storybook-canvas-referenceerror-react-is-not-defined예시코드

// main.js 
"babel": async (options) => 
{ 
	return { 
		...options, presets: [ 
        	...options.presets, 
            	[ 
                	'@babel/preset-react', { runtime: 'automatic', }, 
                    'preset-react-jsx-transform' 
				], 
			], 
	}; 
},

babel/preset-react와 preset-react-jsx-transform이 import React from 'react'구문을 자동으로 만들어주는 것인 것 같다.

@babel/preset-react

• JSX를 변환하기 위한 Babel preset, React.createElement함수를 호출한다.

runtime: 'automatic'

• React.createElement없이 Jsx로 변환 할 수 있게 해주는 역할
• React 17버전 이후부터 일부 런타임으로 실행되기 때문에 이를 반영하기 위해 추가해준다.
• React의 Module 자동 import를 지원한다.preset-react-jsx-transform
• React.createElement("div", null, "Hello, world!");
• @babele/preset-react, runtime:automatic구문만 추가할 경우 JSX로 변환이 제대로 되지 않을 수 있기 때문에 더 완벽히 변환 할 수 있게 추가해주는 preset이다. 실제로 storybook이 해당 preset없이 제대로 실행되지 않을 경우 추가해보자.
• react.createElement를 사용하지 않고 JSX문법을 변환해주는 역할, React 모듈의 자동 import를 수행해준다.
• /* @jsxRuntime classic */ /* @jsx jsx */ jsx("div", null, "Hello, world!");