npm run build

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

작성

489

안녕하세요.

아래와 같은 에러가 발생하는데 이유를 모르겠습니다...

참고로 .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"
},

redux react express nodejs Next.js

답변 2

제로초(조현영)

지식공유자

bulid 오타입니다. build입니다.

$d\/b님의 프로필 이미지$

d\/b

질문자

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,
    };
  },
});

제로초(조현영)

지식공유자

front/public에 넣으면 file-loader 필요 없습니다. 설정 다시 돌리세요. 그냥 src="/파일명" 하면 불러와집니다.

$d\/b님의 프로필 이미지$

d\/b

질문자

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 둘다 있어도 되는 건지 궁금합니다 ..

주말아침부터 질문이 너무 길어져 죄송합니다 🥲

제로초(조현영)

지식공유자

next9애서는 Image 말고 그냥 img 쓰세요. next 11로 올리실거면 next.config.js만 쓰시고요.

tag.png는 어떻게 쓰고 계신건가요?

$d\/b님의 프로필 이미지$

d\/b

질문자

import tag from '../../public/tag.png';

<img style={ImageStyle6} src={tag} alt="profile_image" />

이렇게 쓰고 있습니다!

제로초(조현영)

지식공유자

네 import나 require로 하려면 file-loader가 필수입니다. 굳이 저렇게 할 이유가 없습니다. public 폴더에 있는 것은요.

$d\/b님의 프로필 이미지$

d\/b

질문자

감사합니다. public에 있던 png 파일 back/uploads 폴더로 옮기고 해결했습니다.

<img style={ImageStyle6} src={`http://localhost:3065/kakao.png`} alt="profile_image" />

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

npm run build

Q2.