[Next js] Unexpected token u in JSON at position 0 in ally.js

에러발생

next@9.4.4 이후 버전 부터 ally.js 가 추가되며 다음과 같은 에러가 발생했다.

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at eval (platform.js?2a2e:14)
    at Object../node_modules/ally.js/util/platform.js (main.js?ts=1591861175888:1535)
    at __webpack_require__ (webpack.js?ts=1591861175888:863)
    at fn (webpack.js?ts=1591861175888:151)
    at eval (detect-focus.js?93d2:19)
    at Object../node_modules/ally.js/supports/detect-focus.js (main.js?ts=1591861175888:851)
    at __webpack_require__ (webpack.js?ts=1591861175888:863)
    at fn (webpack.js?ts=1591861175888:151)
    at eval (supports.js?750b:21)

현재 9.5.2 버전까지도 해당 에러가 발생하는 중이다.

원인

위 에러가 발생하는 조건은 다음과 같다.

1. Next js 사용
2. next 9.4.4 이후 버전 사용
3. 개발모드 실행

next 모듈 업데이트 과정에서 생긴 버그인데, 해당 파일의 에러 원인을 살펴보면,

// 참고 파일 : node_modules/ally.js/util/platform.js

var _platform2 = require('platform');

var _platform3 = _interopRequireDefault(_platform2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var platform = JSON.parse(JSON.stringify(_platform3.default));

_interopRequireDefault()를 통해 기본적인 플랫폼의 객체정보가 들어간 object를 올바르게 셋팅해주지 못하여, JSON 파싱과정에서 에러가 발생하는 것이다.

해결법

프레임워크 및 라이브러리 모듈의 문제이기 때문에 디버깅을 통한 코드 수정은 제한적고 비효율적이다. 해외 포럼에서 제시한 방법은 아래와 같다.

1. 9.3.x 버전으로 다운그레이드
2. NODE_PATH = . 로 수정

필자의 경우, 1번은 next js 모듈 업데이트의 이점을 얻지 못함이 더 큰 리스크라고 판단하여 패스하였고, 2번은 효과가 없었다. 이 방법은 해외 포럼에서도 안되는 개발자가 많았다.

결과적으로 다른 방법이 필요했다.

어차피 해당 이슈는 개발계에서만 발생한다. 때문에, json 파싱이 동작하도록 mockup 데이터만 넣으면 해결될 문제이다.

var platform = JSON.parse(
  JSON.stringify(
    _platform3.default || {
      description: 'Node.js 13.11.0 on Darwin 64-bit',
      layout: null,
      manufacturer: null,
      name: 'Node.js',
      prerelease: null,
      product: null,
      ua: null,
      version: '13.11.0',
      os: {
        architecture: 64,
        family: 'Darwin',
        version: null
      }
    }
  )
)

platform 변수에 위와 같은 mockup 데이터를 넣어주면, 정상동작 확인이 가능하다.

결론

react, vue 와 같이 webpack으로 빌드되는 프레임워크들은 외부 라이브러리에 대한 무거운 의존도가 단점으로 작용될 때가 있다. 그럼에도 높은 편의성 때문에 장점이 훨씬 많기에 아직까지 현 체제가 유지되는게 아닐까.

이러한 상황에서 문제의 효율적 해결 방법을 발견하고 실행하는 것은 결국, 경험을 통해 성장하는 개발자의 업무판단 능력이라고 생각한다.