작성
·
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
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:~$
이 상태인데 어떻게 해야하나요..ㅜ 무슨 브런치가 꼬인건지..모르겠네요
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 왜 이럴까여 ㅠㅠ
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 소문자로 되있어서 파일명 소문자로 바꾸고 다시 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 대신에요. 백엔드가 켜져있어야 프론트 빌드가 가능합니다.
github에 보면 ImagesZoom 안에 index.js가 없는데 처음부터 다시 해야 하나요??