Setting up SharePoint 1.16.1 Web Part with Vue3. Get error TypeError: Cannot read properties of undefined (reading 'NormalModule') after gulp serve - vue.js

I want to set up a project using SharePoint 1.16.1 and Vue3. I am using vue-loader and vue-class-coponent as well other packages. Whenever I tried to run gulp serve I get the error message 'TypeError: Cannot read properties of undefined (reading 'NormalModule').'
I had set up the project using yo #microsoft/sharepoint and following the commands using No JavaScript framework.
Error Message:
[10:49:11] Error - [webpack] TypeError: Cannot read properties of undefined (reading 'NormalModule')
[10:49:11] Error - 'webpack' sub task errored after 363 ms
Cannot read properties of undefined (reading 'NormalModule')
I tried installing a later version of webpack, but that did not work as webpack is a core dependency of vue-loader. Considering that that is where one of the issues lie, how do I fix it?

Related

Errors when trying to integrate PruneCluster into Webpack

I am trying to integrate PruneCluster for Leaflet into my Webpack configuration, and I’m doing exactly what’s in the Readme https://github.com/SINTEF-9012/PruneCluster#webpack--npm
But I keep getting this error
Module build failed (from ./node_modules/exports-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/Users/username/Documents/Repository/project-name/web/app/themes/project-name/node_modules/exports-loader/dist/index.js:23:24)
Are there any dependencies I am missing or do I need some form of config file?

Vue CLI - vue add pwa causes TypeError: Cannot read properties of undefined (reading 'tapAsync') error

I'm building a web app with Vue 3 and after executing vue add pwa I get the following error:
./node_modules/#vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js:62
compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(ID, (data, cb) => {
TypeError: Cannot read properties of undefined (reading 'tapAsync')
How should I resolve this??
This one had me swimming for a bit as well.
upgrade the pwa plugin.
vue upgrade pwa
For me, I was at version 4.5.15 and the latest was 5.0.1

getCustomRepository returns a repository object with `this` being undefined when entities and repositories come from an npm package

I've moved my TypeORM entities, migrations and repositories to a shared npm package.
When using this package I'm trying to do const repo = getCustomRepository(MyRepo)
However, it appears that the repo has this as undefined. And I'm getting errors like TypeError: Cannot read properties of undefined (reading 'find').
Basically the same issue as in this Reddit thread: https://www.reddit.com/r/typescript/comments/p8932l/this_is_undefined_on_typeorm_custom_repository/
I'm not using NestJS in my case.
Does someone have a clue about what's going on and how to make it work?

marzipano in Vue error - index.js window.bowser undefined

I'm having trouble with using Marzipano library in Vue.
I made Marzipano folder with marzipano tool and implanted in my Vue project.
But when the project is loaded, marzipano's 'index.js' file can't read below variables.
window.bowser
window.screenfull
window.APP_DATA
I get messages like this:
Uncaught TypeError: Cannot read property 'msie' of undefined
at webpack_require__
When I open the 'index.html' file from "Go Live" live server, it works perfectly. But get those error messages and get nothing when I run by vue-cli-service serve & webpack.
So I have a feeling I have to do something with webpack config setting.

Nuxt generate ERROR Cannot read property '__esModule' of undefined

When I run nuxt generate on my project it generates this error several times:
ERROR Cannot read property '__esModule' of undefined 11:09:43
at ensureCtor (node_modules/vue/dist/vue.runtime.common.js:2262:10)
at node_modules/vue/dist/vue.runtime.common.js:2317:26
at node_modules/vue/dist/vue.runtime.common.js:324:10
at process._tickCallback (internal/process/next_tick.js:68:7)
I would report it as a bug but I failed to reproduce it outside of my closed-source project. I'm also not sure if it's an issue with Vue or Nuxt, might even be both.
The error seems to be related to using async components which I do use. The line causing the error is in an async component resolver: https://github.com/vuejs/vue/blob/dev/src/core/vdom/helpers/resolve-async-component.js#L18
My project has other configurations too that don't use async components and are not having this issue.
What I would like to know is how it might be possible to avoid these errors and still use async components.