How to use the aframe.utils function in aframe

import AFRAME from 'aframe';

const utils = AFRAME.utils;

/**
 * Set properties if headset is not connected by checking getVRDisplays().
 */
AFRAME.registerComponent('if-no-vr-headset', {
  schema: {
    default: {},
    parse: utils.styleParser.parse
  },

  update: function () {
    var self = this;

    // Check VRDisplays to determine if headset is connected.
    navigator.getVRDisplays().then(function (displays) {
      // Special case for WebVR emulator.

import * as AFRAME from 'aframe';

var warn = AFRAME.utils.debug('components:sound:warn');

AFRAME.components.sound.schema.src.parse = function assetParse (value) {
  var el;
  var parsedUrl;

  // If an element was provided (e.g. canvas or video), just return it.
  if (typeof value !== 'string') { return value; }

  // Wrapped `url()` in case of data URI.
  parsedUrl = value.match(/\url\((.+)\)/);
  if (parsedUrl) { return parsedUrl[1]; }

  // ID.
  if (value.charAt(0) === '#') {
    el = document.getElementById(value.substring(1));
    if (el) {

import * as AFRAME from 'aframe';

if (typeof AFRAME === 'undefined') {
  throw new Error('Component attempted to register before AFRAME was available.');
}


let coordinates = AFRAME.utils.coordinates;

AFRAME.registerComponent('plane-from-vertices', {
  schema: {
    face:{type:'boolean',default: true},
    faceColor: { type:'color',default: '#333' },
    faceOpacity: {type:'number',default: 1},
    path: {
      default: [
        { x: -0.5, y: 0, z: 0 },
        { x: 0.5, y: 0, z: 0 }
      ],
      
      parse: function (value) {
        return value.split(',').map(coordinates.parse);
      },

dur='1000'
                from='1'
                to='0'
                begin='scene-change-in-animation'>
            

        ;

        if (!AFRAME.utils.device.isMobile() && AFRAME.utils.device.checkHeadsetConnected() && this.props.vrMode) {
            controls = ;
        }

        if (this.props.room === 'tourismDemo') {
            camera = 
                {this.props.call && (

document.addEventListener('enter-vr', e => {
      if (AFRAME.utils.device.checkHeadsetConnected()) {
        this.setState({
          headset:true,
        })
        if(AFRAME.utils.device.isMobile()){
          this.setState({
            headset:false,
          })
        }
      }
      else {
        this.setState({
          headset:false,
        })
      }
    });
    document.addEventListener('exit-vr', e => {

document.addEventListener('enter-vr', e => {
      if (AFRAME.utils.device.checkHeadsetConnected()) {
        this.setState({
          headset:true,
        })
        if(AFRAME.utils.device.isMobile()){
          this.setState({
            headset:false,
          })
        }
      }
      else {
        this.setState({
          headset:false,
        })
      }
    });
    document.addEventListener('exit-vr', e => {