인프런 커뮤니티 질문&답변

\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이 에러가 등장합니다.

모든 버전은 가장 최신 버전 사용했습니다. 열심히 찾았는데 정답이 보이지 않아서

질문 드립니다.