How do I import Progressbar.js in Laravel?

Question

I'm trying to use this progress bar in Laravel 5.6. According to Progress.js docs, you do the following:

var ProgressBar = require('progressbar.js')

In the default assets/js/bootstrap.js file I have:

window._ = require('lodash');
window.Popper = require('popper.js').default;
window.ProgressBar = require('progressbar.js');

But I still get progressbar is undefined when I attempt to use it in the front end. Lodash & Popper are accessible.

When I hover over window.ProgressBar = require('progressbar.js'); in VCS, it says:

Could not find a declaration file for module 'progressbar.js'.

'/Users/proevilz/sites/stream-raiders/node_modules/progressbar.js/src/main.js' implicitly has an 'any' type.

Try npm install @types/progressbar.js if it exists or add a new declaration (.d.ts) file containing declare module 'progressbar.js';

I did what it suggested but got an error from NPM stating there is no types.

The main.js contains:

module.exports = {
    // Higher level API, different shaped progress bars
    Line: require('./line'),
    Circle: require('./circle'),
    SemiCircle: require('./semicircle'),

    // Lower level API to use any SVG path
    Path: require('./path'),

    // Base-class for creating new custom shapes
    // to be in line with the API of built-in shapes
    // Undocumented.
    Shape: require('./shape'),

    // Internal utils, undocumented.
    utils: require('./utils')
};

What am I doing wrong exactly? Can I load this package in without explicit referencing the progressbar.js file in my HTML file?

Answer 1

After helping a bit more on a stream, it looks like the issue was that it was not saved as a dev dependency, but instead as a regular dependency. Moving it over in the package.json file and running npm install was the fix.