Class101 UI 테스트
https://ui.class101.dev/
next.js로 시도해보기로 했다. 하면서 발생한 에러들 정리
next초기화
npx create-next-app .class101/ui설치
npm install @class101/uinpm install --save @class101/ui으로 적혀있으나 npm5부터 --save는 디폴트
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { Button } from '@class101/ui';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Button>Hello, world!</Button>
</div>
)
}
버튼 나오게 index.js구성
npm run dev에러
SyntaxError "Unexpected token 'export'"
- 에러 원인
- https://github.com/martpie/next-transpile-modules#readme
Next.js는 src폴더의 ES6코드만 트렌스파일하도록 bable-loader를 구성하고 있음.
node_module폴더가 ES6를 사용하여 나타나는 문제.
- https://github.com/martpie/next-transpile-modules#readme
next-transpile-modules 설치
npm install next-transpile-modulesnext.config.js
// module.exports = {
// reactStrictMode: true,
// }
// next.config.js
const withTM = require('next-transpile-modules')(['@class101/ui']); // pass the modules you would like to see transpiled
module.exports = withTM({});에러
ReferenceError: regeneratorRuntime is not defined
- 에러 원인
- https://grownfresh.tistory.com/297
바벨이 async/await를 regeneratorRuntime로 설정해 두었기 때문에 regeneratorRuntime모듈을 포함한 polyfill이 필요
babel-polyfill은 사용 중단, regenerator-runtime을 사용한다
- https://grownfresh.tistory.com/297
regenerator-runtime설치
npm i --dev regenerator-runtime
index.js에 최상단에 추가
import 'regenerator-runtime';
-.-; 에러는 이제 안뜨지만 vs코드에서 수정하면 css가 잘 먹지만
새로고침하면 css가 다 날아간다.
그런데 npm run build / npm run start하면 잘 나온다;
2022 목표 - 리액트 잘하기