Not showing the real missing module about friendly-errors-webpack-plugin

[dealloc]

Well, I am using the vue webpack template, here are the steps I found to reproduce the issue:

• install the template (vue init webpack friendly-errors-demo) (just follow the wizard to complete)
• open the file src/components/Hello.vue and change the style tag from this

<style scoped>
...
</style>

to this

<style scoped lang="scss">
...
</style>

which should trigger something like this:

A slightly more advanced reproduction, but with a clearer demonstration of the error would be if you create a separate scss file and attempt to import that, which results in something like below:

as you can see, on the left the plugin tells me that there's a problem with the import of ./style.scss while the browser clearly shows that it's sass-loader not being found causing the problem.

Hope that helps, if you need more info let me know

[dealloc]

I encountered the same issue with sass-loader, it's rather frustrating when being pointed in the wrong direction regarding errors

[geowarin]

Could you provide a repro, or even better contribute a test via a PR?
Thats would help me a great deal to fix this issue!

[dmnrmr]

Any progress on this?

[donnysim]

Just encountered this, from my debugging:

function isModuleNotFoundError (e) {
  const webpackError = e.webpackError || {};
  return webpackError.dependencies
    && webpackError.dependencies.length > 0
    && e.name === 'ModuleNotFoundError'
    && e.message.indexOf('Module not found') === 0;
}

it's not e.name === 'ModuleNotFoundError' it's webpackError.name === 'ModuleNotFoundError'.
Though it gets glued up at the top with other output, while the details are at the very bottom.