Troubleshooting

Common issues and solutions when working with Wheelbase components.

Component Not Rendering

Problem: The web component doesn’t appear on the page.

Solutions:

Check script loading:


// Verify the script loaded successfully
console.log('Wheelbase loaded:', !!customElements.get('wheelbase-store'))

Verify script URL:


<script src="https://d2toxav8qvoos4.cloudfront.net/latest/wheelbase-widget.umd.cjs"></script>

Check browser console for JavaScript errors
Verify dealer ID is valid:


<wheelbase-store dealer-id="YOUR_DEALER_ID"></wheelbase-store>

Script Loading Errors

Problem: “Failed to load resource” or network errors.

Solutions:

Check network connectivity and firewall settings
Verify CDN is accessible:


fetch('https://d2toxav8qvoos4.cloudfront.net/latest/wheelbase-widget.umd.cjs')
  .then(response => console.log('CDN accessible:', response.ok))
  .catch(error => console.error('CDN error:', error))

TypeScript Errors

Problem: TypeScript doesn’t recognize the web component elements.

Solution: Add type declarations to your project:


// types/wheelbase.d.ts
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'wheelbase-store': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'dealer-id'?: string
          locale?: string
          'store-type'?: string
          'primary-color'?: string
          'hide-filters'?: boolean
          'hide-hero'?: boolean
        },
        HTMLElement
      >
      'wheelbase-rentals-list': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'dealer-id'?: string
          locale?: string
        },
        HTMLElement
      >
      'listing-details': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'dealer-id'?: string
          'rental-id'?: string
          locale?: string
        },
        HTMLElement
      >
    }
  }
}
 
export {}

Localization Issues

Problem: Locale not applying correctly.

Solutions:

Use correct format (lowercase with hyphen):


<!-- Correct -->
<wheelbase-store dealer-id="24019" locale="fr-ca"></wheelbase-store>
 
<!-- Incorrect -->
<wheelbase-store dealer-id="24019" locale="fr_CA"></wheelbase-store>

Check supported locales:
- en-us, en-ca, en-gb, en-au, en-nz
- fr-fr, fr-ca
- de-de, es-es, it-it

Checkout Opens in New Tab

Expected behavior: When embedded in platforms like Wix or Squarespace that use iframes, checkout automatically opens in a new tab to ensure a smooth booking experience.

This is intentional and not a bug.

Theming Not Applied

Problem: Custom colors not showing.

Solutions:

Use correct attribute format (kebab-case):


<!-- Correct -->
<wheelbase-store
  dealer-id="24019"
  primary-color="#2563EB"
></wheelbase-store>
 
<!-- Incorrect -->
<wheelbase-store
  dealer-id="24019"
  primaryColor="#2563EB"
></wheelbase-store>

Use valid hex colors:


<!-- With # prefix -->
<wheelbase-store primary-color="#2563EB"></wheelbase-store>

Mobile / Responsive Issues

Problem: Component not displaying correctly on mobile.

Solutions:

Ensure viewport meta tag:


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Allow full width:


wheelbase-store {
  width: 100%;
}

Next.js SSR Errors

Problem: Hydration errors or “window is not defined”.

Solution: Load the script only on the client side:


'use client'
 
import { useEffect } from 'react'
 
export default function RentalsPage() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://d2toxav8qvoos4.cloudfront.net/latest/wheelbase-widget.umd.cjs'
    document.head.appendChild(script)
  }, [])
 
  return <wheelbase-store dealer-id="YOUR_DEALER_ID" />
}

Inspecting the Component

The component uses Shadow DOM. To inspect internal elements:

Open Developer Tools (F12)
Navigate to Elements tab
Find the web component (e.g., <wheelbase-store>)
Expand #shadow-root (open) to see internal elements

Browser Support

Wheelbase components require modern browsers with Web Components support:

Chrome 67+
Firefox 63+
Safari 10.1+
Edge 79+

For older browsers, include the Web Components polyfill:


<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>

Still having issues? Check the browser console for error messages. Most issues are related to script loading, invalid dealer IDs, or incorrect attribute formats.