Skip to main content

How to use Javascript via Webpacker in Rails 6 Discussion

General • Asked by Chris Oliver

Alternatively to the webpacker way of require the flatpicker css in the packs/application.js you can do someting like:

/*
 *= require flatpicker/dist/flatpicker
 */

In your rails app/assets/stylesheets/application.css (or other) manifest file.


Chris, isn't it important to include the following line in the main entry pack:

import "babel-polyfill";

Without it, as far as I understand, Babel will not transpile the ES6 code and there should be issues with current browsers, right?


Hi Chris, regarding Yarn. Do we have to use Yarn in Rails 6 or can we use NPM and the package.json file? Is there an advantage to using Yarn vs NPM? Thanks!

You can use either but stick to one. Yarn I believe was created by facebook as an alternative to NPM due to some issues they had. Yarn is also faster I believe.

But stick to one as you might run into issues when (accidentally) using both. I use Yarn—for the speed.


Awesome, I got it all working on a standard form but the calendar doesn't display on an Ajax form. I assume my "_edit_info.js" needs to call flatpickr. Or what's the best way to go about this? Thanks

Figured it out:
document.getElementById("userinfodiv").innerHTML = "<%= j render 'editinfo' %>"

flatpickr("[data-behavior='flatpickr']",{
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
})


I have created a new Rails 6 (rc1) with the latets version of webpacker (4.0.6) and when I run my app I get the following error

decode.js:32 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (decode.js:32)
    at Module../node_modules/querystring-es3/decode.js (decode.js:88)
    at __webpack_require__ (bootstrap:19)
    at Object../node_modules/querystring-es3/index.js (index.js:3)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (client:6)
    at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:3035 (client:337)
    at __webpack_require__ (bootstrap:19)
    at Object.0 (log.js:47)
    at __webpack_require__ (bootstrap:19)

Anyone else have expirienced the same issue?

Cheers,
Sig


Do you recommend building a new app in Rails 6 rc1 today and upgrading to 6.0 when it releases or starting with 5.2.3? Will one be easier than the other to update?


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.