inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

우분투에 노드 설치하기

npm run build 오류 해결이 안됩니다.

해결된 질문

839

허성진

작성한 질문수 5

1

ubuntu@ip-172-31-15-137:~/react-nodeBird/prepare/front$ npm run build > react-nodebird-front@1.0.0 build /home/ubuntu/react-nodeBird/prepare/front > 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/prepare/front/.babelrc info - Creating an optimized production build Failed to compile. ModuleNotFoundError: Module not found: Error: Can't resolve '../../components/AppLayout' in '/home/ubuntu/react-nodeBird/prepare/front/pages/post' > Build error occurred Error: > Build failed because of webpack errors at build (/home/ubuntu/react-nodeBird/prepare/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: `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/2021-09-13T07_35_54_295Z-debug.log
 
===========================================
 

오류를 보고 오류가있는곳은 이곳 두곳 같은데 아무리해도 해결이 되지않습니다.

// 레이아웃 파일

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Menu, Input, Row, Col } from 'antd';
import styled from 'styled-components';
import { useSelector } from 'react-redux';
import Router, { useRouter } from 'next/router';

import UserProfile from './UserProfile';
import LoginForm from './LoginForm';
import useInput from '../hooks/useInput';

// const Global = createGlobalStyle`
// .ant-row{
// margin-right: 0 !important;
// margin-left: 0 !important;
// }
// .ant-clo:first-child {
// padding-left:0 !important ;
// }
// .ant-col:last-child{
// padding-right: 0 !important;
// }
// `;

const SerachInput = styled(Input.Search)`
vertical-align: middle;
`;

const AppLayout = ({ children }) => {
const { me } = useSelector((state) => state.user);
const router = useRouter();

const [serachInput, onChangeSearchInput] = useInput('');

const onSearch = useCallback(() => {
Router.push(`/hashtag/${serachInput}`);
}, [serachInput]);

return (
<div>
<Menu mode="horizontal" selectedKeys={[router.pathname]}>
<Menu.Item key="home">
<Link href="/">
<a>노드버드</a>
</Link>
</Menu.Item>

<Menu.Item key="profile">
<Link href="/profile">
<a>프로필</a>
</Link>
</Menu.Item>

<Menu.Item key="search">
<SerachInput
enterButton
value={serachInput}
onChange={onChangeSearchInput}
onSearch={onSearch}
/>
</Menu.Item>
</Menu>
<Row gutter={8}>
<Col xs={24} md={6}>
{me ? <UserProfile /> : <LoginForm />}
</Col>
<Col xs={24} md={12}>
{children}
</Col>
<Col xs={24} md={6}>
<a href="https://www.zerocho.com" target="_blank" rel="noreferrer noopener">
zerocho
</a>
</Col>
</Row>
</div>
);
};

AppLayout.propTypes = {
children: PropTypes.node.isRequired,
};

export default AppLayout;

 

-----------------------------------------

// post/[id].js;
import React from 'react';
import { useRouter } from 'next/router';
import { END } from 'redux-saga';
import axios from 'axios';
import { useSelector } from 'react-redux';
import Head from 'next/head';

import wrapper from '../../store/configureStore';
import { LOAD_MY_INFO_REQUEST } from '../../reducers/user';
import { LOAD_POST_REQUEST } from '../../reducers/post';
import AppLayout from '../../components/AppLayout';
import PostCard from '../../components/PostCard';

const Post = () => {
const router = useRouter();
const { id } = router.query;
const { singlePost } = useSelector((state) => state.post);

// if (router.isFallback) {
// return <div>로딩중...</div>;
// }

return (
<AppLayout>
<Head>
<title>
{singlePost.User.nickname}
님의 글
</title>
<meta name="description" content={singlePost.content} />
<meta property="og:title" content={`${singlePost.User.nickname}님의 게시글`} />
<meta property="og:description" content={singlePost.content} />
<meta
property="og:image"
content={
singlePost.Images[0] ? singlePost.Images[0].src : 'https://nodebird.com/favicon.ico'
}
/>
<meta property="og:url" content={`https://nodebird.com/post/${id}`} />
</Head>
<PostCard post={singlePost} />
</AppLayout>
);
};

// export async function getStaticPaths() {
// return {
// paths: [
// { params: { id: '1' } },
// { params: { id: '2' } },
// { params: { id: '3' } },
// ],
// fallback: true,
// };
// }

export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req, params }) => {
const cookie = req ? req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
if (req && cookie) {
axios.defaults.headers.Cookie = cookie;
}
store.dispatch({
type: LOAD_MY_INFO_REQUEST,
});
store.dispatch({
type: LOAD_POST_REQUEST,
data: params.id,
});
store.dispatch(END);
await store.sagaTask.toPromise();
});

export default Post;

nodejs redux react express Next.js

답변 1

0

허성진

.next 폴더가 hgithub에 올라가있어도 오류가 발생하나요?

0

제로초(조현영)

상관 없습니다. 혹시 AppLayout.js가 대소문자가 다른가요?

cd /home/ubuntu/react-nodeBird/prepare/front/components
ls .

해서 보여주세요.

0

허성진

/home/ubuntu/react-nodeBird/prepare/front/components:

AnotherLayout.js  CommnetForm.js   FollowList.js  LoginForm.js         PostCard.js         PostForm.js    UserProfile.js

Applayout.js      FollowButton.js  ImagesZoom     NicknameEditForm.js  PostCardContent.js  PostImages.js

ubuntu@ip-172-31-15-137:~/react-nodeBird/prepare/front/components$ ls .

0

허성진

소문자로 되어있는데 어떻게 바꿀수 있을까요?

0

제로초(조현영)

cp Applayout.js AppLayout.js 하세요

0

허성진

useInput도 signup.js의 코드가 대소분자 구분이 안되어있는데 안에 git pull 을해도 해결이 되지않는데 어떻게 안에 내용도 바꿀수 있나요?

0

제로초(조현영)

윈도에서 하면 대소문자 문제가 많이 생깁니다. 기존 소문자 파일들을 지우고, 커밋한 후, 대문자 파일로 다시 만든 후 커밋하세요. 그 후에 다시 git pull 하세요.

0

허성진

감사합니다 해결했습니다

넥스트 버젼 질문

0

90

2

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

0

104

1

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

0

192

1

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

0

116

2

createGlobalStyle의 위치와 영향범위

0

102

2

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

0

97

2

vsc 에서 npm init 설치시 오류

0

157

2

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

0

166

1

화면 새로고침 문의

0

129

1

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

0

160

2

Next 14 사용해도 될까요?

0

455

1

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

0

359

1

url 오류 질문있습니다

0

214

1

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

0

391

1

sudo certbot --nginx 에러

0

1293

2

Minified React error 콘솔에러 (hydrate)

0

477

1

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

0

255

1

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

0

337

1

npm run build 에러

0

525

1

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

0

399

1

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

0

350

2

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

0

290

1

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

0

249

2

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

0

206

1