인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

br님의 프로필 이미지
br

작성한 질문수

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

우분투에 노드 설치하기

빌드할때 오류

작성

·

1.1K

0

ubuntu@ip-172-31-37-255:~/react-nodebird/front$ npm run build

> react-nodebird-front@1.0.0 build /home/ubuntu/react-nodebird/front

> cross-env ANALYZE=true NODE_ENV=production next build

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

info - Using external babel configuration from /home/ubuntu/react-nodebird/front/.babelrc
info - Creating an optimized production build

Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve './ImagesZoom/index.' in '/home/ubuntu/react-nodebird/front/components'

> Build error occurred

Error: > Build failed because of webpack errors

at build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)

at runMicrotasks (<anonymous>)

at processTicksAndRejections (internal/process/task_queues.js:95:5)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! react-nodebird-front@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-nodebird-front@1.0.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! /home/ubuntu/.npm/_logs/2022-11-23T12_19_20_531Z-debug.log

 

packge.json

"name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "cross-env ANALYZE=true NODE_ENV=production next build"
  },
  "author": "SHH",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@next/bundle-analyzer": "^13.0.4",
    "antd": "^4.23.3",
    "axios": "^1.1.2",
    "babel-plugin-styled-components": "^2.0.7",
    "cross-env": "^7.0.3",
    "immer": "^9.0.15",
    "moment": "^2.29.4",
    "next": "^9.5.5",
    "next-redux-wrapper": "^6.0.2",
    "prop-types": "^15.8.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^8.0.4",
    "react-slick": "^0.29.0",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.2.1",
    "shortid": "^2.2.16",
    "styled-components": "^5.3.6",
    "swr": "^1.3.0"
  },
  "devDependencies": {
    "@faker-js/faker": "^5.5.3",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.24.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.8",
    "eslint-plugin-react-hooks": "^4.6.0",
    "faker": "^5.5.3"

이런 에러인데 /ImagesZoom/index.js 이쪽에서 잘못된 건가요?? 기능은 정상적입니다

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

경로에 오타나 대소문자 틀린 게 있는 것 같습니다. import 쪽 봐보세요

br님의 프로필 이미지
br
질문자

github에 보면 ImagesZoom 안에 index.js가 없는데 처음부터 다시 해야 하나요??

br님의 프로필 이미지
br
질문자

git status 하니까 ImagesZoom/index.js 초록색 떠있어서 add 파일이름 해서 깃헙에 넣었어요

그리고 다시 git commit -am "내용"

git push origin master 하고

우분투 front 와서 git pull , npm run build 했어요

ubuntu@ip-172-31-37-255:~$ git pull

There is no tracking information for the current branch.

Please specify which branch you want to merge with.

See git-pull(1) for details.

git pull <remote> <branch>

If you wish to set tracking information for this branch you can do so with:

git branch --set-upstream-to=origin/<branch> master

 

ubuntu@ip-172-31-37-255:~$ npm run build
npm ERR! code ENOENT

npm ERR! syscall open

npm ERR! path /home/ubuntu/package.json

npm ERR! errno -2

npm ERR! enoent ENOENT: no such file or directory, open '/home/ubuntu/package.json'

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

npm ERR! A complete log of this run can be found in:

npm ERR! /home/ubuntu/.npm/_logs/2022-11-24T16_43_16_098Z-debug.log

ubuntu@ip-172-31-37-255:~$

 

 

이 상태인데 어떻게 해야하나요..ㅜ 무슨 브런치가 꼬인건지..모르겠네요

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

올바른 폴더에 들어가셔야죠. 프로젝트 폴더에요.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

front 폴더에 안들어가셨어요

br님의 프로필 이미지
br
질문자

ubuntu@ip-172-31-37-255:~/react-nodebird/front$ git pull

Already up to date.

 

ubuntu@ip-172-31-37-255:~/react-nodebird/front$ npm run build

> react-nodebird-front@1.0.0 build /home/ubuntu/react-nodebird/front

> cross-env ANALYZE=true NODE_ENV=production next build

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

info  - Using external babel configuration from /home/ubuntu/react-nodebird/front/.babelrc

info  - Creating an optimized production build

Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve './ImagesZoom' in '/home/ubuntu/react-nodebird/front/components'

> Build error occurred

Error: > Build failed because of webpack errors

    at build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)

    at runMicrotasks (<anonymous>)

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! react-nodebird-front@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build       

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-nodebird-front@1.0.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.       

npm ERR! A complete log of this run can be found in:

npm ERR!     /home/ubuntu/.npm/_logs/2022-11-25T14_02_53_009Z-debug.log

git pull 까진 된거 같은데요

