Migrating from Intel Macbook Pro to M3 Max causes issues with debugging frontend Vue applications

10 months ago 35

Recently I purchased a new Macbook Pro (M3 Max) and used the Migration Assistant to essentially clone the existing Macbook Pro (Intel chip) I was using previously. How I stumbled upon asking this question on Ask Different. If this...

Recently I purchased a new Macbook Pro (M3 Max) and used the Migration Assistant to essentially clone the existing Macbook Pro (Intel chip) I was using previously.

How I stumbled upon asking this question on Ask Different. If this belongs elsewhere, please let me know.

If I create a brand new Vue2 project on my old machine using Vue CLI like this: vue create sample-project and I throw a debugger in the created hook of the HelloWorld.vue component that is automatically generated and I run the project and open dev tools in any browser (Chrome, Safari, etc.) then the result is that I will hit that debugger breakpoint in the created hook and see it like this in dev tools: Image of debugger breakpoint being hit in Chrome dev tools

However, if I try to do the same on my new machine I do not get the same result, the source maps seem messed up if I try to open the same HelloWorld.vue file in dev tools. On my new machine it looks like this: Image of broken source maps or unknown bug causing Vue files to show up odd in Chrome dev tools

If I compress the project from my old machine and send it to my new machine and try running it without so much as doing anything to it at all I cannot hit the same break point. Additionally if I do the reverse and create a new project on my new machine and then send it back to the old one, things do not work on the new one but will still work on the old machine and my work machine.

Sanity checks I've done:

node versions are identical (18.14.2) Vue CLI versions are identical (@vue/cli 5.0.8) What else should I be considering?

Things I have tried:

Restarting my machine. Doing a fresh install of Vue CLI using --force Doing a fresh install of node Restarting several more times after trying other things to no avail

Nothing has worked. As another sanity check I sent that same zipped up HelloWorld project to my work machine where I’ve never ran a vue project and it runs and debugs just fine there as well.

Differences I have noticed? If I open the source/test (my project name) I see these differences in the files: New machine: Picture from Chrome dev tools sources tab showing missing files on the new machine compared to the old one

Old machine: Picture from Chrome dev tools sources tab showing complete set of files from a new project as we would expect

Any ideas why this is happening only on this machine and what I can try to fix it?


View Entire Post

Read Entire Article