inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

프론트 서버 배포하기

npm run build 에러

518

챠챠_

작성한 질문수 40

0

안녕하세요 제로초님

프론트 서버를 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;

 

react redux node.js express next.js

답변 1

0

제로초(조현영)

https://github.com/ant-design/ant-design/issues/46053#issuecomment-1827836587

antd5버전 쓰신다면 이 이슈인 것 같습니다.

넥스트 버젼 질문

0

77

2

로그인시 401 Unauthorized 오류가 뜹니다

0

88

1

무한 스크롤 중 스크롤 튐 현상

0

174

1

특정 페이지 접근을 막고 싶을 때

0

103

2

createGlobalStyle의 위치와 영향범위

0

95

2

인라인 스타일 리렌더링 관련

0

90

2

vsc 에서 npm init 설치시 오류

0

146

2

nextjs 15버전 사용 가능할까요?

0

158

1

화면 새로고침 문의

0

121

1

RTK에서 draft, state 차이가 있나요?

0

153

2

Next 14 사용해도 될까요?

0

452

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

349

1

url 오류 질문있습니다

0

211

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

372

1

sudo certbot --nginx 에러

0

1271

2

Minified React error 콘솔에러 (hydrate)

0

469

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

246

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

325

1

front 서버 npm run build 중에 발생한 에러들

0

381

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

337

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

286

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

237

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

201

1

full reload 될때는 서버 데이터를 호출하는데 그 이후로 새로고침할대는 호출하지 않아서 답답합니다

0

291

2