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

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.

Related

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

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?

sails.js stopped to work after cloning from repository

After adding to git and cloning sails.js application back to another desktop my application stopped to work correctly. e.g. I am able to successfully run sails lift command, however when trying to load login page I see that the page is not loaded properly:
and I receive multiple errors in browser console (back end console is ok and does not drop any errors):
cloud.setup.js:13 Uncaught ReferenceError: Cloud is not defined
at cloud.setup.js:13
Uncaught ReferenceError: parasails is not defined
at ajax-button.component.js:12
ajax-form.component.js:20 Uncaught ReferenceError: parasails is not defined
at ajax-form.component.js:20
Uncaught ReferenceError: parasails is not defined
at js-timestamp.component.js:15
...
I checked node_modules folder and parasails is included there.
I didn't include node_module to my repo as I can always run npm install after cloning.
I managed to create and successfully run a new sails.js application on my desktop without any issues.
So, there must be an error with the files I pushed or didn't pushed to git.
In .gitignore file I had dependencies/ folder excluded.
That rule was excluding any file in assets/dependencies subfolder, where a number of sails.js files are located, e.g. parasails.js, etc.

How to fix relative module error for a newly created nuxt.js app with starter template?

I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template

Uncaught syntax error: unexpected token < error

I'm using service worker and caching with workbox using webpack for a vuejs app. While it worked fine until now, when I pushed new changes to our app, the app breaks after reloading the page and gives this error. Also, in the network tab, I see that it is requesting a non-existing app.js build file which was a previous deploy file. How do I solve this?
If you observe the image, you can see that the request is going to older app.js file while in the dist folder to the left, the hash of app.js bundled is different.
error image

Uncaught ReferenceError: require is not defined (Typescript)

I'm trying to make this example work in typescript. But for some reason I get an error when I run it: Uncaught ReferenceError: require is not defined
I don't really understand why I am getting this problem (I am quite new to Typescript and Vue).
The reason I use
import Vue = require('../libs/vue/index')
import * as vts from '../libs/vue-typescript-component/vue-typescript-component'
is because my node_modules are not a part of the project, so I link to the files in my libs folder, which as you can see is included in the wwwroot