[Next.js] Module parse failed: Unexpected character '�' (1:0)

⨯ ./node_modules/fsevents/fsevents.node
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)

 

개발 환경 : Next.js 14.2 버전

                 MacOS

위와 같은 환경에서 opc ua 통신을 하기 위해 node-opcua-client 를 설치 후 opc ua 에 요청하니 위와 같은 에러가 나타났습니다.

구글을 검색해보니 엑셀 파일, 이미지 파일 입출력 다룰때 나타나는 등 여러 상황에서 나타나는것 같은데 근본적인 원인은 webpack 번들링 문제인것 같았습니다.

이런 문제를 Next.js 에서 어떻게 해결할 수있을까 관련 정보를 더 찾아보니 next.config.mjs 에 webpack 설정을 추가해주면 해결이 가능한듯 보입니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        net: false,
        tls: false,
      };
    }
    config.externals.push({
      fsevents: "require('fsevents')",
    });
    return config;
  },
  };

export default nextConfig;

<next.config.mjs 파일>

 

해당 내용을 추가한 후 다시 서버에 연결 요청을 해보니 이상 없이 잘 접속이 되네요.

Module parse failed 에러가 나타나는 분들은 위 코드를 적용해보시면 될 것 같습니다.