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

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;

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

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

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

해서 보여주세요.

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

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

cp Applayout.js AppLayout.js 하세요

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

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

감사합니다 해결했습니다

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

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

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