I am currently developing 2 Vue apps. Both of them run from npm.
App1 wasn't created by me. I got involved in it when it was already a stable production app (so I may have missed some configuration).
App2 was created by me and I'm the only developer.
In both apps I use vue-router to change views and I found 2 different situations:
When I run both apps locally (with npm): App2 throws errors (to
console) from vue-router when I try to navigate to the same view
(Navigation Duplicated), but App1 doesn't.
When I run both apps on server (online): Both apps throw this error to
console.
I know what the error is about, but what I don't know is why App1 doesn't throw it. I already searched App1 for any error catching methods, which maybe were implemented to not throw the errors, but I didn't find any.
Because of difference between local/server functionality, I don't think it's a vue-router issue, but rather Vue itself, because there's also second issue with App1.
In App1 I use vee-validate and it throws errors regarding not available validation items (Validating a non-existent field: "result". Use "attach()" first.). The error can only be seen online (server), but not locally (npm) - for me it confirms it (as I didn't find any error catching methods regarding vee-validate).
Is there any setting in Vue, which could cause the errors not to be thrown to console?
Edit:
Reproduction of error: To reproduce and throw vue-router NavigationDuplicated error you should implement component in your Vue app and click it twice. The first click should navigate you to view, the second click should throw error in console.
Related
I have a VueJS project with a "fakeDB.js" file that drives the database via local storage (browser) during development. After testing this locally, everything is working and I can navigate to pages perfectly fine.
I'm now running npm run build to get the js/css files to place into a Cordova application for an Android application. After copying these files into the application and switching the VueJS application to use the SQLITE3 inside Cordova I experience issues.
My login pages work perfectly fine, I can view the dashboard with all the jobs inside it but if I click into a job it throws a white screen.
After hooking up adb debug, all I can see is an error in the chunk-vendor file that npm run build created which, AFAIK, contains the vendor packaging.
The error message I get is:
"TypeError: Cannot read property 'substr' of undefined", source: file:///android_asset/www/js/chunk-vendors.f024a0c1.js (7)
Of course, this file is obfuscated and minified so Line 7 is VueJS 2.6.12.
I have inherited this application with no previous experience so I'm taking an educated guess around "chunk-vendor" that I perhaps need to upgrade the depedencies surrounding this application to get past this issue but I'm unsure how I can debug this further inside of android studio.
How can I go about solving this issue? Is there a way to upgrade safely inside of npm?
Update: I have ran a npm update and I'm now on VueJS 2.7.10 but still getting the same issue
As a summer project, I am creating an internet radio application, and settled on using Spotify's web playback API. I was going through their recommended guide of starting a react js app (of which can be found HERE), until I got to authorizing the user through a web call through the Router module:
router.get('/auth/login', (req, res) => {...}
These used to be included in webpack version 1-4, but no longer in v5. I was able to remedy this by individually installing all of them, except for fs. From what I have found, fs is a node module that can not be accessed in a web browser, so the react js application refuses to recognize it and gives me this error:
ERROR in ./node_modules/mime/mime.js 3:9-22'
Module not found: Error: Can't resolve 'fs' in 'E:\Code\Internet Radio\spotify\spotify-web-player\node_modules\mime
MANY other threads recommend adding this snippet to the resolve.fallback in webpack.config.js:
"fs": false
but seeing as it is required for the provided SDK and react js application to function, I am stuck.
I have looked at alternatives such as fs-browserify, like-fs, filer, and fs-web, but they either lead to more errors worthy of redesigning how fs was implemented originally, or cause my react js app to load a web page with almost empty HTML, and stating
You need to enable Javascript to run this app
Is there maybe a way to revert back to a previous webpack version, or is there something I am completely failing to find in the sea of about 30 open tabs looking for a solution on my own
I have a Heroku test environment with a Ruby on Rails backend and React front-end. Recently, I pushed out some changes to the test environment and am now getting a blank screen with one of two errors. Either:
<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.d825ec61.js"></script></body>
or:
Uncaught TypeError: Cannot read properties of undefined (reading 'apply')
at redux.js:523:1
at o (redux.js:87:1)
at Object.<anonymous> (store.js:14:15)
at t (bootstrap 145a692a3e0162c12867:19:1)
at Object.<anonymous> (main.d825ec61.js:30447:65)
at t (bootstrap 145a692a3e0162c12867:19:1)
at Object.<anonymous> (main.d825ec61.js:29463:18)
at t (bootstrap 145a692a3e0162c12867:19:1)
at bootstrap 145a692a3e0162c12867:62:1
at bootstrap 145a692a3e0162c12867:62:1
depending upon who is trying to open the app.
Here is a link to the test site on Heroku: https://alutiiq-lang-test.herokuapp.com/ Please note that it is a free dyno, so takes a minute to load (if it loads for you!), and here is the repo I am working in https://github.com/migobach/alutiiqLang.
When I do roll back to a previous version, it works fine, but I cannot figure out what the difference is aside from on package that I added: "react-contenteditable": "^3.3.5", which I need for admin privileges.
My Heroku logs have no errors that should prevent rendering, and the build is successful, however, nothing renders.
The solution ended up being related to Redux. After purging all caches, and testing locally in an incognito window, I was able to see the error in greater detail which helped me ask better questions and lead me to this solution. After commenting out this line from my code:
window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
I was able run locally with no issue, and then push to Heroku successfully.
I'm trying to integrate Material Design Lite in a VueJS application. I found the following blog-post:
https://posva.net/js/2015/08/26/using-material-design-lite-with-vuejs
Unfortunately, when I add this to my "main.js" file created from the vuejs cli tool I get the following error:
ERROR in ./src/main.js
✘ http://eslint.org/docs/rules/no-undef 'componentHandler' is not defined
/data/src/main.js:474:5
componentHandler.upgradeElement(this.el)
I pushed a branch to github so the code is visible. It contains:
The commit introducting MDL and the error
The "index.html" file containing the links to the CDN
The VueJS "entry-point" which calls componentHandler
I'm fairly certain that MDL is loaded after the VueJS app is loaded, so the reference does not exist.
How can I make sure VueJS is only loaded after the dependencies are available?
Or, as I'm using webpack to build the code: Is there another way to integrate MDL? Maybe packing it up into the application?
That is a linting error not an actual code error.
The linter couldn't find a method/variable called componentHandler. Doesn't necessarily mean that the code doesn't work, try using window.componentHandler to get the linter to stop complaining. You could also look into linter ignore rules to ignore that specific line and see if it builds then.
The linter runs in the build process in the webpack vue template, so the build will fail since it couldn't find a the reference you used in your vue codebase.
The linter doesn't know about the scripts you load externally in your html files.
As Bert said, I would also remove the defer
If you are unfamiliar with linters, all it does is look over your js code and check that you don't use undefined variables (like in this case), or use wrong indentation, etc. The vue template put the linter in the build process so you won't get a proper build until you have fixed everything the linter wants you to fix. You could disable linting entirely, but I recommend against it as it improves overall code quality if you keep it around imo.
I'm setting-up a continuous integration environment for some react-based mobile app and after a react upgrade, I got this error:
Uncaught Error: Invariant Violation: EventPluginRegistry: Cannot inject two different event plugins using the same name, `TapEventPlugin`.
Do you have any idea why this happened and how to solve it ?
This happens with React v0.14.7 and react-tap-event-plugin v0.2.2.
To fix this issue require only one time react-tap-event-plugin lib in your app, for example in your main js file:
var tapEventPlugin = require("react-tap-event-plugin")();
The other answer responds to your question directly, but, an indirect answer is that this error is caused because your CI is currently updating your dependencies, and it most certainly should not be.
You can solve this by locking your dependencies and only updating when you're either ready or need to.