ReferenceError: ProgressBar is not defined - Build a Video Game Aggregator

Hello,

I am having an issue with progressbar implementation. I am not sure what reference is being missed or in what order the livewire scripts are to be loaded!

The old method of importing a library was require('progressbar.js'); where as I am using the new laravel example method import ProgressBar from 'progressbar.js';

I will appreciate some tips on how to resolve the progressbar not defined error.

Original Source: https://github.com/drehimself/laracasts-videogames

/resources/js/app.js

import './bootstrap';

/resources/js/bootstrap.js

import ProgressBar from 'progressbar.js';
window.ProgressBar = ProgressBar;

/resources/views/livewire/popular-games.blade.php

   @push('scripts')
        @include('_rating', [
            'event' => 'popularGameWithRatingAdded'
        ])
    @endpush

/resources/views/_rating.blade.php

  @if ($event) window.livewire.on('{{ $event }}', params => { @endif

  @if ($event)
      var progressBarContainer = document.getElementById(params.slug)
  @else
      var progressBarContainer = document.getElementById('{{ $slug }}')
  @endif

  var bar = new ProgressBar.Circle(progressBarContainer, {
    color: 'white',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 3,
    trailColor: '#4A5568',
    easing: 'easeInOut',
    duration: 2500,
    text: {
      autoStyleContainer: false
    },
    from: { color: '#48BB78', width: 6 },
    to: { color: '#48BB78', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('0%');
      } else {
        circle.setText(value+'%');
      }

    }
  });

  @if ($event)
      bar.animate(params.rating);
  @else
      bar.animate({{ $rating }} / 100);
  @endif

  @if ($event) }) @endif

/resources/views/layouts/app.blade.php ``html

before end of body tag

        @stack('scripts')
        @livewireScripts
        @stack('modals')

Rendered page Console Error message

ReferenceError: ProgressBar is not defined

Error at line

var bar = new ProgressBar.Circle(progressBarContainer, {

LaryAI

1 year ago

Level 58

The error ReferenceError: ProgressBar is not defined typically indicates that the ProgressBar library is not being loaded correctly or is not available in the scope where it is being used. Based on the provided code snippets, it looks like you are trying to import ProgressBar in your bootstrap.js file and then use it in your Blade templates.

Here are a few steps to ensure that ProgressBar is correctly imported and available:

Ensure Proper Import in bootstrap.js: Make sure that ProgressBar is correctly imported and assigned to the window object in bootstrap.js.
```
import ProgressBar from 'progressbar.js';
window.ProgressBar = ProgressBar;
```
Ensure bootstrap.js is Imported in app.js: Verify that bootstrap.js is being imported in your app.js file.
```
import './bootstrap';
```
Check Compilation: Ensure that your JavaScript assets are being compiled correctly. If you are using Laravel Mix, run the following command to compile your assets:
```
npm run dev
```
or for production:
```
npm run production
```

Verify Script Loading Order: Ensure that your compiled JavaScript file (usually app.js) is being loaded before any inline scripts that use ProgressBar. This is typically done in your main layout file (layouts/app.blade.php).

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head content -->
</head>
<body>
    <!-- Body content -->

    <!-- Load compiled JavaScript -->
    <script src="{{ mix('js/app.js') }}"></script>

    <!-- Inline scripts -->
    @stack('scripts')
    @livewireScripts
    @stack('modals')
</body>
</html>

Debugging: Add a console log in your bootstrap.js to ensure that ProgressBar is being assigned to the window object correctly.

import ProgressBar from 'progressbar.js';
window.ProgressBar = ProgressBar;
console.log('ProgressBar loaded:', window.ProgressBar);

Check for Errors in Compilation: If there are any errors during the compilation process, they will be shown in the terminal. Make sure there are no errors.

By following these steps, you should be able to resolve the ReferenceError: ProgressBar is not defined issue. If the problem persists, double-check the order of your script tags and ensure that app.js is being loaded correctly before any inline scripts that use ProgressBar.

1 like

wasay

1 year ago

Level 2

The push script makes the _rating.blade.php file include before the progressbar.js library is loaded.

How can I delay the push('script') tag to load after the progressbar.js library is loaded?

If I move the scripts that are currently before the end of the body tag to right after the body tag is started; will that break any best practices?

Please or to participate in this conversation.