next초기화

npx create-next-app .

class101/ui설치

npm install @class101/ui

npm 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를 사용하여 나타나는 문제.

next-transpile-modules 설치

npm install next-transpile-modules

next.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을 사용한다

regenerator-runtime설치
npm i --dev regenerator-runtime
index.js에 최상단에 추가
import 'regenerator-runtime';

-.-; 에러는 이제 안뜨지만 vs코드에서 수정하면 css가 잘 먹지만
새로고침하면 css가 다 날아간다.
그런데 npm run build / npm run start하면 잘 나온다;

Author And Source

이 문제에 관하여(Next.js & class101), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ezh29/TIL-20220103-2

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다