Skip to main content
WireKit
Copy for LLM

Console Output Baseline

When you load a WireKit-using Laravel page in a browser, the developer console should be quiet. Any message that DOES appear should be attributable to a documented source — your own code, a dependency's init log, or a known dev-mode warning.

This page catalogs what to expect on a clean install. Use it as a reference when triaging unexpected console output or when writing browser tests that assert console.error.length === 0.

First-Paint — Production Build

Severity Expected messages
error None. Any error at this stage is a real bug — file an issue.
warn None. Same as above.
info None. WireKit doesn't emit info logs by default.
log None. Same.

If you're seeing anything in any of these channels on first paint of a production build, that's actionable feedback. Investigate.

First-Paint — Development Build

Vite's dev server adds a small number of informational messages:

Severity Source Message
info Vite HMR [vite] connected.
info Livewire Livewire: Connected to WebSocket. (only when broadcasting is enabled)
log Alpine None — Alpine v3 is silent on init.

These are dev-mode-only. A production build (npm run build) does not emit them.

During Page Interaction

WireKit's interactive components log nothing during normal interaction. You should never see a console message when:

  • Clicking a button
  • Opening a modal, drawer, dropdown, or popover
  • Sorting a table
  • Submitting a form
  • Triggering a toast
  • Scrolling a page with reading-progress / reading-spine

If you DO see a message during any of these interactions on a clean install, that's a bug — capture the message and the user action that triggered it.

Optional-Dependency Warnings

When you load a page that uses a component requiring an optional dependency, WireKit logs ONE informational warning if the dependency isn't loaded:

Component Dependency Warning
<x-wirekit::chart> chart.js (default adapter) console.warn('WireKit chart: window.Chart not loaded. Install chart.js via npm and include it in your build.')
<x-wirekit::code-block> highlight.js console.warn('WireKit code-block: window.hljs not loaded. Syntax highlighting disabled.')

These warnings are deliberate and actionable. They tell you exactly what to install. The page continues to render with a graceful fallback (chart canvas with no data, code block without syntax highlighting).

You can suppress them by:

  • Installing the dependency, OR
  • Not using the component on that page.

Filtering Known-Noisy Messages in Browser Tests

If you're asserting console.error.length === 0 in a browser test, filter out the known-baseline messages first:

const knownNoise = [
    '[vite] connected.',
    'Download the React DevTools',
    'WireKit chart: window.Chart not loaded',
];

const realErrors = capturedErrors.filter(err =>
    ! knownNoise.some(noise => err.includes(noise))
);

// realErrors.length should be 0 on a clean install.

Common Mistakes That Cause Console Noise

When you see unexpected output, the most common causes are:

  1. Forgetting to publish WireKit assets — php artisan vendor:publish --tag=wirekit-assets. Without this, the runtime can't find wirekit.js and emits a 404 in the network tab plus a ReferenceError in the console.
  2. Missing @wirekitStyles / @wirekitScripts in your layout — WireKit components throw ReferenceError because Alpine isn't loaded. Run php artisan wirekit:verify to diagnose.
  3. Stale compiled views — php artisan view:clear resolves it. Symptom: changes to @props blocks in templates don't reflect at runtime.
  4. Out-of-order Blade directives — @vite([...]) MUST appear in <head> BEFORE @wirekitStyles. Reversing the order means the Vite-compiled CSS overrides WireKit's CSS variables and styling drifts unpredictably.
  5. Custom Alpine plugin holding an unguarded observer reference — see Authoring Custom Alpine Plugins. Symptom: TypeError: Cannot read properties of null (reading 'disconnect'). Run php artisan wirekit:doctor to detect.

Cross-References