{"id":6508,"date":"2019-04-30T14:14:47","date_gmt":"2019-04-30T08:44:47","guid":{"rendered":"https:\/\/www.botreetechnologies.com\/blog\/?p=6508"},"modified":"2026-04-01T12:16:27","modified_gmt":"2026-04-01T06:46:27","slug":"introducing-jquery-in-rails-6-using-webpacker","status":"publish","type":"post","link":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/","title":{"rendered":"Introducing jQuery in Rails 6 Using Webpacker"},"content":{"rendered":"\n<p>As we all know that first release candidate of <a href=\"https:\/\/www.botreetechnologies.com\/rails-upgrade-service\" target=\"_blank\" rel=\"noreferrer noopener\">Rails 6<\/a> is out with exciting features and refinements in existing features. Today we will look into one of those features, which is webpacker. It is now by default in Rails 6 as a Javascript Compiler.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Webpacker?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.botreetechnologies.com\/blog\/rails-6-jquery-upgrade-with-webpacker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Webpacker is a gem<\/a> that allows packing assets using modern tools like yarn and writing the latest flavor of JavaScript via Babel.<\/p>\n\n\n\n<p>It makes it easy to use the JavaScript preprocessor and bundler Webpack to manage application-like JavaScript in Rails.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Webpack?<\/h2>\n\n\n\n<p>Webpack is a module bundler.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpack.jpg\" alt=\"What is Webpack?\" class=\"wp-image-13502\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpack.jpg 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpack-300x180.jpg 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpack-768x460.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>When we bundle webpack in a project, it traverses the imports, constructing a dependency graph of the project and then generates the output based on the configuration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What\u2019s Babel then?<\/h3>\n\n\n\n<p>Babel functions same as SASS compiler works for .sass and .scss files. It is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong><a href=\"https:\/\/www.botreetechnologies.com\/blog\/rails-6-jquery-upgrade-with-webpacker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Rails 6 jQuery upgrade with webpacker<\/a>! Read more.<\/strong><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">For Rails 6 &#8211; Webpacker is the Default Javascript Compiler<\/h3>\n\n\n\n<p>In the previous version of rails, we have to generate an application with <strong>&#8211; webpacker<\/strong> option for the integration of webpack. But now webpacker is the default and a good replacement of sprockets.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"379\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpacker-gem.png\" alt=\"Webpacker gem - rails webpacker jquery\" class=\"wp-image-13503\" title=\"rails jquery webpack\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpacker-gem.png 833w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpacker-gem-300x136.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Webpacker-gem-768x349.png 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><figcaption class=\"wp-element-caption\">Webpacker gem<\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Rails application generator installs Webpacker gem by default and also runs webpacker:install on its own.<\/li>\n\n\n\n<li>For Action Cable, its generators will create ES6 stubs rather than use CoffeeScript<\/li>\n\n\n\n<li>Active Storage, Action Cable, Turbolinks, and Rails-UJS is loaded by a new application.js pack in app\/javascript by default and listed as dependencies in the default package.json<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"261\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-1-2-1.png\" alt=\"output 1 - rails 6 jquery\" class=\"wp-image-13505\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-1-2-1.png 674w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-1-2-1-300x116.png 300w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>No JavaScript stubs will be created by default when using the scaffold generators any more.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Further Reading: <a href=\"https:\/\/medium.com\/@sanjaywrites\/action-mailbox-explained-why-how-when-af92d8708662\" target=\"_blank\" rel=\"noreferrer noopener\">Rails 6: Action Mailbox\u200a\u2014\u200aExplained. Why?How? When<\/a>?<\/strong><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Some new Defaults of Rails 6<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Javascript has been removed from app\/assets directory!<\/li>\n\n\n\n<li>Javascript moved to app\/javascript\/packs<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"623\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Defaults-of-Rails-6.png\" alt=\"Defaults of Rails 6 - jquery rails 6\" class=\"wp-image-13506\" title=\"rails webpacker\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Defaults-of-Rails-6.png 373w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/Defaults-of-Rails-6-180x300.png 180w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n<\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>javascript_include_tag is replaced by javascript_pack_tag<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-3-1024x401.png\" alt=\"output 2 using rails 6 webpacker\" class=\"wp-image-13507\" title=\"rails jquery\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-3-1024x401.png 1024w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-3-300x117.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-3-768x301.png 768w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-2-3.png 1137w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>No more using jquery-rails gem!!!<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Now, How we will use Jquery in Rails 6??<\/h2>\n\n\n\n<p>In our Rails application run below command to add jQuery.<\/p>\n\n\n\n<p><code>$ yarn add jquery<\/code><\/p>\n\n\n\n<p>It will save the dependency of jquery to our application.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Now to verify jquery is installed or not, check below files\n<ul class=\"wp-block-list\">\n<li>package.json =&gt; <code>\"jquery\": \"^3.3.1\",<\/code><\/li>\n\n\n\n<li>yarn.lock =&gt; <code>jquery@^3.3.1:<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Add below code in environment.js<\/li>\n<\/ol>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/NaiyaShah-BTC\/719aec0772e809cf571398765dbd06d3.js\"><\/script><\/p>\n\n\n\n<p>Now, our file looks like,<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"990\" height=\"382\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-2.png\" alt=\"output 3 using rails 6 javascript\" class=\"wp-image-13508\" title=\"jquery-rails\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-2.png 990w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-2-300x116.png 300w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/output-3-2-768x296.png 768w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/figure>\n<\/div>\n\n\n<p>The path \u2018jquery\/src\/jquery\u2019 indicates the jquery installed in node_modules directory having sub directory \u2018jquery\/src\u2019 and which contains jquery.js file there.<\/p>\n\n\n\n<p><strong>Require jquery in application.js file.<\/strong><\/p>\n\n\n\n<p><code>require('jquery')<\/code><\/p>\n\n\n\n<p><script src=\"https:\/\/gist.github.com\/NaiyaShah-BTC\/a85739dc899d560b3e64f9fb466e90e9.js\"><\/script><\/p>\n\n\n\n<p><strong>Voila!<\/strong> Now you should be able to use jquery in your Rails 6 application.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"150\" src=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/call-now-ruby-on-rails-web-development-1.png\" alt=\"Contact us for ROR Development\" class=\"wp-image-13510\" srcset=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/call-now-ruby-on-rails-web-development-1.png 700w, https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/12\/call-now-ruby-on-rails-web-development-1-300x64.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>At <a href=\"https:\/\/www.botreetechnologies.com\/\">BoTree Technologies<\/a>, we build enterprise applications with our Ruby on Rails team of 35+ engineers.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.botreetechnologies.com\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">Consulting is free<\/a> &#8211; let us help you grow!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As we all know that first release candidate of Rails&#8230;<\/p>\n","protected":false},"author":24,"featured_media":13499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,10],"tags":[],"class_list":["post-6508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ruby-on-rails","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introducing jQuery in Rails 6 Using Webpacker<\/title>\n<meta name=\"description\" content=\"Learn how to seamlessly integrate jQuery into Rails 6 using Webpacker. Enhance interactivity and dynamic functionality in your Rails projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing jQuery in Rails 6 Using Webpacker\" \/>\n<meta property=\"og:description\" content=\"Learn how to seamlessly integrate jQuery into Rails 6 using Webpacker. Enhance interactivity and dynamic functionality in your Rails projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/\" \/>\n<meta property=\"og:site_name\" content=\"BoTree Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BoTreeTechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-30T08:44:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-01T06:46:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Naiya Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:site\" content=\"@BoTreeTech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Naiya Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/\"},\"author\":{\"name\":\"Naiya Shah\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/68f8340395086b417feb15b21211bf8c\"},\"headline\":\"Introducing jQuery in Rails 6 Using Webpacker\",\"datePublished\":\"2019-04-30T08:44:47+00:00\",\"dateModified\":\"2026-04-01T06:46:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/\"},\"wordCount\":457,\"commentCount\":10,\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg\",\"articleSection\":[\"Ruby on Rails\",\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/\",\"name\":\"Introducing jQuery in Rails 6 Using Webpacker\",\"isPartOf\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg\",\"datePublished\":\"2019-04-30T08:44:47+00:00\",\"dateModified\":\"2026-04-01T06:46:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/68f8340395086b417feb15b21211bf8c\"},\"description\":\"Learn how to seamlessly integrate jQuery into Rails 6 using Webpacker. Enhance interactivity and dynamic functionality in your Rails projects.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"jQuery in Rails 6\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.botreetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing jQuery in Rails 6 Using Webpacker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/\",\"name\":\"BoTree Technologies\",\"description\":\"Committed to inspire generation.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/68f8340395086b417feb15b21211bf8c\",\"name\":\"Naiya Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/naiya-shah-150x150.png\",\"url\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/naiya-shah-150x150.png\",\"contentUrl\":\"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/naiya-shah-150x150.png\",\"caption\":\"Naiya Shah\"},\"description\":\"Naiya is a Ruby on Rails Developer. She developes applications with optimization and clean code with full Rspec coverage. She works in Javascript as well and she digs into anything new really quickly and comes up with a solution. Her leisure activities include travelling and watching movies.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing jQuery in Rails 6 Using Webpacker","description":"Learn how to seamlessly integrate jQuery into Rails 6 using Webpacker. Enhance interactivity and dynamic functionality in your Rails projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/","og_locale":"en_US","og_type":"article","og_title":"Introducing jQuery in Rails 6 Using Webpacker","og_description":"Learn how to seamlessly integrate jQuery into Rails 6 using Webpacker. Enhance interactivity and dynamic functionality in your Rails projects.","og_url":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/","og_site_name":"BoTree Technologies","article_publisher":"https:\/\/www.facebook.com\/BoTreeTechnologies\/","article_published_time":"2019-04-30T08:44:47+00:00","article_modified_time":"2026-04-01T06:46:27+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg","type":"image\/jpeg"}],"author":"Naiya Shah","twitter_card":"summary_large_image","twitter_creator":"@BoTreeTech","twitter_site":"@BoTreeTech","twitter_misc":{"Written by":"Naiya Shah","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#article","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/"},"author":{"name":"Naiya Shah","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/68f8340395086b417feb15b21211bf8c"},"headline":"Introducing jQuery in Rails 6 Using Webpacker","datePublished":"2019-04-30T08:44:47+00:00","dateModified":"2026-04-01T06:46:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/"},"wordCount":457,"commentCount":10,"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg","articleSection":["Ruby on Rails","Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/","url":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/","name":"Introducing jQuery in Rails 6 Using Webpacker","isPartOf":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage"},"image":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg","datePublished":"2019-04-30T08:44:47+00:00","dateModified":"2026-04-01T06:46:27+00:00","author":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/68f8340395086b417feb15b21211bf8c"},"description":"Learn how to seamlessly integrate jQuery into Rails 6 using Webpacker. Enhance interactivity and dynamic functionality in your Rails projects.","breadcrumb":{"@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#primaryimage","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2019\/04\/rails-6-jquery-webpacker.jpg","width":1920,"height":1280,"caption":"jQuery in Rails 6"},{"@type":"BreadcrumbList","@id":"https:\/\/www.botreetechnologies.com\/blog\/introducing-jquery-in-rails-6-using-webpacker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.botreetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing jQuery in Rails 6 Using Webpacker"}]},{"@type":"WebSite","@id":"https:\/\/www.botreetechnologies.com\/blog\/#website","url":"https:\/\/www.botreetechnologies.com\/blog\/","name":"BoTree Technologies","description":"Committed to inspire generation.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.botreetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.botreetechnologies.com\/blog\/#\/schema\/person\/68f8340395086b417feb15b21211bf8c","name":"Naiya Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/naiya-shah-150x150.png","url":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/naiya-shah-150x150.png","contentUrl":"https:\/\/www.botreetechnologies.com\/blog\/wp-content\/uploads\/2020\/10\/naiya-shah-150x150.png","caption":"Naiya Shah"},"description":"Naiya is a Ruby on Rails Developer. She developes applications with optimization and clean code with full Rspec coverage. She works in Javascript as well and she digs into anything new really quickly and comes up with a solution. Her leisure activities include travelling and watching movies."}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/6508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=6508"}],"version-history":[{"count":6,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/6508\/revisions"}],"predecessor-version":[{"id":20640,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/6508\/revisions\/20640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media\/13499"}],"wp:attachment":[{"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=6508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=6508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.botreetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=6508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}