search

evidence-dev / evidence

Business intelligence as code: build fast, interactive data visualizations in pure SQL and markdown
https://evidence.dev
MIT License
4.39k stars 210 forks source link

Prism is not defined error in browser #2041

Closed hughess closed 5 months ago

hughess commented 5 months ago

Occasionally will get an error in the browser which causes the Evidence loading screen to stay on the screen infinitely. In the browser console, it shows a Prism is not defined error.

Workaround

Deleting node_modules folder and package-lock.json file, then running npm install

This fixes it, but it comes up from time to time unexpectedly

hughess commented 5 months ago

Steps to reproduce in local development

  1. Navigate to schema viewer or console page
  2. Refresh page
  3. vite dependency optimization message appears
  4. Page reloads, flashes, then goes to loading state with Prism error in browser
hughess commented 5 months ago

I think this is related to the CodeBlock component, which had syntax highlighting with Prism added recently.

Specifically, it seems that the language-specific imports are not able to access Prism when run. Which might mean Prism is not loading in time.

The section of CodeBlock.svelte in question:

    import Prism from 'prismjs';
    import './prism-svelte.js';
    import 'prismjs/components/prism-bash';
    import 'prismjs/components/prism-sql';
    import 'prismjs/components/prism-python';
    import 'prismjs/components/prism-markdown';