npm run build

2021-07-30T11:13:20.941Z

0

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

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

2021-07-31T01:45:15.100Z

0

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

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

0

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

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

이렇게 쓰고 있습니다!

0

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

0

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

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