friendly-errors-webpack-plugin | Recognizes certain classes of webpack errors | Build Tool library

kindly update the custom-webpack with ^12.1.3

Did you followed this tutorial? https://vue-loader.vuejs.org/guide/pre-processors.html#sass

You may try

Actually there is no issue in the code this issue was being faced due to custom NgbDateAdapter which was provided in the core.module.ts which was imported in app.module.ts which was interrupting the default "fromModel" method of NgbDateAdapter with custom method. Actually I was unaware of this was being done as I was using #JHIPSTER form my project and this was done by jhipster datePickerUtility

To work with webpack you need to provide more configurations, vue create project-name scaffolds new project to which you could add vuetify using

maybe you can try to npm i -g npm-check-updates then in the root folder try to execute ncu -u this will update your dependencies, devDependencies and peerDependencies

The version of node-sass@4.11.0 is a beta version and seem to have a problem with GitHub.

Try to upgrade to "node-sass": "^5.0.0" in your package.json and then re-run the command npm install. If it don't work, please paste your entire package.json file there.

I ran into this same problem trying to install inertia/react on top of laravel 8. I fixed the error by adding the Pages folder to resources/js in the laravel project. It happens because following the inertia doc, you reference

resolveComponent={name => require(./Pages/${name}).default}

inside the app.js render function but that folder doesn't exist until you create it. Best of luck!

Pretty sure that this is to do with your webpack coniguration. I think it's because style loader is trying to inject your styles into the DOM (which obviously is not present on the server side). Hence the reference error. I'm not 100% sure, but try only using vue-style-loader. There's no need to put it in a chain with style-loader as they are pretty much doing the same thing.

Also run your build command on the project and take a look into the server-bundle. That will show you who's trying to access the DOM.

EDIT:

As a general approach to what you're trying to do, you should also include sass/css in one single rule, like this:

Unfortunately, it seems there's no "eslint" way to perform such a report.

If you run eslint with debug options, you get a lot of information about how the program runs: what file is processing, with which configuration, how it fails, etc., but not from where a rule was taken.

I managed to find it by simply running a grep + find within the node_modules directory, and being sure which module was providing the rule by simply changing it and seeing the eslint results afterwards.