How to use third party js in rails 6 using webpack?

Question

using ruby 2.7.1p83 and Rails 6.0.3.2 in rails project.

imported huebee inside the rails appliction webpack.

 yarn add huebee

imported its css and js files for the in the application.js and application.css files respectively:

for application.js
import 'huebee/huebee';
for application.css
@import "~huebee/huebee";

Now, if

 <input class="color-input" data-huebee='{ "notation": "hex", "saturations": 2 }'/>

is working fine and showing the drow box for colour selector:

but when I initialise the Huebee object inside js it given error as:

var hueb = new Huebee('.color-sample', {
    notation: 'hex',
    saturations: 2,
    staticOpen: true,
    hues: 6,

});

Uncaught ReferenceError: Huebee is not defined

please suggest the right approach to fix this issue thanks in advance.

my user.js file where Huebee is imported as:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "jquery";
import "jquery-ui";
import "popper.js";
import "bootstrap";
import 'owl.carousel';
import 'jquery.easing';
import "@fortawesome/fontawesome-free/js/all";
import "@fortawesome/fontawesome-free/css/all.css";
import '../stylesheets/user.scss';
import Huebee from 'huebee/huebee';
require.context('../images', true, /\.(png|jpe?g|svg)$/);

user.scss file:

@import '~bootstrap';
@import '~owl.carousel2/dist/assets/owl.theme.default';
@import '~owl.carousel2/dist/assets/owl.carousel';
@import "~huebee/huebee";

Huebee script for initialisation:

(function () {
    const element= document.querySelector('.color-sample');
    var hueb = new Huebee(element, {
        notation: 'hex',
        saturations: 2,
        staticOpen: true,
        hues: 6,
    });
})();

This gives following error:

In which JS file have you initialised the Huebee. If you are using the file other than application js. Then you need to attack Huebee class to global variable or window to access in other js files. — Ravi Teja Gadi
– Ravi Teja Gadi, Commented Aug 11, 2020 at 19:34
I have imported 'huebee/huebee' inside application.js file and initialize Hubee in the same file. — vidur punj
– vidur punj, Commented Aug 12, 2020 at 16:53
Updated the answer with user.js and user.scss file becuase application.js and application.scss file are update to some thing else. — vidur punj
– vidur punj, Commented Aug 17, 2020 at 4:13

vidur punj · Accepted Answer · 2020-08-17 04:43:11Z

2

You need to import Huebee class from the package.

In application.js

import Huebee from 'huebee/huebee';

In your js code, pass element as reference instead of directly passing .color-sample. And make sure the following code runs after document load.

const element= document.querySelector('.color-input');
var hueb = new Huebee(element, {
    notation: 'hex',
    saturations: 2,
    staticOpen: true,
    hues: 6,
});

edited Aug 17, 2020 at 4:43

vidur punj

6,0195 gold badges53 silver badges73 bronze badges

answered Aug 13, 2020 at 9:09

Ravi Teja Gadi

2,1852 gold badges10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

vidur punj Over a year ago

30:210 Uncaught ReferenceError: Huebee is not defined still same issue.

Ravi Teja Gadi Over a year ago

@vidurpunj I have replicated and it's working fine. Can you edit your question with complete code, so that we can understand the exact issue

vidur punj Over a year ago

Updated the answer with user.js and user.scss file becuase application.js and application.scss file are update to some thing else.

Ravi Teja Gadi Over a year ago

@vidurpunj where is Huebee initialisation? In which js

Ravi Teja Gadi Over a year ago

@vidurpunj is the initialisation in user.js? If not try moving to the user.js or declare it as window or global variable to make it accessible

|

vidur punj · Accepted Answer · 2020-08-17 05:14:29Z

0

user.js file:

import Huebee from 'huebee/huebee';
global.Huebee = Huebee;

The erb file which is using Huebee is as:

  <input class="color-input" data-huebee='{ "notation": "hex", "saturations": 2 }'/>

(function () {
    const element= document.querySelector('.color-input');
    var hueb = new Huebee(element, {
        notation: 'hex',
        saturations: 2,
        staticOpen: true,
        hues: 6,
    });
})();

answered Aug 17, 2020 at 5:14

vidur punj

6,0195 gold badges53 silver badges73 bronze badges

Collectives™ on Stack Overflow

How to use third party js in rails 6 using webpack?

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related