🚨'React' refers to a UMD global, but the current file is a module.🚨

❗문제 내용

직역하자면 'React'는 UMD global을 참조하지만, 현재 파일은 모듈이라는 뜻.

⚒️ 문제 해결

빠르고 간단하게

import React from 'react';

위 코드를 코드 최상단에 추가한다.

느리지만 정확하게

문제를 정확하게 해결하기 위해서는 먼저 자바스크립트 모듈 시스템에 대해 이해할 필요가 있다.

1. CommonJS

   • 브라우저에서만 동작하는 JavaScript를 서버나 데스크톱 애플리케이션에서도 동작하게(즉, Common하게 동작하게!)끔 만들기 위한 JavaScript의 범용적인 스펙 정의
   • 모듈을 가져와서 쓸 때는 require, 모듈을 내보낼 때는 module.exports 사용
   • 동기적으로 동작한다는 특징이 있다!

2. AMD(Asynchronous Module Definition)

   • CommonJS는 모든 파일이 로컬 디스크에 있어 필요할 때 바로 불러올 수 있는 상황을 전제로 함 (동기적인 동작 가능)
   • But, 브라우저에서는 CommonJS의 이런 방식이 필요한 모듈을 모두 다운로드할 때까지 동작하지 않는다는 치명적인 단점으로 다가온다!
   • AMD는 비동기 상황에서도 자바스크립트 모듈을 사용하기 위해 나온 시스템
   • define으로 모듈을 추출하고, require로 사용 가능

3. UMD(Universal Module Definition)

   • CommonJS와 AMD는 이런 차이를 갖고 있기 때문에 서로 호환되지 않음
   • 이러한 호환성 문제를 해결하기 위해 나온 게 UMD!
   • UMD는 '모듈 로더를 확인하는 즉시 실행 함수'와 '모듈을 생성하는 익명 함수', 이렇게 두 부분으로 구성됨
   • UMD 공식 문서 코드는 아래와 같음

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

4. ESM(ECMAScript Module)

   • ES6에 추가된 자바스크립트 모듈 기능
   • 모듈을 가져올 때 import, 내보낼 때 export 사용

즉, 문제는 Babel이나 Webpack 등등과 프로젝트에서 사용하고 있는 모듈 시스템과 설정 파일의 내용이 달라서 생기는 문제였던 것 같다.
codesandbox에서 미리 세팅된 보일러 플레이트를 사용해서 내부 세팅까지는 모르겠지만, 내가 추측한 바는 다음과 같다. 프로젝트에 설치된 패키지 중에 react-scripts가 있었고, 이는 CRA를 사용할 때 자동으로 패키지라고 한다. 그리고 CRA는 Babel을 사용하는데, 프로젝트에서는 Webpack 설정 또한 세팅이 되어 있어서 이 둘이 충돌을 일으키는 게 아닐까 싶었다.

import React from 'react'

결국 가장 간단한 해결 방법은 코드 상단에 위 한 줄을 추가하는 것이다. 이렇게 하기 싫다면 충돌을 일으키는 설정을 찾아 ESM으로 통일시켜주면 되겠다!

+) 참고

• Webpack : 참조 관계에 있는 모듈들을 하나로 모아주는 모듈 번들러
• Loader : Webpack은 모든 파일을 모듈로 관리하나, 자바스크립트밖에 모르기 때문에 이미지, 폰트 등의 파일을 Webpack이 이해할 수 있는 형태로 변환

🙇‍♂️ 참고자료

• 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
• 모듈 시스템(CommonJS, AMD, UMD, ES6)
• [JavaScript] CJS, AMD, UMD, ESM