Plugin prism-toolbar error in vuejs3 and vite
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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