[Eric's JS] Build error {}.DEBUG = namespaces; 에러 해결 방법 ( #redocusaurus , #docusaurus )

회사에서 Docusaurus 로 회사 문서를 관리한다.

이때 사용되는 Pakage 중 하나가 Redocusaurus 를 이용해서 REST API 문서를 만들고 있었는데,
하단의 에러가 나면서 자꾸 build가 안되었다.

Error

  

    
    
    
    
  
[ERROR] Error: Unable to build website for locale en.
    at tryToBuildLocale (/eric/node_modules/@docusaurus/core/lib/commands/build.js:54:19)
    at async /eric/node_modules/@docusaurus/core/lib/commands/build.js:65:9
    at async mapAsyncSequential (/eric/node_modules/@docusaurus/utils/lib/jsUtils.js:20:24)
    at async Command.build (/eric/node_modules/@docusaurus/core/lib/commands/build.js:63:5) {
[cause]: server.bundle.js:210767
                {}.DEBUG = namespaces;
                  ^

  SyntaxError: Unexpected token '.'
      at new Script (node:vm:93:7)
      at module.exports (/eric/node_modules/eval/eval.js:83:18)

Solution

  

    
    
    
    
  
plugins: [
    ...
    async function customPlugin(context, opts) {
      return {
        name: 'custom-plugin',
        configureWebpack(config, isServer, utils, content) {
          // Modify internal webpack config. If returned value is an Object, it
          // will be merged into the final config using webpack-merge;
          // If the returned value is a function, it will receive the config as the 1st argument and an isServer flag as the 2nd argument.
          return {
            plugins: [
              new webpack.DefinePlugin({
                // IMPORTANT: To fix debug library‘s bug
                // {}.DEBUG = namespaces; // SyntaxError: Unexpected token '.'
                'process.env.DEBUG': 'process.env.DEBUG',
              })
            ]
          }
        },
      }
    }
  ],

---

해당 에러는 Docusaurus 프로젝트를 빌드할 때 발생하는 문제로, 특히 server.bundle.js 파일의 {}.DEBUG = namespaces; 줄에서 구문 오류(SyntaxError: Unexpected token '.')가 발생한것으로 보였다.
이 오류는 자바스크립트 문법 오류로 보였으며, 객체 리터럴({})에 직접적으로 속성을 추가하려고 할 때 발생한것으로 보인다.

해결 방법으로 제시된 코드는 Docusaurus의 플러그인 설정을 수정하여 Webpack의 설정을 변경하는 방법이다.
구체적으로 webpack.DefinePlugin을 사용하여 process.env.DEBUG 환경 변수를 정의하고, 이 방법을 통해 디버그 라이브러리의 버그를 우회하였다.

에러 발생 원인

{}.DEBUG = namespaces;는 자바스크립트에서 유효한 문법이 아니다.
객체 리터럴 {}에 속성을 바로 할당하는 것은 허용되지 않으며, 이로 인해 구문 오류가 발생한것으로 보인다.

해결 방법 설명

제시된 해결 방법은 Webpack 설정을 수정하여 이 문제를 우회하였다.
webpack.DefinePlugin을 사용하여 process.env.DEBUG를 정의하는 방식으로,
디버그 라이브러리에서 발생하는 구문 오류를 피할 수 있었다.

1. customPlugin 함수 추가: Docusaurus 설정 파일에 새로운 커스텀 플러그인을 추가

2. configureWebpack 함수 사용: 이 플러그인은 configureWebpack 함수를 통해 Webpack 설정을 수정

3. webpack.DefinePlugin 설정:

-new webpack.DefinePlugin을 사용하여 환경 변수를 정의.
-'process.env.DEBUG': 'process.env.DEBUG'로 설정하여, 기존의 {}.DEBUG = namespaces; 코드를 대체하였다.

디버그 라이브러리의 DEBUG 설정을 환경 변수로 처리하도록 하여 구문 오류를 회피하였다.

이렇게 수정하면, {}.DEBUG = namespaces; 구문 오류를 피할 수 있고, 디버그 설정을 정상적으로 적용할 수 있었다.

이 해결 방법은 자바스크립트의 문법 오류를 우회하고, Docusaurus 프로젝트가 정상적으로 빌드될 수 있도록 하여서 결국 빌드하였다.

참고 문서

• https://github.com/rohit-gohri/redocusaurus/issues/236
• https://github.com/serverless-nextjs/serverless-next.js/issues/866