I have this piece of code:
<script lang="ts">
let visible = $state(false);
</script>
<div
role="button"
tabindex="0"
onmouseenter={() => {
console.log('onmouseenter');
visible = true;
}}
onmouseleave={() => {
console.log('onmouseleave');
visible = false;
}}
>
{visible}
</div>
which works fine on the playground
However, it doesn't work locally.
What could be missing, or what could I have done wrong?
Answer
After investigation, I discovered I was using some dependencies that were using process.env and it was throwing errors:
app.js:32 ReferenceError: process is not defined
at node_modules/path/path.js (path.js?v=e0445acb:492:21)
at __require (chunk-XSCQBFM2.js?v=e0445acb:10:50)
at path.js?v=e0445acb:874:16
handleError @ app.js:32
await in start
(anonymous) @ (index):101
Promise.then
(anonymous) @ (index):100
path.js?v=e0445acb:492 Uncaught (in promise) ReferenceError: process is not defined
at node_modules/path/path.js (path.js?v=e0445acb:492:21)
at __require (chunk-XSCQBFM2.js?v=e0445acb:10:50)
at path.js?v=e0445acb:874:16
node_modules/path/path.js @ path.js?v=e0445acb:492
__require @ chunk-XSCQBFM2.js?v=e0445acb:10
(anonymous) @ path.js?v=e0445acb:874
client.js?v=e0445acb:331 Uncaught (in promise) ReferenceError: process is not defined
at node_modules/path/path.js (path.js?v=e0445acb:492:21)
at __require (chunk-XSCQBFM2.js?v=e0445acb:10:50)
at path.js?v=e0445acb:874:16
node_modules/path/path.js @ path.js?v=e0445acb:492
__require @ chunk-XSCQBFM2.js?v=e0445acb:10
(anonymous) @ path.js?v=e0445acb:874
I "fixed" it adding
export default defineConfig({
define: {
'process.env': {} // Add this
}
});
in my vite.config.ts (I don't know whether that is a proper fix though).
But now, there is no error in the console and onmouseenter is triggered.