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

Inflearn Community Q&A

허성진's profile image
허성진

asked

[Renewal] Creating NodeBird SNS with React

Installing Node on Ubuntu

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

Resolved

Written on

·

689

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;
nodejsreduxreactexpressNext.js

Answer 1

0

허성진님의 프로필 이미지
허성진
Questioner

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

zerocho님의 프로필 이미지
zerocho
Instructor

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

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

해서 보여주세요.

허성진님의 프로필 이미지
허성진
Questioner

/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 .

허성진님의 프로필 이미지
허성진
Questioner

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

zerocho님의 프로필 이미지
zerocho
Instructor

cp Applayout.js AppLayout.js 하세요

허성진님의 프로필 이미지
허성진
Questioner

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

zerocho님의 프로필 이미지
zerocho
Instructor

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

허성진님의 프로필 이미지
허성진
Questioner

감사합니다 해결했습니다

허성진's profile image
허성진

asked

Ask a question