23.01.10 14:45 작성
·
1.4K
·
수정됨
0
\react-nodebird\front\node_modules\antd\es\button\button-group.js:9
import classNames from 'classnames'; 에러가 뜨는 경로는 이렇게 되어있고,
button -group 부분 코드는 여기 아래에 있습니다.
import React, {useCallback, useState} from 'react';
import {Avatar, Button, Card, Popover} from 'antd';
import {EllipsisOutlined, HeartOutlined, MessageOutlined, RetweetOutlined, } from '@ant-design/icons'
import ButtonGroup from 'antd/es/button/button-group';
import { useSelector } from 'react-redux';
const PostCard = ({post}) => {
const {me} = useSelector((state) => state.user);
const id = me && me.id;
const [liked, setLiked] = useState(false);
const [commentFormOpened, setCommentFormOpened] = useState(false);
const onToggleLike = useCallback(() => {
setLiked((prev) => !prev);
}, []);
const onToggleComment = useCallback(() => {
setCommentFormOpened((prev) => !prev);
}, [])
return (
<div style={{marginBottom:20}}>
<Card
cover ={post.Images[0] && <PostImages images = {post.Images} />}
actions = {[
<RetweetOutlined key = 'retweet'/>,
liked
? <HeartTwoTone twoToneColor="#eb2f96" key = 'heart' onClick={onToggleLike}/>
: <HeartOutlined key = 'heart'/>,
<MessageOutlined key ='comment' onClick={onToggleComment}/>,
<Popover key = 'more' content = {(
<Button.Group>
{id && post.User.id === id ? (
<>
<Button>수정</Button>
<Button type ='danger'>삭제</Button>
</>
) : <Button>신고</Button> }
</Button.Group>
)}>
<EllipsisOutlined/>
</Popover>,
]}
>
<Image />
<Card.Meta
avatar = {<Avatar>{post.User.nickname[0]}</Avatar>}
title = {post.User.nickname}
description={post.content}
/>
<Button></Button>
</Card>
{commentFormOpened &&
<div>
댓글부분
</div>}
{/*<CommentForm />
<Comments />*/}
</div>
);
};
export default PostCard;
구글링을 진행하여 package.json파일에 "type" : "module"을 작성하라고 나와서 작성하고 코드를 실행하면 TypeError: styled_components__WEBPACK_IMPORTED_MODULE_4__.div is not a function
at eval (webpack-internal:///./components/LoginForm.js:21:73)
이렇게 스타일드 컴포넌트에러가 납니다. 그래서 스타일드 컴포넌트를 사용하는 모든 부분을 지우고 진행을 하면 가장 처음에 나는 에러인 SyntaxError: Cannot use import statement outside a module이 에러가 등장합니다.
모든 버전은 가장 최신 버전 사용했습니다. 열심히 찾았는데 정답이 보이지 않아서
질문 드립니다.