본문 바로가기
휴게소

public 폴더 안 axios import 에러

by Vintz 2021. 11. 1.
반응형

Vanilla js로 SPA를 만들면서 정말 많은 에러들을 겪고 있다. 그래도 점점 직접 부딪혀보는 실력이 늘고 있다.

 

구현 후에 에러가 뜨면 해결하는 재미가 쏠쏠하다.

 

그런데 이번엔 조금 찝찝하게 마무리하게 되었다.

 

서버쪽에서 잘 사용하던 axios가 왜 클라이언트에선 불러오지 못하는 것일까?

 

일단 중요한 부분만 표현한 프로젝트의 폴더 구조는 다음과 같다.

node_modules
public
    |-- main.js // 여기서 axios를 import 해와서 쓰고 싶다
    |-- index.html
    |-- style.css
src
    |--api
package-lock.json
package.json
server.js // axios 사용

main.js에서 import axios from 'axios';를 하면 다음과 같은 에러가 뜬다.

에러 문구

리액트에선 잘만 사용했는데..

 

아마 리액트는 프로젝트를 CRA로 하고 웹팩이 기본적으로 깔려있어서 알아서 번들링을 해줘서 그런 것이 아닐까 생각된다.

 

리액트는 많은 것들이 추상화 되어있고 내가 편하게 개발을 하고 있었구나 새삼 느끼게 되었다.

 

그런데 node_modules에 직접 파일 경로를 설정해도 다른 에러가 뜰 뿐이었다. 결국 웹팩을 배워서 빠르게 문제를 해결 하기엔 시간이 부족했고, 좀 더 중요한 것들을 하기위해 뒤로 미루게 되었다.

<script src="https://unpkg.com/axios/dist/axios.min.js" defer></script>

그렇다..그냥 index.html에 cdn으로 넣어주었다.(눈물)

const httpClient = axios.create({
  baseURL: 'http://localhost:3000/api',
});

 

그래도 시간을 더 쓰지 않고 해결을 하긴 했으니 나쁘진 않다..!

 

타입스크립트도 공부하고 싶고 웹팩도 궁금하고..😅

반응형

태그

,

댓글 2

  • 이명박 2022.07.03 23:31

    저도 이 문제에 부딪혔습니다. 해결하셨나요?
    답글

    • Vintz 2022.07.04 13:30 신고

      안녕하세요, 저는 그때 CDN으로 마무리 했습니다 ^^;;

      https://javascript.plainenglish.io/how-to-use-axios-in-vanilla-javascript-2dbf176e08d4

      위의 글이 도움이 되실 것 같아요.