If you are a web developer working some JavaScripts in a project and suddenly things stopped work you may think it was the few lines of updates you made. Interestingly that was not the case for a project I was working on.

Background

The code worked well on development. Once I pushed the updates to staging I noticed that the admin side of things didn't work. When I checked it had Uncaught ReferenceError: Lqb is not defined. I didn't expect an error to happen because it worked in the development environment (Ruby on Rails).

Thinking it might be some code I might have copied, I did a full search for Lqb, including in node_modules folder, but no result came through. I did a Google search and to my surprise found nothing.

Then it hit me that I made an update last Friday including Clipboard. It was simply to copy generated markdown code to the browser. It was as simple as things could get and it "worked on my machine" ™️ so I didn't give it much of a though. I unloaded the JavaScript and made a deploy to staging and the bug was gone.

Problematic Code

I am in a Ruby on Rails project using WebPacker. I did a yarn add clipboard which included Clipboard JS v2.0.8. Then I had some thing like this:

// app/javascript/packs/application.js
import "clipboard/dist/clipboard";

This resulted an error

application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15 Uncaught ReferenceError: Lqb is not defined
    at p (application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15)
    at d (application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15)
    at application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15
    at Object.134 (application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15)
    at i (application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15)
    at application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:16
    at application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:16
    at application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15
    at application-4b126d84b43fb89dc1b908c0e8a663f00eefe9f17d48b7dded0223843ccf1d12.js:15

Fix

Using the compressed version avoided the error.

// app/packs/application.js
import "clipboard/dist/clipboard.min";

Conclusion

I believe Webpackee encountered an issue when compressing. The reason why I say this is because there was no mention of Lqb in any file in the project folder. It also works fine in development where there is no asset compilation. This may not even be a new issue.

The project I am working is a Ruby on Rails 5.1. It used Rails Assets project to install assets but when I tried it recently the search was not working. So I installed and configured Webpacker in it. It is possible I might have an issue with my setup or it is an old bug since I am having to use an old version of webpacker.