inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

타입스크립트 입문 - 기초부터 실전까지

vue 에서 jquery 사용 문제

해결된 질문

692

devYo

작성한 질문수 3

1

안녕하세요.

vue 사용중에 있어 부득이하게 jquery 를 사용하려고 하는데요.

import $ from 'jquery';

import 'jqueryui';

import 'jquery-ui-touch-punch';

모바일까지 지원을 해야해서 jquery-ui-touch-punch 까지 사용을 해야 하는 상황입니다.

위와 같이 import를 해주면 코드툴에선 에러가 안뜨는데 브라우저 화면에서는 콘솔에러가 나타나고 있습니다.

아래와 같은 오류인데 혹시 해결책이 있을까요? 여러 방법으로 시도해 보고 있으나 해결이 안되서 혹시나 경험이 있으실지 해서 문의드립니다 ㅠㅠ

Uncaught ReferenceError: jQuery is not defined

 

javascript typescript es6

답변 2

0

캡틴판교

안녕하세요, 말씀하신 라이브러리들이 모두 NPM으로 설치하고 임포트 구문까지 지원되는지 확인부터 해보셔야 할 것 같아요 :)

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

Uncaught ReferenceError: jQuery is not defined 오류는 jQuery가 제대로 로드되지 않았을 때 발생합니다. Vue에서 jQuery를 사용하는 경우, 보통 webpack 같은 모듈 번들러를 사용하게 되는데요. 이를 통해 import된 jQuery가 전역 변수로 설정되지 않아 생기는 문제일 수 있습니다.

해결 방법으로는 몇 가지 시도해볼 수 있습니다:

  1. Webpack의 ProvidePlugin을 사용하여 jQuery를 전역 변수로 제공합니다. 이 방법을 사용하면 코드의 어느 곳에서도 $jQuery로 접근할 수 있게 됩니다. 예를 들면, webpack.config.js 파일에 다음과 같이 설정할 수 있습니다.
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }),
]
  1. 만약 위 방법이 작동하지 않는다면, import $ from 'jquery' 대신에 <script> 태그를 사용해 직접 HTML에 jQuery를 포함시킬 수 있습니다. 이 방법은 모듈 시스템 외부에서 jQuery를 로드하기 때문에 어떠한 설정 문제와도 관련이 없이 작동합니다.

  2. vue.config.js 파일(또는 해당 설정이 있는 파일)에서 jQuery 관련 설정을 확인하거나 조정해보세요. 특정한 경우에 추적하기 어려운 문제일 수 있으므로, 구성 파일에서의 설정 방법을 확인하는 것이 중요합니다.

위의 방법 중 하나를 시도해보시고 여전히 문제가 해결되지 않는다면, 추가적인 설정이나 다른 종속성 문제일 수 있으므로, 사용 중인 라이브러리의 문서를 참조하거나, 관련 커뮤니티에 도움을 요청해보시기를 권장합니다.

도움이 필요하시면 언제든 문의해 주세요.

TSLint

0

66

1

vscode eslint server 오류

0

75

1

안녕하세요. 기본타입- 튜플, 객체, 진위값 부분의 영상의 화면이 나오질 않습니다.

0

77

1

live server 설치 오류

1

368

2

강의 교안 pdf 는 따로 제공하지않나요?

0

284

2

npm i 설치 이유 문의

1

402

3

index.ts Delete &#x60;␍&#x60;eslintprettier/prettier 오류(빨간줄) 해결

2

289

3

TSLint 확장 프로그램은 현재 지원하지 않는다고 합니다.

1

499

2

강의 내용처럼 노란 밑줄이 작동하지 않아서 유사 질문들을 실행해보았는데요

1

542

1

section 3-1 JSdoc 타입이 추론되지 않아서 다음과 같이 수정했는데 이거 맞나요?

1

452

2

함수에 리턴 안됐다고 노란밑줄이 쳐져야하는데 없습니다

2

455

1

파일이 다른데 식별자가 중복되었다고 뜹니다.

1

443

2

빨간줄 에러 질문드립니다

1

488

2

마우스 갖다대면 리턴값 설명 나오는 거 질문드려요

1

356

2

js에서 @ts-check 적어도 체크하지 못하는 문제입니다

2

393

2

index.html에서 타입스크립트 콘솔 찍는 법 질문드립니다

1

564

2

섹션 1-3 추론 질문드립니다

1

354

2

왜 api쪽에는 왜 에러가 안나는지 궁금합니다.

1

323

2

const item1을 선언했을 때 타입을 선언해줘도 괜찮을까요?

1

390

1

전화번호부 타입선언

1

265

2

타입을 전역으로 분리

1

591

2

객체 선언 시 구분자는 쉼표, 세미콜론 모두 사용가능한건가요?

1

458

1

Git 관련 질문이 있습니다

1

668

2

js import export 관련 질문입니다!

1

354

2