-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
npm run build
21.07.30 19:13 작성 조회수 393
0
안녕하세요.
아래와 같은 에러가 발생하는데 이유를 모르겠습니다...
참고로 .next 폴더는 원래 있었습니다 ㅠㅠ (제가 언젠가 build 명령어를 친 건지 그냥 왜 있는지 잘 모르겠습니다.)
------------------------------------------------------------------------------------
(base) ~/profiler2/front master ±✚ npm run build
> front@1.0.0 build
> ANALYZE=true NODE_ENV=production next bulid
> No such directory exists as the project root: /Users/jeonsiwon/profiler2/front/bulid
----------------------------------------------------------------------------------------------
front/package.json
"scripts": {
"dev": "next -p 3060",
"build": "ANALYZE=true NODE_ENV=production next bulid"
},
답변을 작성해보세요.
1
d\/b
질문자2021.07.31
build 하다가 계속 아래같은 에러가 뜨는데, 제가 front/public 폴더 안에 png 파일을 넣고
next에서는 png 쓰려면 file-loader 를 해줘야 한다고 해서 설정을 해뒀거든요
혹시 그거 때문에 문제가 생겨서 오류가 뜨는 걸까요? You may need an appropriate~ 이 오류는 file-loader 설정을 안해주면 그렇다는데 다 되어 있는 거 같아서 원인을 못 찾겠네요
------------------
./public/tag.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
> Build error occurred
Error: > Build failed because of webpack errors
at build (/Users/jeonsiwon/profiler2/front/node_modules/next/dist/build/index.js:15:918)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
---------------------
front/webpack.config.json
module.exports = {
loaders: [
{
test: /\.(gif|svg|jpg|png)$/,
loader: 'file-loader',
},
],
};
front/next.config.js
const withImages = require('next-images');
module.exports = withImages();
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({
distDir: '.next',
webpack(config, { webpack }) {
const prod = process.env.NODE_ENV === 'production';
const plugins = [...config.plugins, new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/)];
return {
...config,
mode: prod ? 'production' : 'development',
devtool: prod ? 'hidden-source-map' : 'eval',
plugins,
};
},
});
0
d\/b
질문자2021.07.31
import Image from 'next/image'
function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar이거 말씀하시는 거 맞나요? 제가 근데 수업들으면서 next9 버전으로 진행했는데
저건 10버전 이상만 된다고 해서 file-loader 설치하고 front/webpack.config.json 설정했던 거거든요..
그냥 지금 넥스트 11버전으로 올리고
front/next.config.js 에서 아래 지우고
const withImages = require('next-images');
module.exports = withImages();
front/webpack.config.json 파일 그냥 전체 지우면 될까요?
Q2.
제가 저 오류가 나고 난다음에 npm run dev 다시 해봤는데
콘솔에 아래와 같은 오류가 다시 뜨는데요
Warning: Reverting webpack devtool to 'eval-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.
./public/tag.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
위에도 말씀드렸듯이 제가 next9 버전으로 했어서 IMAGE 태그를 안쓰고 file-loader 를 설치해서 썼었거든요
build 전에는 저런 문제가 없었는데 build 를 하고 난 다음부터 문제가 생기는 이유는
Warning: Reverting webpack devtool to 'eval-source-map'. 이 문구와 관련이 있는 걸까요?
Q3.
next에서는 webpack.config.js 말고 next.config.js 에 모든 설정을 해줘야 하나요?
webpack.config.js 랑 next.config.js 둘다 있어도 되는 건지 궁금합니다 ..
주말아침부터 질문이 너무 길어져 죄송합니다 🥲
조현영
지식공유자2021.07.31
next9애서는 Image 말고 그냥 img 쓰세요. next 11로 올리실거면 next.config.js만 쓰시고요.
tag.png는 어떻게 쓰고 계신건가요?
d\/b
질문자2021.07.31
import tag from '../../public/tag.png';
<img style={ImageStyle6} src={tag} alt="profile_image" />
이렇게 쓰고 있습니다!
조현영
지식공유자2021.07.31
네 import나 require로 하려면 file-loader가 필수입니다. 굳이 저렇게 할 이유가 없습니다. public 폴더에 있는 것은요.
d\/b
질문자2021.07.31
감사합니다. public에 있던 png 파일 back/uploads 폴더로 옮기고 해결했습니다.
<img style={ImageStyle6} src={`http://localhost:3065/kakao.png`} alt="profile_image" />
답변 2