antd 작동되지않아서 질문올립니다
191
jfmam
작성한 질문수 47
0
안녕하세요 제로초님 이번에 영상을 보고 typescript로 한번 바꾸어보려고 시도중인데
app.tsx
import 'antd/dist/antd.css';
import React, { Component } from "react";
import AppLayout from '../components/AppLayout'
import Head from 'next/head';
const TypeBird=({Component}:{Component:React.ReactType})=>{//Component는 any가 맞나?
return (
<>
<Head>
<meta charSet="utf-8" />
<title>TypeBird</title>
</Head>
<AppLayout>
<Component />
</AppLayout>
</>
);
}
export default TypeBird;
AppLayout.tsx
import React, { ReactNode } from 'react';
import Link from 'next/link';
import {Menu} from 'antd/lib';
const AppLayout:React.FC=({children}:{children:ReactNode})=>{//children을 사용하여서 React.FC를 사용하였다.
return (
<div>
<Menu mode="horizontal">
<Menu.Item>
<Link href="/">
<a>타입버드</a>
</Link>
</Menu.Item>
<Menu.Item>
<Link href="/profile">
<a>프로필</a>
</Link>
</Menu.Item>
<Menu.Item>
<Link href="/signup">
<a>회원가입</a>
</Link>
</Menu.Item>
</Menu>
{children}
</div>
);
}
export default AppLayout;
이렇게 작성하였더니
next-dev.js:48 Error was not caught TypeError: Cannot read property 'parentNode' of null at Object.push../node_modules/antd/dist/antd.css.options.insert (antd.css?5e0f:14) at insertStyleElement (injectStylesIntoStyleTag.js:109) at addStyle (injectStylesIntoStyleTag.js:208) at modulesToDom (injectStylesIntoStyleTag.js:81) at push../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports (injectStylesIntoStyleTag.js:239) at Object../node_modules/antd/dist/antd.css (antd.css?5e0f:29) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at Module.<anonymous> (module.js:22) at Module../pages/_app.tsx (_app.tsx:20) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at next-client-pages-loader.js:5 at register (page-loader.js:278) at PageLoader.registerPage (page-loader.js:307) at Array.register [as push] (index.js:54) at Object../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app.tsx!./ (next-client-pages-loader.js:2) at __webpack_require__ (bootstrap:862) at fn (bootstrap:150) at Object.0 (_app.tsx:20) at __webpack_require__ (bootstrap:862) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at _app.js?ts=1593532548146:1
안녕하세요 제로초님 이번에 영상을 보고 typescript로 한번 바꾸어보려고 시도중인데
app.tsx
import 'antd/dist/antd.css';
import React, { Component } from "react";
import AppLayout from '../components/AppLayout'
import Head from 'next/head';
const TypeBird=({Component}:{Component:React.ReactType})=>{//Component는 any가 맞나?
return (
<>
<Head>
<meta charSet="utf-8" />
<title>TypeBird</title>
</Head>
<AppLayout>
<Component />
</AppLayout>
</>
);
}
export default TypeBird;
AppLayout.tsx
import React, { ReactNode } from 'react';
import Link from 'next/link';
import {Menu} from 'antd/lib';
const AppLayout:React.FC=({children}:{children:ReactNode})=>{//children을 사용하여서 React.FC를 사용하였다.
return (
<div>
<Menu mode="horizontal">
<Menu.Item>
<Link href="/">
<a>타입버드</a>
</Link>
</Menu.Item>
<Menu.Item>
<Link href="/profile">
<a>프로필</a>
</Link>
</Menu.Item>
<Menu.Item>
<Link href="/signup">
<a>회원가입</a>
</Link>
</Menu.Item>
</Menu>
{children}
</div>
);
}
export default AppLayout;
이렇게 작성하였더니
next-dev.js:48 Error was not caught TypeError: Cannot read property 'parentNode' of null
at Object.push../node_modules/antd/dist/antd.css.options.insert (antd.css?5e0f:14)
at insertStyleElement (injectStylesIntoStyleTag.js:109)
at addStyle (injectStylesIntoStyleTag.js:208)
at modulesToDom (injectStylesIntoStyleTag.js:81)
at push../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports (injectStylesIntoStyleTag.js:239)
at Object../node_modules/antd/dist/antd.css (antd.css?5e0f:29)
at __webpack_require__ (bootstrap:862)
at fn (bootstrap:150)
at Module.<anonymous> (module.js:22)
at Module../pages/_app.tsx (_app.tsx:20)
at __webpack_require__ (bootstrap:862)
at fn (bootstrap:150)
at next-client-pages-loader.js:5
at register (page-loader.js:278)
at PageLoader.registerPage (page-loader.js:307)
at Array.register [as push] (index.js:54)
at Object../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app.tsx!./ (next-client-pages-loader.js:2)
at __webpack_require__ (bootstrap:862)
at fn (bootstrap:150)
at Object.0 (_app.tsx:20)
at __webpack_require__ (bootstrap:862)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at _app.js?ts=1593532548146:1
이런 에러가 나와서 질문 올립니다..antd 타입에러인 거같은데 무엇이 문제인지 자세히 모르겟어서 질문올립니다
답변 1
next 10 이상에서는 redux dev tool 구동이 안되나요?
0
272
1
세션 갱신 문의 건
0
482
7
배포 진행 후 Highlight updates components render 표시
0
445
1
똑같은 기능을 하는 테이블
0
447
4
관계형
0
312
2
프론트 서버를 이용하지 않는경우
1
299
3
인피니트 스크롤링 사용시 오류
0
278
0
계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.
0
433
2
req.user가 언제 생성되나요??
0
330
2
Cannot read property 'id' of null 에러
0
332
1
리트윗한 게시글 불러오는 sequelize
0
252
1
result.data에서 images인 이유
0
281
2
takeLatest에 대한 질문입니다.
1
342
2
프론트에서 express를 사용하지 않을때 동적라우팅
0
501
6
getInitialProps가 클라이언트에서 수행되는 이유?
0
258
1
리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.
0
445
2
스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다
0
585
2
할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)
0
365
1
nodejs mvc 패턴
0
975
4
사용하고 보니, 람다 구성이 궁금합니다!
0
266
1
제로초님
0
445
1
새로고침 로그인 풀림 문제.
0
247
1
안녕하세요. 강의 너무 감사합니다
0
157
1
제로초님
0
170
1