Issues compiling properly for debugging

[maxshuty]

Hi all,

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.

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:

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:

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
• Creating a brand new user on this machine, also to no avail (aka not an issue with the migration)

Differences I have noticed?
If I open the source/test (my project name) I see these differences in the files:
New machine:

Old machine:

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.

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

[edison1105]

try this:

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

BTW, we recommend using https://github.com/vuejs/create-vue instead of vue-cli

[maxshuty]

@edison1105 ...odd... that worked. I'm very perplexed as to the why because if I use the exact same project with literally no other changes - so far three other machines - it works just fine on all three. Only on my new machine do I need to add that to the vue.config.js and voila, it works.

Is there some sort of global settings these other machines may have set that the new one does not? I realize this seems to fix the issue but I'd love to get to the bottom and answer why.

Update that worked for a new template project but fails when I try to do the same in an existing project. I'm now trying to diff what is different between the two projects.

So far the versions are very close for vue: 2.6.10 vs the template projects 2.6.14.

Update 2: I dug through the webpack configuration which was customized and updated our webpack.dev.conf.js file where we had this:

devtool: '#source-map',

to this:

devtool: 'source-map'

Which fixed it there as well. Was #source-map ever a thing? I'm not finding much when searching around for that. Additionally this still fails to explain my original question of why it occurs on this machine only. At this point things seem to be working ok with a work around, so not a huge deal, but would be nice to know :)

[kissu]

Why are you starting a brand new Webpack + Vue2 project nowadays? It will be End of Life at the end of this week.
Start a fresh Vue3 + Vite with the latest and greatest. Oh and use the LTS of Node aka v20.

[maxshuty]

Why are you starting a brand new Webpack + Vue2 project nowadays? It will be End of Life at the end of this week. Start a fresh Vue3 + Vite with the latest and greatest. Oh and use the LTS of Node aka v20.

I wanted it to be tit-for-tat with the legacy application I’m supporting which is still on Vue2. We could get into why that project uses Vue2 still but it would be better suited for another forum or private discussion (tldr: dependencies that do not support anything more than Vue2, it’s a work in progress).

Do you have any idea why this could occur on one machine but not another?

[kissu]

Oh, it's for legacy purposes. In this case, I am not sure why you do not have the same behavior but I definitely recommend starting from scratch aka deleting the git repo and pulling it so that it's all fresh and identical to the one you're pushing the code to.
Better to have something non-working everywhere than something working well on one-side only while crashing once deployed.

And yeah, maybe it comes from the clone or some cache while installing the modules, quite a long way to debug it efficiently tbh.

[edison1105]

Do you have any idea why this could occur on one machine but not another?

This may be because the webpack version that vue-cli depends on is not fixed. This could result in a different webpack version being installed on an old machine compared to a new one. You can check the webpack version in the project's node_modules.