[vue.js] require is not defined

Vite는 기본적으로 ES 모듈 시스템을 사용하며, CommonJS의 require 문법을 지원하지 않습니다.

대신, ES 모듈의 import 문법을 사용해야 합니다.

하지만 일부 라이브러리나 코드베이스에서 require를 계속 사용해야 하는 경우에는

플러그인 사용으로 대체할 수 있습니다. 이 포스팅에선 import 문법 대체 방법만 다룹니다.

 

 

1. 개발환경 : Vue3 + Quasar
2. Build 도구 : Vite 

 

기존 require 사용하던 예시

const multilingual = require('multilingual');

 

import 문법으로 변경 예시

import * as multilingual from 'multilingual';

---

import 문법 사용법

// 다른 모듈에서 변수 또는 함수 가져오기
import { someVariable, someFunction } from './anotherModule';

// 해당 모듈에서 default로 내보낸 것 가져오기
import defaultExport from './anotherModule';

// 해당 모듈에서 모두 가져오기
import * as allExports from './anotherModule';

// 라이브러리 가져오기
import axios from 'axios';

• '{}'중괄호를 사용하여 특정 변수 또는 함수를 가져옵니다.
• 'default'로 내보낸 것은 중괄호 없이 바로 가져올 수 있습니다.
• '* as' 를 사용하여 해당 모듈에서 모든 것을 가져올 수 있습니다.

 

또한, 'import' 문은 최상위 레벨에서만 사용할 수 있습니다. 함수 내부나 조건문, 반복문 안에서는 사용할 수 없습니다.

 

만약 CommonJS 스타일의 모듈을 사용하는 경우 (예: Node.js 환경), 'require' 문법을 사용할 수 있지만,

Vite와 같은 모던 빌드 도구에서는 주로 ES 모듈을 사용하는 것 이 권장됩니다.