After putting my Vue app into production, I encountered a perplexing issue with a specific component that throws an error message I can't track down. The problem seems to be related to the bundling process since it only occurs in production mode.
Steps to reproduce
To replicate the issue, follow these steps in production mode:
- Visit the deployed app on Netlify at
- Navigate to the "Sign up" form and create a fake account
- Use the created credentials to log in at the login page
- Open the console
- Go to the world and click on the "Explore Monokai" button
These steps should lead you to the problematic route/component (grandquest.netlify.com/map)
The details
In development mode, the app runs smoothly. However, in production mode, I encounter an error: Type Error: e is undefined (specifically in Mozilla Firefox). This occurs when I access a particular route.
In the build logs from vue-cli, there are warnings regarding file size limits, as shown below:
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
img/gold-frame.536f6ce1.png (415 KiB)
media/combat-fail.f73de150.mp3 (317 KiB)
...
// More warnings
DONE Build complete. The dist directory is ready to be deployed.
Based on these observations, I suspect the issue stems from a bundling error
-
I've searched for the variable name e in my code, assuming it might be an event, but couldn't find any instances of it. It appears to be a variable abstracted by Vue.
Considering the ambiguous nature of this error, I've summarized the relevant code for the Map component. If sharing the complete files would help resolve the issue, I'm open to doing so, although the e variable doesn't appear to exist.
@/views/Map.vue
<template>
<div>
<!-- LOADING SCREEN -->
...
...
// Code snippet continued
</script>
<p></p>
<p>@/game/places/map.ts</p>
<pre><code>export default () => {
let game: any = null;
let global = {
tooltip: {},
chosenShop: null,
gameInitialized: false,
pointer: { x: 0, y: 0, hovering: false },
launch() {
...
// Game logic implementation
};
Expected output
You should see a loading screen followed by the map display where you can navigate and interact with various elements.
Actual output
Instead of the expected behavior, the app gets stuck indefinitely during loading due to an error. The console shows a Type error: e is undefined (on Firefox).
Any assistance in resolving this issue would be greatly appreciated :)