[Nuxt / axios] axios 사용법 / require() of es module 에러 해결 방법

axios 사용법

axios를 import 하고, async - await와 함께 axios.get을 사용했다.

<script>
import axios from 'axios';

export default {
  async created(){
    const response = await axios.get('http://localhost:8080/blog/happyhsryu/posts');
   console.log(response.data);
  }
}
</script>

axios base-url을 설정하는 방법 / import 없이 사용

npm install @nuxtjs/axios

nuxt.config.js

modules: [
    '@nuxtjs/axios',
  ],
  // Axios 설정
  axios: {
    baseURL: 'http://localhost:8080', // 기본 URL 설정
  },

export default {
  async created(){
    const response = await this.$axios.get('/blog/happyhsryu/posts');
    console.log(response);
  }
}

 

이렇게 하면 require() of ES Module 어쩌고 하는 에러가 뜬다.

 

문제 상황

---

그랬더니, 아래와 같은 에러가 떴다.

 

Nuxt.js와 같은 JavaScript 프레임워크는 ES Modules(ESM)을 사용하는데, Node.js 환경에서 CommonJS 모듈 시스템을 사용하는 경우, ES Module을 require로 불러오는데 제한이 있을 수 있다고 한다.

 

문제 해결 방법

---

이 에러는 nuxt 2.15.8 / node 16.19에서 발생하는 에러이고, 해결되지 않은 에러라고 한다.

 

axios 최신 릴리즈를 사용해 보라는 분도 있었지만, 잘 동작하지 않았다.

npm i axios@1.2.0-alpha.1

 

문제 해결

nuxt.config.js의 아래 코드를 추가해서 해결했다.

오래된 브라우저 환경인 경우 빌드 과정에서 지정한 모듈 'axios'가 트랜스파일링 된다고 한다.

build: {
    transpile: [({ isLegacy }) => isLegacy && 'axios']
  },