사건의 발단

npm install을 평소에 하지 않다가 배포를 위해 npm install을 한 어느날
local환경에서는 잘 구동되다가 개발 서버 및 운영서버에서 갑자기 정상 작동되지 않고 init() is not function 에러가 발생

과정1

로컬환경에서는 재현할 수 없어 CONSOLE LOG 와 개발 서버에서의 디버깅을 통해 어떤 캘린더 라던지.. 날짜를 불러오는 무언가의 코드에서 에러가 발생하는것 확인

과정2

코드가 너무 방대하여 정확한 원인을 알 수 없었고, 특정 페이지에서만 발생하는 오류라고 판단하여 코드 문제로 단정짓고 오류가 날법한 부분의 코드를 계속 수정하였으나 로컬 환경에서는 잘 구동되는 이유가 뭘까에 대한 의문을 계속해서 가짐

그러다가 다른 페이지에서도 공통된 에러가 나는 것을 확인하고 코드의 문제가 아니라는 것을 확신하게됨

과정3

에러가 발생하는 페이지의 공통점을 추적하니 dayjs 라이브러리에서 발생하는것을 확인하였으며
dayjs 라이브러리의 init 함수가 존재하지 않는 것을 확인

실제로는 존재할텐데 로컬 환경에서 nginx 를 붙여서 테스트 해보면 동일한 에러가 발생하는 것으로보아
webpack 빌드시 init 함수가 유실되는 것으로 확인됨

nginx 로컬 환경에 붙이는 방법

nginx 아무 버전이나 다운로드
nginx.exe 실행
\Downloads\nginx-1.26.1\nginx-1.26.1\conf
경로의 nginx.conf

  location / {
            root   C:\Users\Desktop\work\front-end\프로젝트명\html;
            index  index.html index.htm;
        }

root를 build한 파일을 떨구는 파일 위치로 지정(프로젝트의 package.json의 build 명령어를 보면 유추 가능)

• 예시

&& mkdir -p dev && mv build dev/프로젝트명 && mv dev/프로젝트명/index.html dev/

nginx.conf

 server {
        listen       80;
        server_name  localhost;

80포트로 되어있기 때문에 화면 켜서 개발시 80 포트로 들어가면 nginx로 띄운 화면을 볼 수 있음

해결

1. 일단 package.json의 dayjs 라이브러리 버전 앞에 ^제거하여 자동 업데이트 방지
2. dayjs 라이브러리 모듈 내부에 esm 폴더가 존재하므로

alias: {
	dayjs: path.resolve(PATHS.node_module, 'dayjs/esm/index.js'),  // ESM build 파일을 이용
    }

위와같이 자동으로

import dayjs from "dayjs";

이렇게 사용할 때에 dayjs 모듈의 esm폴더의 index.js를 바라보도록 변경함
기존에는 dayjs/dayjs.min.js 를 바라보았음

commonjs와 esm 방식의 차이

commonjs

// dayjs.min.js
module.exports = {
  greet: function() {
    console.log('Hello from CommonJS');
  }
};

// app.js
const lib = require('./lib');
lib.greet(); // 출력: Hello from CommonJS

esm

// day.js
export function greet() {
  console.log('Hello from ESM');
}

// app.js
import { greet } from './lib.js';
greet(); // 출력: Hello from ESM

라이브러리에서 exports냐 export냐에 따라 방식이 다른데 우리가 모듈 내보내기 방식을 선택할 수 있게 두개가 만들어져있는 라이브러리도 있다.

참고

https://velog.io/@heisje/JavaScript-CJS-AMD-UMD-ESM-%EC%9D%B4%EB%9E%80#esm-ecmascript-module
https://tech.kakao.com/posts/605