Categories
Mastering Development

Rails 6 webpacker with cropperjs (or any javascript package)

I understand how to include the package using yarn. The problem I am running into is actually with any javascript package I have installed. But I am using cropperjs as a specific example.

yarn install cropperjs

installs the relevant files and can be found under /node_modules/cropperjs

import Cropper from "cropperjs"
or
require("cropperjs")

and I think it is adding the correct package to the webpack because when i do a search in the packaged json I see references to cropper in the application js file

/* harmony import */ var cropperjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! cropperjs */ "./node_modules/cropperjs/dist/cropper.js");
/* harmony import */ var cropperjs__WEBPACK_IMPORTED_MODULE_4___default =

/#PURE/webpack_require.n(cropperjs__WEBPACK_IMPORTED_MODULE_4__);

but i have no idea how to read it, so I’m assuming that the relevant js is being added to the global application.js file.

However, I cannot access Cropper in the debugger nor when calling to setup the objects.

I’ve tried reading as much documentation as I could, but I for the life of me cannot figure out how to access function calls in included or required javascript libraries via webpacker.

This was trivial to do in the asset pipeline, and I could revert to that, but it seems this is the direction we are supposed to be all moving towards, but even books like Modern Front End Development use TS and I’m a neophyte with js and its making things even more complicated.

Can someone please help me find an explanation that clarifies the correct way to add js packages for rails 6 using webpacker so that the added package is accessible globally?
I had the same problem using jQuery and cut and paste some code to make it accessible

import $ from 'jquery';
global.jQuery = $;
global.$ = $;

but honestly don’t understand how to do something similar for cropper or any other js package.

Leave a Reply

Your email address will not be published. Required fields are marked *