SockJS 웹소켓 'global is not defined' ??

실시간 웹소켓 구현을 위하여 SockJS와 STOMP를 사용하였다.

우선, 세팅과정은 다음과 같았다.

공식문서에 따라 CDN 스크립트를 이용하여 SockJS를 불러왔다.

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>

웹소켓을 연결하는 파일에서 다음과 같이 사용한다.

    const client = new Client({
      webSocketFactory: () => **new SockJS(`${BASE_PATH}/ws`),**
      connectHeaders: connectHeaders,
      debug: (debugMessage) => {
        console.log('웹소켓 debug message : ', debugMessage);
      },

global is not defined

global이 없다 ??

웅 없다 ….

vite doesn't define a global field

global 객체에 의존하는 라이브러리여서 오류가 난다!

하지만 웹팩은 global 객체를 지원하고, WebSocket은 global 객체를 필요로 하므로 vite환경에선 에러를 발생시킨다!

그렇다면??

vite 설정파일에 window.global 객체를 만들어주면 된다.

export default defineConfig({
  plugins: [react(), mkcert()],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
  **define: {global: ;window'},**
});

또 다른 방법?

// init.js
window.global ||= window;

import './init.ts';

이제 정상 작동한다!!!

다만, ts 오류가 남아있다!

실행엔 문제가 발생하지 않았다 !! (husky lint검사에도 문제가 생기지 않음)

'SockJS' refers to a UMD global, but the current file is a module. Consider adding an import instead

SockJS를 import 하지 않고 cdn으로 사용하고 있는 문제가 남아있었다.

이건 단순, 실수였다~

위의 global 객체 설정을 안해둔 것을 sockjs 모듈의 문제인 줄 알고 cdn 스크립트로 계속 사용하고 있었다 보니 해결하지 못하고 있었다!

import SockJS from 'sockjs-client';

이렇게 import 하면 끝!

초반에 이것저것 시도해보다가 남겨둔 빈객체 때문에 한달동안 저 에러에 신경이 잔뜩 쓰였는데 해결해서 체증이 싹- 풀렸다 ㅎ