Cryptic error message in production, please help!

vue-cli

#1

`Type Error: e is undefined`.


Quick links

Relevant source code

App in production

Build logs


Hello, Vue forum!


I wanted to seek help / guidance on an issue that I'm facing in my Vue application that **I have been struggling with for weeks** now-
I'm not sure where to take this issue if I can't get it solved soon. Apparently, I'm pretty much in 'the nightmare zone'. Let me share with you the details

The project is running on Vue version ^2.5.17
I have had big difficulty reproducing this error

  • First of all, the app works perfectly fine in development mode , however (as I will link to), when run in production mode, the app produces an error: Type Error: e is undefined (Mozilla Firefox) when I mount a specific route.

  • Secondly, in the vue-cli build logs, I can see various warnings relating to file size limits. I will link to a gist with the relevant (the rest of the outputs are typescript warnings) in the links above!

These two details have led me to believe that the issue is caused by a bundling error

Steps to reproduce

As I mentioned before, the issue is only present in production mode. Therefore I have released the app on Netlify for reproduction. Here are the steps:
  1. Visit the app on netlify
  2. Scroll down to the "Sign up" form and create a fake account to test the bug
  3. Login using these credentials at the login page
  4. Open the console
  5. Visit the "world" screen and click the button that says "Explore Monokai"
Doing this should take you to the faulty route/component (grandquest.netlify.com/map)

Expected output

You should see a loading screen for some time while the assets load, and then a map should appear on the screen. You should be able to, with your cursor, navigate this map up and down, as well as click on the various shops.

Actual output

The screen appears to be loading indefinitely because an error has ocurred that has stopped the app. The error should now appear in the console, reading Type error: e is undefined(on Firefox)

It has been suggested that this bug is caused by an event handler holding an event variable called e. However, this is not the issue as the component does not make any calls to any e variables. However, when the app is bundled variable names are minified, so e could be any variable in the code. this further advances my theory that this bug is caused by the bundling process

I have put up the relevant source code for the Map.vue component as a gist that can be accessed through the link in the links above

Any and all help are greatly appreciated in this issue!

- John

#2

I’ll take a look tomorrow, I’m at a family event tonight.


#3

So I tried to reproduce it, but everything works fine in FF 66.0.1 on Mac.

Have you tried disabling all browser extensions?


#4

Also working fine on Mac FF 66.0.1 and Chrome 72.0.3626.121. No console errors


#5

This is issue has been resolved! It was due to a vue event handler pointing to a method that did not exist. I find it strange it wasn’t caught in development mode.