Uncaught ReferenceError: jstz is not defined

Question

Hi am developing an application with Rails 6 using webpacker, am getting below javascript error.

    Uncaught ReferenceError: jstz is not defined
    at HTMLDocument.<anonymous> ((index):62)
    at fire (jquery.js:975)
    at Object.fireWith [as resolveWith] (jquery.js:1085)
    at Function.ready (jquery.js:407)
    at HTMLDocument.DOMContentLoaded (jquery.js:84)

I see webpacker compiled successfully

Entrypoint application = js/application-7e55ed0e528c94e39f58.js js/application-7e55ed0e528c94e39f58.js.map
Entrypoint cookie = js/cookie-f1267dd65b07bdb515fe.js js/cookie-f1267dd65b07bdb515fe.js.map
Entrypoint jquery = js/jquery-08b07c2f819304da36bb.js js/jquery-08b07c2f819304da36bb.js.map
Entrypoint jstz = js/jstz-e4a49c2bcb34d7327712.js js/jstz-e4a49c2bcb34d7327712.js.map
Entrypoint require = js/require-bbf43dd046c0adca977d.js js/require-bbf43dd046c0adca977d.js.map

[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/packs/application.js] 1.46 KiB {application} [built]
[./app/javascript/packs/cookie.js] 737 bytes {cookie} [built]
[./app/javascript/packs/jquery.js] 289 KiB {jquery} [built]
[./app/javascript/packs/jstz.min.js] 5.93 KiB {jstz} [built]
[./app/javascript/packs/require.js] 25.8 KiB {require} [built]

am using jstz in my view file like below

<%= javascript_pack_tag 'jstz'  %>
<%= javascript_tag do -%>
jQuery(document).ready(function () {
  jQuery('#user_name').focus();
  jQuery('#user_time_zone').val(jstz.determine().name());
});

<% end -%>

please help me to resolve this issue am struggling for a long time, it really consumes more time.

Answer 1

Instead of include jstz I think better if you let yarn manga plugin for you. To get this work, you should write script in a file and then include into view:

// file something.js
const jstz = require('packs/jstz.min.js');
$(document).ready(function () {
  $('#user_name').focus();
  $('#user_time_zone').val(jstz.determine().name());
});

in view:

<%= javascript_pack_tag 'something'  %>

or you can make jstz can call global by adding into your appliation.js:

const jstz = require('packs/jstz.min.js');
window.jstz = jstz

in view:

<%= javascript_tag do -%>
jQuery(document).ready(function () {
  jQuery('#user_name').focus();
  jQuery('#user_time_zone').val(jstz.determine().name());
});

<% end -%>

Answer 2

This can also be accomplished with the Luxon package:

1. Install with yarn add luxon

2. Add import {DateTime} from "luxon"; to application.js (if you're using Webpacker in Rails)

3. Create a Javascript variable to find the local time using DateTime:

   let tz = DateTime.local().toFormat('z')

The "z" format will display the same string as the jstz.determine() method