Why this basic VEXFLOW code is rendering nothing?

I have a piece of code in VEXFLOW

  <!DOCTYPE html>
    
    <html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
    
      <script>
        $(function() {
        
          
          import Vex from 'vexflow';
    
    const vf = new Vex.Flow.Factory({
      renderer: {elementId: 'boo', width: 500, height: 200}
    });
    
    const score = vf.EasyScore();
    const system = vf.System();
    
    system.addStave({
      voices: [
        score.voice(score.notes('C#5/q, B4, A4, G#4', {stem: 'up'})),
        score.voice(score.notes('C#4/h, C#4', {stem: 'down'}))
      ]
    }).addClef('treble').addTimeSignature('4/4');
    
    vf.draw();
        });
      </script>
    </head>
    
    <body>
     <div id="boo"></div>
    
    
    </body></html>

Why this code is not rendering nothing. Nothing is visible in browser.

Solution

<!DOCTYPE html>

<html>
  <body>
    <div id="boo"></div>
  </body>
</html>
<script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
<script>
  const vf = new Vex.Flow.Factory({
    renderer: { elementId: "boo", width: 500, height: 200 }
  });

  const score = vf.EasyScore();
  const system = vf.System();

  system
    .addStave({
      voices: [
        score.voice(score.notes("C#5/q, B4, A4, G#4", { stem: "up" })),
        score.voice(score.notes("C#4/h, C#4", { stem: "down" }))
      ]
    })
    .addClef("treble")
    .addTimeSignature("4/4");

  vf.draw();
</script>