CODEWITHSUNDEEP
javascriptruby-on-railswebpack
goldie
goldie

Reputation: 77

Can't find application.js with javascript_pack_tag(Webpacker)

I have installed Webpacker gem in my Rails app and don't really know how to include app.js file into app/javascript/packs folder.

I put 

<%= javascript_pack_tag 'application' %>

into my application.html.erb layout and 

//= require jquery/dist/jquery
//= require jquery-ui/ui/jquery-ui
//= require jquery-ujs

into it.

After all in some view(ex. index.html.erb) I have some jQuery in script tag:

<script>

  jQuery(document).ready(function(){...

And when I refresh page and look in console I get:

GET http://localhost:3000/packs/application-5e96d8f9533313f79af6.js net::ERR_ABORTED 500 (Internal Server Error)

and 

Uncaught ReferenceError: jQuery is not defined

The question is why javascript_pack_tag transforms application.js into application-5e96d8f9533313f79af6.js(with these numbers) in HTML and from where is that coming?

Also I'm mentioning that I'm transforming my app from Bower to Webpack(within Webpacker gem) and not really sure how to include my Bower components to be used with Webpacker.

Any reference would be appreciated

Upvotes: 2

Views: 2203

Answers (1)

Vasfed
Vasfed

Reputation: 18454

Those numbers in pack name are normal, it's file digest, sprockets does this too in production (it's used for cache busting and ensuring correct code on client).

//= require directives are for sprockets (aka asset pipeline), in webpacker you should use javascript imports (or use webpack.ProvidePlugin in config so that jQuery identifier will be loaded automatically upon use).

Also you have to switch to npm dependencies - yarn add jquery jquery-ui jquery-ujs

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery'",
        "window.$": "jquery"
    })
  ]

and use individual imports (in each file import what is used there like there're no other files, webpack will deal with duplicates):

import $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/selectable.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/selectable'; // and so on
import {} from 'jquery-ujs'

Upvotes: 3

Related Questions