Uncaught TypeError: Cannot read property 'classList' of null

[carolina-morales]

Thanks for your plugin.

I don't use bs-stepper with cdn link. I downloaded the files and saved it in my foolder. But I saw an error in the console web. I tried to using jQuery and JS Vanilla, comment that line code, but it doesn't fix. I haven't modified anything more.

[admirhusic]

I think you can close this issue.
I had the same problem but realized that I had the wrong order in loading the scripts.

[Johann-S]

Hi @DanielCMorales,

It seems related on how you're using bs-stepper, I can't help you more than that without a bit of your code

[hamlet237]

Hi there Johann-S. I´m facing the same problem here.

I´m working under WP framework. Here is my code:
You can see dependencies here:
view-source:https://smrc.dev.bjaland.co/training/trainee-panel/?smrc_training_id=3782

HTML + PHP:
`

1

<div class="line"></div>

<div class="step" data-target="#information-part">
  <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
    <span class="bs-stepper-circle">2</span>
    <span class="bs-stepper-label"><?php _e('Homework', 'almazen'); ?></span>
  </button>
</div>

<div class="line"></div>

<div class="step" data-target="#information-part">
  <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
    <span class="bs-stepper-circle">3</span>
    <span class="bs-stepper-label"><?php _e('Webinar', 'almazen'); ?></span></span>
  </button>
</div>

<div class="line"></div>

<div class="step" data-target="#information-part">
  <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
    <span class="bs-stepper-circle">4</span>
    <span class="bs-stepper-label"><?php _e('Certificate', 'almazen'); ?></span></span>
  </button>
</div>

<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
    <!-- 
      FILIII
  poner una foreach con los vídeos que estén en un meta del training
  incluir en cada vídeo el attr data-smrc-video-watched
  Poner un div en frente del vídeo que al pinchar desaparezca y muestre el vídeo con la clase que teníamos preparada -btn
  En el server enviar el dato y luego poner en el panel del training que está visto todos los vídeos.
   -->
  <div class="smrc-sub-step-videos mb-50">
    <h4 class="text-align-center"><?php _e('Training Videos', 'almazen'); ?></h4>

    <?php if(empty(get_post_meta($smrc_training_id, 'smrc_training_related_videos'))) {
      echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_late" smrc_call_to_action_title="No videos found" smrc_call_to_action_content="Oppsss! We haven´t found any video associated with this training"]');
    }else{ 
      if (empty(get_user_meta($smrc_user_id, 'smrc_trainer_training_video_finished', true)[$smrc_training_id])) { echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_late" smrc_call_to_action_title="Videos not shown" smrc_call_to_action_content="You have not seen all the training videos. Please complete the viewing of all the proposed videos."]');
      }else{ 
        echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_turned_in" smrc_call_to_action_title="Videos shown" smrc_call_to_action_content="Hooray! You have completed the viewing of all the proposed videos</a>"]');
      } ?>

      <div class="row">
      <?php foreach (get_post_meta($smrc_training_id, 'smrc_training_related_videos', true) as $video_key => $video_url) { ?>
        <div class="col-md-4 text-align-center">
          <div>
            <div class="smrc-training-video-watch-btn" data-smrc-video-watched="false">
              <p class="color-white mt-40 mb-10">Video <?php echo ($video_key + 1); ?></p>
              <i class="material-icons font-size-50 color-white">play_circle_outline</i>
            </div>
          </div>
          <?php echo wp_oembed_get($video_url);; ?>
        </div>
      <?php } ?>
      </div>
    <?php } ?>
  </div>

  <div class="smrc-sub-step-homework mb-50">
    <h4 class="text-align-center"><?php _e('Training Homework', 'almazen'); ?></h4>
    <?php if (empty(get_user_meta($smrc_user_id, 'smrc_trainer_training_homework_finished', true)[$smrc_training_id])) { ?>
      <p><?php _e('', 'almazen'); ?></p>
      <?php echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_late" smrc_call_to_action_title="Homework not received" smrc_call_to_action_content="You still haven\'t turned in the homework</a>"]'); ?>
      <div class="text-align-center margin-auto">
        <a href="#" class="smrc-btn smrc-training-homework-finish-btn"><?php _e('Send now', 'almazen'); ?></a><img class="smrc-waiting" style="display:none;" src="/wp-content/uploads/2019/07/ajax-loader.gif" alt="<?php _e('loading from SMRC...', 'almazen'); ?>"/>
      </div>
    <?php }else{ 
      echo do_shortcode('[smrc-call-to-action smrc_call_to_action_icon="assignment_turned_in" smrc_call_to_action_title="Homework received" smrc_call_to_action_content="Hooray! You have turned in the homework</a>"]');
    } ?>
  </div>
</div>

<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
  <?php echo do_shortcode('[smrc-webinar smrc_webinar_id="6470370634"]'); ?>
</div>

<div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
  <p>More things here.</p>
</div>

`

JQUERY
<script> jQuery(document).ready(function($) { var smrc_stepper = new Stepper($('.bs-stepper')); }); </script>

Thanks in advance!

[hamlet237]

Something was wrong formatting the code. I attach the complete
bs-steps.txt
function in txt.

[leandroruel]

same here
i'm using it with webpack and even using it as
import Stepper from 'bs-stepper';
don't work... same error as everybody above

tried make a function attached to the window and call it from my view like:

import Stepper from 'bs-stepper';

window.startStepper = el => {
    return new Stepper(el);
};

and in my view:

<script>
startStepper(document.querySelector('.bs-stepper'));
</script>

but that don't work too.

Edit: i read the documentation and inspected the examples html, so, just to be clear, when i tried use this plugin, i just copied the HTML from the README, but in your examples all the items have the "active" class in the first content item, so i tried put it in my stepper and the error gone, but the stepper buttons keep gray and clickable.
i think the issue is the plugin set the className to those elements.

[Johann-S]

@hamlet237 and @leandroruel

This error means you pass something null to bs-stepper or you don't follow the needed structure 😟

I would love to see a live demo of the problem, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link.

Without that, I can't confirmed it's related to the libs, and it seems related to how you're using bs-stepper

[leandroruel]

I'll try this later, maybe not today as i have a lot of work here to do.

[Johann-S]

I'm still waiting for your live demo of the problem on CodePen/JS Bin or Stackblitz.

[kingraphaii]

@Johann-S here is the link to a pen I made: https://codepen.io/kingraphaii/pen/mdPeNRP

[buncis]

Uncaught TypeError: Cannot read property 'classList' of null also means that

the selector cannot find a html object with bs-stepper class

please recheck the html where you load the script is it contain a html object with bs-stepper class

[iamtekson]

Is there any update on this issue? I am still getting the same issue. I tried to implement it on a React.

[schmetti-dev]

I got the error as long as the bs-stepper-content didn't have all data-targets from the bs-stepper-header as a div id

So you need a div with a corresponding ID for exactly every data target.
For example, as long as you have 5 steps in the header and 4 or 6 in the content, the error occurs

[hrvalizad]

I got the error as long as the bs-stepper-content didn't have all data-targets from the bs-stepper-header as a div id

So you need a div with a corresponding ID for exactly every data target. For example, as long as you have 5 steps in the header and 4 or 6 in the content, the error occurs

same problem and this solution worked. Thanks.