Skip to main content

​
Common Issues

​
Code Not Running

Open the browser developer console (F12) to check for errors:
  1. Press F12 to open DevTools
  2. Navigate to the Console tab
  3. Look for red error messages
  4. Check the LiveCodes integrated console in the tools pane
Compiler errors are shown in the integrated console (v47+)
Ensure you’ve selected the correct language for each editor:
  • Click the language selector in each editor tab
  • Check that the file extension matches your code
  • For frameworks, ensure dependencies are loaded
Sometimes cached assets can cause issues:
# Clear browser cache
1. Press Ctrl+Shift+Delete (or Cmd+Shift+Delete on Mac)
2. Select "Cached images and files"
3. Click "Clear data"
4. Reload LiveCodes
Or use hard reload: Ctrl+Shift+R (Cmd+Shift+R on Mac)

​
Import and Module Issues

Module resolution errors are among the most common issues in LiveCodes.
Problem: Package imports don’t work or show 404 errors.Solutions:
  1. Use bare imports (preferred):
import React from 'react';
  1. Check import maps in Project Info:
{
  "imports": {
    "react": "https://esm.sh/react@18"
  }
}
  1. Verify package exists on npm/jsDelivr
  2. Use specific versions: 
import pkg from '[email protected]';
Problem: Relative imports like ./utils.js don’t work.Solution: Use the script editor as a module:
  1. Create your module in the script editor
  2. Import it using a custom filename from import maps
  3. Or use data URLs for component imports (Vue/Svelte)
Vue and Svelte SFCs can import other components as data URLs (v44+)
Problem: TypeScript shows red squiggles for valid imports.Solutions:
  • HTTP imports: TypeScript errors for full URLs are now fixed (v44+)
  • Data URL imports: Fixed in v44+
  • Type definitions: May need to install @types/ packages
For React:
// This should work without errors
import React from 'react';
import type { FC } from 'react';
Problem: Multiple versions of React/Vue causing issues.Solution: LiveCodes automatically manages import maps to prevent duplicates (fixed in v43+), but you can verify:
  1. Check Project Info → Import Maps
  2. Ensure only one version is mapped
  3. Clear any custom import maps that might conflict

​
Editor Issues

Symptoms: White screen or loading spinner that doesn’t stop.Solutions:
  1. Check browser compatibility: Use modern browsers (Chrome, Firefox, Safari, Edge)
  2. Disable browser extensions: Some extensions block scripts
  3. Check network: Ensure CDN resources can load
  4. Try a different editor: Switch between Monaco, CodeMirror, or CodeJar
Problem: No IntelliSense or autocomplete suggestions.Causes & Solutions:
  • Monaco only: CodeMirror has limited autocomplete
  • TypeScript needed: For best autocomplete, use TypeScript
  • Types loading: Wait for type definitions to download
  • Vim mode: Some features limited in vim mode
Try: Ctrl+Space to manually trigger suggestions
Problem: Editor is slow or laggy.Solutions:
  1. Switch editors: Try CodeMirror instead of Monaco
  2. Disable features:
    • Turn off format on save
    • Disable Emmet
    • Reduce autocomplete delay
  3. Close unused tools: Hide test pane, console if not needed
  4. Large files: Split code into smaller modules
Problem: Line numbers missing or incorrect.Solution: Check editor settings:
  • Absolute line numbers (default)
  • Relative line numbers (v40+)
  • No line numbers option
Setting: Editor Settings → Line Numbers

​
Framework-Specific Issues

Common problems:
  1. React 19 compatibility: Some libraries not yet updated
    • React Native template modified for compatibility
    • Use React 18 if needed: import React from 'react@18'
  2. JSX not compiling: Ensure file is .jsx or .tsx
  3. Hooks errors: Check React version and import
  4. React Compiler (v37+): Enabled by default in React template
Common problems:
  1. Multiple components: Use markup editor for second component (v43+)
  2. Props inference: Types now inferred from defineProps (v44+)
  3. Import maps: Duplicate Vue instances prevented automatically
  4. SFC processing: CSS processors work in style blocks (v44+)
  5. Auto-complete: monaco-volar provides better DX (v44+)
Breaking changes:
  1. Svelte 5 (v37+): Upgraded from Svelte 4
  2. Multiple components: Use markup editor (v43+)
  3. SFC imports: Can import other SFCs via data URLs (v44+)
Version confusion:LiveCodes supports both v3 and v4:
  • v4 (default): Use @import "tailwindcss";
  • v3 (legacy): Use @tailwind base; @tailwind components; @tailwind utilities;
Plugin issues:
/* Import from npm */
@plugin "daisyui" {
  /* config */
}

/* Or from URL */
@plugin "https://cdn.jsdelivr.net/npm/...";
Not processing: Check that you’re in a CSS/style editor

​
SDK & Embedding Issues

Problem: Embedded playground shows blank screen.Solutions:
  1. Check container: Ensure container has height
#container {
  height: 500px; /* Required! */
}
  1. Verify SDK import: Use correct CDN URL
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
  1. Check config: Validate configuration object
  2. Console errors: Check browser console for details
Problem: Configuration options not taking effect.Breaking changes (SDK v0.8.0):Old API (deprecated):
{ view: 'split', lite: true }
New API:
{ 
  config: { view: 'split', mode: 'lite' },
  headless: false 
}
Old API will be removed in a future release. Update your code.
Problem: setConfig doesn’t update content.Solution: Use content-only updates (v46+):
await playground.setConfig({
  script: { content: newCode }
});
This updates without reloading the entire editor.

​
Browser-Specific Issues

Known issues:
  1. Multiple re-renders: Fixed in v47 (sandbox v9)
  2. CORS errors: Fixed for jsdelivr API (v36+)
  3. External resources: Style issues fixed (v36+)
Solutions:
  1. Use auto editor mode: Automatically uses CodeMirror on mobile
{ config: { editor: 'auto' } }
  1. Touch gestures: May differ from desktop
  2. Performance: Consider simpler features for mobile

​
Getting Help

Check FAQ

Review frequently asked questions

GitHub Discussions

Ask the community for help

Report Bug

File an issue on GitHub

View Changelog

Check recent fixes and changes
When reporting issues, include:
  • Browser and version
  • LiveCodes version
  • Minimal code reproduction
  • Error messages and console logs

Build docs developers (and LLMs) love

Get started for freeTalk to us