npm run build는 어디서 문제인가여ㅠ ImagesZoom 왜 이럴까여 ㅠㅠ

image

ImagesZoom/index.js

 import React, { useState } from 'react';
    import PropTypes from 'prop-types';
    import Slick from 'react-slick';

    import { Overlay, Global, Header, CloseBtn, ImgWrapper, Indicator, SlickWrapper } from './styles';

    const ImagesZoom = ({ images, onClose }) => {
    const [currentSlide, setCurrentSlide] = useState(0);
    return (
        <Overlay>
        <Global />
        <Header>
            <h1>상세 이미지</h1>
            <CloseBtn onClick={onClose}>X</CloseBtn>
        </Header>
        <SlickWrapper>
            <div>
            <Slick
                        initialSlide={0} 
                        beforeChange={(slide, newSlide) => setCurrentSlide(newSlide)}
                        infinite 
                        arrows={false} 
                        slidesToShow={1}
                        slidesToScroll={1} 
                        >
                {images.map((v) => (
                <ImgWrapper key={v.src}>
                    <img src={`http://localhost:3065/${v.src}`} alt={v.src} />
                </ImgWrapper>
                ))}
            </Slick>
            <Indicator>
                <div>
                    {currentSlide + 1}
                    {' '}
                    /
                    {images.length}
                </div>
            </Indicator>
            </div>
        </SlickWrapper>
        </Overlay>
    );
}; 

ImagesZoom.propTypes = {
    images: PropTypes.arrayOf(PropTypes.object).isRequired,
    onClose: PropTypes.func.isRequired,
};

export default ImagesZoom;

 

components/PostImages.js

import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { PlusOutlined } from '@ant-design/icons';

import ImagesZoom from './ImagesZoom';

const PostImages = ({ images }) => {
  const [showImagesZoom, setShowImagesZoom] = useState(false);

  const onZoom = useCallback(() => {
    setShowImagesZoom(true);
  }, []);
  const onClose = useCallback(() => {
    setShowImagesZoom(false);
  }, []);

  if (images.length === 1) {
    return (
      <>
        <img role="presentation" src={`http://localhost:3065/${images[0].src}`} alt={images[0].src} onClick={onZoom} />
        {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
      </>
    );
  }
  if (images.length === 2) {
    return (
      <>
        <img role="presentation" style={{ width: '50%', display: 'inline-block' }} src={`http://localhost:3065/${images[0].src}`} alt={images[0].src} onClick={onZoom} />
        <img role="presentation" style={{ width: '50%', display: 'inline-block' }} src={`http://localhost:3065/${images[1].src}`} alt={images[1].src} onClick={onZoom} />
        {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
      </>
    );
  }
  return (
    <>
      <div>
        <img role="presentation" style={{ width: '50%' }} src={`http://localhost:3065/${images[0].src}`} alt={images[0].src} onClick={onZoom} />
        <div
          role="presentation"
          style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }}
          onClick={onZoom}
        >
          <PlusOutlined />
          <br />
          {images.length - 1}
          개의 사진 더보기
        </div>
      </div>
      {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />}
    </>
  );
};    

