인프런 커뮤니티 질문&답변
작성한 질문수
vue 에서 jquery 사용 문제
해결된 질문
작성
·
407
1
안녕하세요.
vue 사용중에 있어 부득이하게 jquery 를 사용하려고 하는데요.
import $ from 'jquery';
import 'jqueryui';
import 'jquery-ui-touch-punch';
모바일까지 지원을 해야해서 jquery-ui-touch-punch 까지 사용을 해야 하는 상황입니다.
위와 같이 import를 해주면 코드툴에선 에러가 안뜨는데 브라우저 화면에서는 콘솔에러가 나타나고 있습니다.
아래와 같은 오류인데 혹시 해결책이 있을까요? 여러 방법으로 시도해 보고 있으나 해결이 안되서 혹시나 경험이 있으실지 해서 문의드립니다 ㅠㅠ
Uncaught ReferenceError: jQuery is not defined
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다.
Uncaught ReferenceError: jQuery is not defined 오류는 jQuery가 제대로 로드되지 않았을 때 발생합니다. Vue에서 jQuery를 사용하는 경우, 보통 webpack 같은 모듈 번들러를 사용하게 되는데요. 이를 통해 import된 jQuery가 전역 변수로 설정되지 않아 생기는 문제일 수 있습니다.
해결 방법으로는 몇 가지 시도해볼 수 있습니다:
- Webpack의 ProvidePlugin을 사용하여 jQuery를 전역 변수로 제공합니다. 이 방법을 사용하면 코드의 어느 곳에서도
$나jQuery로 접근할 수 있게 됩니다. 예를 들면, webpack.config.js 파일에 다음과 같이 설정할 수 있습니다.
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
]
만약 위 방법이 작동하지 않는다면,
import $ from 'jquery'대신에<script>태그를 사용해 직접 HTML에 jQuery를 포함시킬 수 있습니다. 이 방법은 모듈 시스템 외부에서 jQuery를 로드하기 때문에 어떠한 설정 문제와도 관련이 없이 작동합니다.vue.config.js파일(또는 해당 설정이 있는 파일)에서 jQuery 관련 설정을 확인하거나 조정해보세요. 특정한 경우에 추적하기 어려운 문제일 수 있으므로, 구성 파일에서의 설정 방법을 확인하는 것이 중요합니다.
위의 방법 중 하나를 시도해보시고 여전히 문제가 해결되지 않는다면, 추가적인 설정이나 다른 종속성 문제일 수 있으므로, 사용 중인 라이브러리의 문서를 참조하거나, 관련 커뮤니티에 도움을 요청해보시기를 권장합니다.
도움이 필요하시면 언제든 문의해 주세요.