PrismJS / PrismJS/prism

Plugin prism-toolbar error in vuejs3 and vite

Open
#3,601 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
13k
Forks
1.4k
Avg merge
15h 36m
Merged PRs (30d)
3

Description

Information:

  • Prism version: 1.29.0
  • Plugins:
    prism-line-numbers,
    prism-show-invisibles,
    prism-normalize-whitespace,
    prism-copy-to-clipboard,
    prism-unescaped-markup
  • Environment:
    Browser: Chrome v. 107.0.5304.108
    Node: 19.0.0.
    Vite: 3.1.8
    VueJs: 3.2.41

package.json

{
  "name": "lmd-doc",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "node-sass": "^8.0.0",
    "pinia": "^2.0.23",
    "prismjs": "^1.29.0",
    "uikit": "^3.15.14",
    "vue": "^3.2.41",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.2",
    "sass": "^1.56.1",
    "vite": "^3.1.8"
  }
}

main.js

import {createApp} from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import './assets/main.css'

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

import 'prismjs/prism';
import 'prismjs/themes/prism-okaidia.min.css';

import 'prismjs/components/prism-markup-templating.min';
import 'prismjs/components/prism-php.min';
import 'prismjs/components/prism-sql.min';
import 'prismjs/components/prism-properties.min';


import 'prismjs/plugins/line-numbers/prism-line-numbers.min'
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.css'

import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.min'
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min'

import 'prismjs/plugins/unescaped-markup/prism-unescaped-markup.min'
import 'prismjs/plugins/unescaped-markup/prism-unescaped-markup.min.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

UIkit.use(Icons);

app.mount('#app')

in each vue component, I added:

<script>
export default {
  mounted() {
    Prism.highlightAll();
  },
}
</script>
...

When I add this plugin: prism-toolbar in the console I get this error:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <StartBlade onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

runtime-dom.esm-bundler.js:10
Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:7329:12)
    at processFragment (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5499:7)
    at patch (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5233:9)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5634:11)
    at ReactiveEffect.run (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:388:19)
    at instance.update (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5723:52)
    at setupRenderEffect (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5731:5)
    at mountComponent (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5556:5)
    at processComponent (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5521:9)
    at patch (http://localhost:5173/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=8b3fc2e0:5239:11)

When accessing the page for the first time, the error does not appear.
The error appears when I change the route by clicking on the link

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with package.json and main.js, then reproduce the reported setup with prism-toolbar enabled. Exercise the route change described in the issue and inspect the resulting DOM update around Prism highlighting. Done would mean route navigation no longer produces the insertBefore DOMException, with the existing Prism plugins still working.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, vite
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.