PostImages.propTypes = {
  images: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default PostImages;

 

ImagesZoom Import 해오는곳은 여기인데 이곳 문제인가여..

깃헙 ImagesZoom에는 두개 js파일 들어있어요

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

로컬에는 있을지몰라도 우분투에 없는 걸겁니다. 우분투 폴더에서 ImagesZoom 폴더가 있는지 확인하세요. 내부 파일도요.

br님의 프로필 이미지
br
질문자

찾다가 깃헙에 imagesZoom 소문자로 되있어서 파일명 소문자로 바꾸고 다시 git pull 했어요

막 수정하다가 대문자로 바꿧나봅니다..

다시 npm run build 했는데 about 뭔가 나오네요ㅠ

ubuntu@ip-172-31-37-255:~/react-nodebird/front$ npm run build

> react-nodebird-front@1.0.0 build /home/ubuntu/react-nodebird/front

> cross-env ANALYZE=true NODE_ENV=production next build

Browserslist: caniuse-lite is outdated. Please run:

npx browserslist@latest --update-db

info  - Using external babel configuration from /home/ubuntu/react-nodebird/front/.babelrc

Webpack Bundle Analyzer saved report to /home/ubuntu/react-nodebird/front/.next/server/analyze/client.html 

Webpack Bundle Analyzer saved report to /home/ubuntu/react-nodebird/front/.next/analyze/client.html        

info  - Creating an optimized production build

info  - Compiled successfully

info  - Collecting page data

[    ] info  - Generating static pages (0/2)getStaticProps

{ type: 'LOAD_USER_REQUEST', data: 1 }

{ type: '@@redux-saga/CHANNEL_END' }

[=   ] info  - Generating static pages (0/2)AxiosError: connect ECONNREFUSED 127.0.0.1:3065

    at Function.AxiosError.from (/home/ubuntu/react-nodebird/front/node_modules/axios/dist/node/axios.cjs:725:14)

    at RedirectableRequest.handleRequestError (/home/ubuntu/react-nodebird/front/node_modules/axios/dist/node/axios.cjs:2465:25)

    at RedirectableRequest.emit (events.js:400:28)

    at ClientRequest.eventHandlers.<computed> (/home/ubuntu/react-nodebird/front/node_modules/follow-redirects/index.js:14:24)

    at ClientRequest.emit (events.js:400:28)

    at Socket.socketErrorListener (_http_client.js:475:9)

    at Socket.emit (events.js:400:28)

    at emitErrorNT (internal/streams/destroy.js:106:8)

    at emitErrorCloseNT (internal/streams/destroy.js:74:3)

    at processTicksAndRejections (internal/process/task_queues.js:82:21) {

  port: 3065,

  address: '127.0.0.1',

  syscall: 'connect',

  code: 'ECONNREFUSED',

  errno: -111,

  config: {

    transitional: {

      silentJSONParsing: true,

      forcedJSONParsing: true,

      clarifyTimeoutError: false

    },

    adapter: [Function: httpAdapter],

    transformRequest: [ [Function: transformRequest] ],

    transformResponse: [ [Function: transformResponse] ],

    timeout: 0,

    xsrfCookieName: 'XSRF-TOKEN',

    xsrfHeaderName: 'X-XSRF-TOKEN',

    maxContentLength: -1,

    maxBodyLength: -1,

    env: { FormData: [Function], Blob: null },

    validateStatus: [Function: validateStatus],

    headers: AxiosHeaders {

      'User-Agent': 'axios/1.1.2',

      'Accept-Encoding': 'gzip, deflate, br',

      [Symbol(defaults)]: [Object]

    },

    baseURL: 'http://localhost:3065',

    withCredentials: true,

    method: 'get',

    url: '/user/1',

    data: undefined

  },

  request: <ref *1> Writable {

    _writableState: WritableState {

      objectMode: false,

      highWaterMark: 16384,

      finalCalled: false,

      needDrain: false,

      ending: false,

      ended: false,

      finished: false,

      destroyed: false,

      decodeStrings: true,

      defaultEncoding: 'utf8',

      length: 0,

      writing: false,

      corked: 0,

      sync: true,

      bufferProcessing: false,

      onwrite: [Function: bound onwrite],

      writecb: null,

      writelen: 0,

      afterWriteTickInfo: null,

      buffered: [],

      bufferedIndex: 0,

      allBuffers: true,

      allNoop: true,

      pendingcb: 0,

      prefinished: false,

      errorEmitted: false,

      emitClose: true,

      autoDestroy: true,

      errored: null,

      closed: false

    },

    _events: [Object: null prototype] {

      response: [Function: handleResponse],

      error: [Function: handleRequestError],

      socket: [Function: handleRequestSocket]

    },

    _eventsCount: 3,

    _maxListeners: undefined,

    _options: {

      maxRedirects: 21,

      maxBodyLength: Infinity,

      protocol: 'http:',

      path: '/user/1',

      method: 'GET',

      headers: [Object: null prototype],

      agents: [Object],

      auth: undefined,

      beforeRedirect: [Function: dispatchBeforeRedirect],

      beforeRedirects: [Object],

      hostname: 'localhost',

      port: '3065',

      agent: undefined,

      nativeProtocols: [Object],

      pathname: '/user/1'

    },

    _ended: true,

    _ending: true,

    _redirectCount: 0,

    _redirects: [],

    _requestBodyLength: 0,

    _requestBodyBuffers: [],

    _onNativeResponse: [Function (anonymous)],

    _currentRequest: ClientRequest {

      _events: [Object: null prototype],

      _eventsCount: 7,

      _maxListeners: undefined,

      outputData: [],

      outputSize: 0,

      writable: true,

      destroyed: false,

      _last: true,

      chunkedEncoding: false,

      shouldKeepAlive: false,

      _defaultKeepAlive: true,

      useChunkedEncodingByDefault: false,

      sendDate: false,

      _removedConnection: false,

      _removedContLen: false,

      _removedTE: false,

      _contentLength: 0,

      _hasBody: true,

      _trailer: '',

      finished: true,

      _headerSent: true,

      socket: [Socket],

      _header: 'GET /user/1 HTTP/1.1\r\n' +

        'Accept: application/json, text/plain, /\r\n' +

        'User-Agent: axios/1.1.2\r\n' +

        'Accept-Encoding: gzip, deflate, br\r\n' +

        'Host: localhost:3065\r\n' +

        'Connection: close\r\n' +

        '\r\n',

      _keepAliveTimeout: 0,

      _onPendingData: [Function: noopPendingOutput],

      agent: [Agent],

      socketPath: undefined,

      method: 'GET',

      maxHeaderSize: undefined,

      insecureHTTPParser: undefined,

      path: '/user/1',

      _ended: false,

      res: null,

      aborted: false,

      timeoutCb: null,

      upgradeOrConnect: false,

      parser: null,

      maxHeadersCount: null,

      reusedSocket: false,

      host: 'localhost',

      protocol: 'http:',

      _redirectable: [Circular *1],

      [Symbol(kCapture)]: false,

      [Symbol(kNeedDrain)]: false,

      [Symbol(corked)]: 0,

      [Symbol(kOutHeaders)]: [Object: null prototype]

    },

    _currentUrl: 'http://localhost:3065/user/1',

    [Symbol(kCapture)]: false

  },

  cause: Error: connect ECONNREFUSED 127.0.0.1:3065

      at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16) {

    errno: -111,

    code: 'ECONNREFUSED',

    syscall: 'connect',

    address: '127.0.0.1',

    port: 3065

  }

}

