vite-plugin-checker
vite-plugin-checker copied to clipboard
fi3ework
error overlay does not appear in browser
Describe the bug
I am using the plugin in a vite-ruby project with React. To test it I made a typescript error which was logged to terminal but not in the browser.
Reproduction
- Install this pluging in a vite-ruby project
Expected behavior
An error overlay should appear when there are typescript errors.
System Info
System:
OS: macOS 12.5.1
CPU: (8) arm64 Apple M1
Memory: 123.00 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/Library/Caches/fnm_multishells/67768_1661334564485/bin/node
npm: 8.11.0 - ~/Library/Caches/fnm_multishells/67768_1661334564485/bin/npm
Browsers:
Chrome: 104.0.5112.101
Firefox: 101.0.1
Firefox Developer Edition: 103.0
Safari: 15.6.1
Additional context
No response
Validations
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Same here, I think it does not work if you use a backend integration or you have a non html entry in vite.config.ts like I do:
build: {
manifest: true,
rollupOptions: {
input: 'src/main.tsx',
},
}
I had this same issue when using django-vite, which is a backend integration that has a non-HTML entry, but I figured out a workaround.
Looking at the HTML source when using a default HTML entry, the plugin injects the following script at the top of <head>:
<script type="module">import { inject } from "/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/",
});</script>
So I was able to manually add that same script to my base Django HTML template at the top of <head>, with a slight tweak to the import path, and it worked! In my case, I am also specifying an alternate Vite base of "/static/ui/" and a server.port of 9000 (which importantly is different from the Django server port), so with that config, the final working script I added in my HTML was:
<script type="module">
import { inject } from "http://localhost:9000/static/ui/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/static/ui/",
});
</script>
For what it's worth, I'm using React, and I had to add a similar script manually for the React fast refresh code, as described on the Vite backend integration page https://vitejs.dev/guide/backend-integration.html. Presumably this similar workaround should be part of the vite-plugin-checker docs.
This regression started happening on version 0.4.0. I downgraded to version 0.3.4 and the overlay displays.
