에러 내용 Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled (8:9)
Next.js에서 png, svg를 사용하려하는데 적용이 안되었다. 그래서 아래 링크를 참고하였다.
Rendering SVG Image in Next.js with next-images and babel-plugin-inline-react-svg
Next.js is very beautiful and powerful react framework loved by more people day by day because of its amazing features. People often…
medium.com
그러던 도중 svg를 가져오던 도중 오류가 발생한다.
에러 내용
info - Using external babel configuration from /Users/ijong-won/Desktop/Bluedot/bluedot_landingpage/.babelrc
error - ./pages/_app.js:8:8
Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled (8:9):
6 | const App = ({ Component }) => {
7 | return ( >
8 | <> | ^
9 | <Head>
10 | <meta charSet="utf-8"/>
11 | <title>Bluedot</title>
Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.
1. @babel/plugin-transform-react-jsx 설치
에러 내용을 보면 @babel/plugin-transform-react-jsx라는 라이브러리를 devDependencies에 추가하라고 친절하게 알려준다.
그래서 @babel/plugin-transform-react-jsx을 설치해주니 깔꼼히 해결되었다.
npm install --save-dev @babel/plugin-transform-react-jsx
babel-plugin-transform-react-jsx 깃헙 링크
babel/babel
🐠 Babel is a compiler for writing next generation JavaScript. - babel/babel
github.com
2. @babel/plugin-transform-react-jsx 플러그인 입력
그리고나서 아래 링크를 참고하여 플러그인을 입력하면 된다.(.babelrc폴더에 플러그인 입력 , 옵션)
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
플러그인 입력하면 해결
{
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"throwIfNamespace": false, // defaults to true
"runtime": "automatic", // defaults to classic
"importSource": "custom-jsx-library" // defaults to react
}
]
]
}