TypeError: Cannot read property 'data' of undefined

    at loadUser (/home/ubuntu/react-nodebird/front/.next/server/pages/_app.js:593:27)

    at loadUser.throw (<anonymous>)

    at next (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1071:32)

    at currCb (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1196:7)

    at /home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:347:5

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

The above error occurred in task loadUser

    created by takeLatest(LOAD_USER_REQUEST, loadUser)

    created by watchLoadUser

    created by userSaga

    created by rootSaga

Error occurred prerendering page "/about". Read more: https://err.sh/next.js/prerender-error

TypeError: Cannot read property 'data' of undefined

    at loadUser (/home/ubuntu/react-nodebird/front/.next/server/pages/_app.js:593:27)

    at loadUser.throw (<anonymous>)

    at next (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1071:32)

    at currCb (/home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:1196:7)

    at /home/ubuntu/react-nodebird/front/node_modules/@redux-saga/core/dist/redux-saga-core.prod.cjs.js:347:5

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

> Build error occurred

Error: Export encountered errors on following paths:

        /about

    at exportApp (/home/ubuntu/react-nodebird/front/node_modules/next/dist/export/index.js:25:1103)        

    at processTicksAndRejections (internal/process/task_queues.js:95:5)

    at async build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:39:69)

[    ] info  - Generating static pages (0/2)npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! react-nodebird-front@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-nodebird-front@1.0.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     /home/ubuntu/.npm/_logs/2022-11-25T14_45_34_539Z-debug.log

 

pages/about.js

import React from 'react';
import { useSelector } from 'react-redux';
import Head from 'next/head';
import { END } from 'redux-saga';

import { Avatar, Card } from 'antd';
import AppLayout from '../components/AppLayout';
import wrapper from '../store/configureStore';
import { LOAD_USER_REQUEST } from '../reducers/user';

const About = () => {
const { userInfo } = useSelector((state) => state.user);

return (
    <AppLayout>
    <Head>
        <title>ZeroCho | NodeBird</title>
    </Head>
    {userInfo
        ? (
        <Card
            actions={[
            <div key="twit">
                게시글
                <br />
                {userInfo.Posts}
            </div>,
            <div key="following">
                팔로잉
                <br />
                {userInfo.Followings}
            </div>,
            <div key="follower">
                팔로워
                <br />
                {userInfo.Followers}
            </div>,
            ]}
        >
            <Card.Meta
            avatar={<Avatar>{userInfo.nickname[0]}</Avatar>}
            title={userInfo.nickname}
            description="노드버드 매니아"
            />
        </Card>
        )
        : null}
    </AppLayout>
);
};

export const getStaticProps = wrapper.getStaticProps(async (context) => {
console.log('getStaticProps');
context.store.dispatch({
    type: LOAD_USER_REQUEST,
    data: 1,
});
context.store.dispatch(END);
await context.store.sagaTask.toPromise();
});

export default About;

 

혹시 여기 ServerSide로 바꿔야 하나요??

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

백엔드 서버를 안 켜신 건데요. 백엔드 서버가 같은 인스턴스에 들어있는건가요? 아니면 백엔드 서버 ip를 적으셔야 합니다. localhost:3065 대신에요. 백엔드가 켜져있어야 프론트 빌드가 가능합니다.

br님의 프로필 이미지
br

작성한 질문수

질문하기