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

안녕하세요 제로초님

프론트 서버를 npm run build 하니까
아래와 같은 에러가 나오는데
검색해서 찾아봐도 잘 모르겠더라구요.
혹시 어느 부분을 확인해보고 어떤 부분을 수정해야할지
조언해주실 수 있을까요?빌드하는것만 몇일째라 ㅠ답답합니다.

   Collecting page data  ./home/ubuntu/react-nodebird/prepare/front/node_modules/rc-util/es/omit.js:1
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:76:18)
    at wrapSafe (node:internal/modules/cjs/loader:1283:20)
    at Module._compile (node:internal/modules/cjs/loader:1328:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at mod.require (/home/ubuntu/react-nodebird/prepare/front/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:177:18)
    at 5514 (/home/ubuntu/react-nodebird/prepare/front/.next/server/pages/signup.js:7:10601)
/home/ubuntu/react-nodebird/prepare/front/node_modules/rc-util/es/omit.js:1
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:76:18)
    at wrapSafe (node:internal/modules/cjs/loader:1283:20)
    at Module._compile (node:internal/modules/cjs/loader:1328:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at mod.require (/home/ubuntu/react-nodebird/prepare/front/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:177:18)
    at 5514 (/home/ubuntu/react-nodebird/prepare/front/.next/server/pages/signup.js:7:10601)

> Build error occurred
Error: Failed to collect page data for /signup
    at /home/ubuntu/react-nodebird/prepare/front/node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

/pages.index.js

import axios from 'axios';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import AppLayout from '../components/AppLayout';
import PostCard from '../components/PostCard';
import PostForm from '../components/PostForm';
import { loadPosts, loadPostsError } from '../reducers/post';
import { loadMyInfo } from '../reducers/user';
import wrapper from '../store/configurStore';


// 프론트, 브라우저 같이 실행
const Home = () => {
  const { me } = useSelector((state) => state.user);
  const { mainPosts, hasMorePosts, loadPostsLoading, retweetError } =
    useSelector((state) => state.post);
  const dispatch = useDispatch();

  useEffect(() => {
    if (retweetError) {
      alert(retweetError);
    }
  }, [retweetError]);
  useEffect(() => {
    const onScroll = () => {
      if (
        window.scrollY + document.documentElement.clientHeight >
        document.documentElement.scrollHeight - 300
      ) {
        if (hasMorePosts && !loadPostsLoading) {
          const lastId = mainPosts[mainPosts.length - 1]?.id;
          dispatch(loadPosts({ lastId, limit: 10 }));
        }
      }
    };

    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [hasMorePosts, loadPostsLoading, mainPosts.length]);

  return (
    <AppLayout>
      {me && <PostForm />}

      {mainPosts && mainPosts[0]
        ? mainPosts.map((post) => <PostCard key={post.id} post={post} />)
        : null}
    </AppLayout>
  );
};

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({ req }) => {
      console.log('getServerSideProps start--------------------------');
      console.log(req.headers);
      const cookie = req ? req.headers.cookie : '';
      axios.defaults.headers.Cookie = '';
      // 쿠키가 브라우저에 있는경우만 넣어서 실행
      // (주의, 아래 조건이 없다면 다른 사람으로 로그인 될 수도 있음)
      if (req && cookie) {
        axios.defaults.headers.Cookie = cookie;
      }
      await store.dispatch(loadPosts());
      await store.dispatch(loadMyInfo());

    },
);

export default Home;