개발 환경

Ruby 5.2.1
Rails 6.0.3.2

소개

rails 5 때는 gem을 사용하여 jQuery를 설치했지만,
rails 6부터 Webpacker를 사용하여 jQuery를 설치합니다.

Rails6에서 jQuery를 도입하는 방법
Introducing jQuery in Rails 6 Using Webpacker

이 근처의 기사를 참고로 도입해 갔습니다만, 이러한 에러가…
Uncaught TypeError: $ is not a function분명히 "$"가 작동하지 않는 것 같습니다.

덧붙여서 js 파일에 console.log('test'); 만 입력하면,
이렇게 javascript가 작동하기 때문에 js 파일을 읽지 않은 시스템
트러블이 아닌 것을 알 수 있다.

해결 방법

결론 : webpack 환경 파일을 수정하고 해결했습니다.

수정 전

config/webpack/environment.js__ (수정 전)

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',  # ここを修正します
        jQuery: 'jquery/src/jquery'
    })
)
module.exports = environment

수정 후

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',        # 修正完了　　　　　
        jQuery: 'jquery/src/jquery'
    })
)
module.exports = environment

마지막으로

이제 rails6 환경에서 js를 사용할 수 있습니다!

블로그에 이번 실시한 jQuery 도입 순서를 정리했으므로, 좋으면 봐 주세요.



nakau의 기술 블로그 ~ 프로그래밍 배우기 ~







Rails6 - jQuery 도입 방법