vue-google-charts error n.load is not a function - vue.js

I'm using the vue-google-charts package (https://www.npmjs.com/package/vue-google-charts) to display google charts in my application (vuejs2.x) and until now it worked perfectly fine.
But now i get the following error:
Uncaught (in promise) TypeError: n.load is not a function
at vue-google-charts.common.js:1
at new Promise (<anonymous>)
at vue-google-charts.common.js:1
and in my code the following messages shows up:
I read in several articles that i can create a file vendor.d.ts and put the following inside:
declare module 'vue-google-charts';
I created this file and placed it in the "src" folder but it still doesn't work. The problem is, that when I test it locally the application works perfect, all graphs are displayed etc. but as soon as I deploy the application to firebase the graphs don't work anymore.
I also read that the problem can be solved by put the following setting in the tsconfig.json file:
"noImplicitAny": false
But I don't have a tsconfig.json file I only have package.json and vue.config.js. so don't know where to put this setting.
Thanks for your help

I couldn't find any answer to this problem but I figured out that this problem only exists in the index.vue page. If I use another page the problem vanishes.
So i created a second page with the graph inside and redirected the index-site to the second page with the graphs.
I know it doesn't answer the problem but it is a workaround I can live with.

Related

Direct nested URL fails with error "Uncaught SyntaxError: Unexpected token '<'" - Create React App/React-router-dom/Netlify

I've got an app created with create-react-app (with react-router-dom) and deployed with Netlify. Whenever I try and route to a page through a direct (nested) URL, such as 'https://jvcparry.com/products/indie', it fails to load a page and gives the errors
Uncaught SyntaxError: Unexpected token '<' main.e3eaf229.chunk.js:1
However when I navigate the deployed version through links, everything loads fine. I also don't get this error when I'm running the app locally, which I guess means it must be something to do with deployment?
I've trawled through all the other posts I can find with this error, and also things to do with Netlify/CRA deployments. I've got a _redirects file with '/* /index.html 200' in it in my /public folder, and I've tried refactoring my routes to use code-splitting but that's made no difference.
My code is on github here: https://github.com/NatClamp/jvcparry
Deployed version is here: https://jvcparry.com/
and if you go to https://jvcparry.com/products/indie you'll see the error I'm getting.
Can anyone shed any light on this? Thanks in advance
A rigid but working solution is to update _redirects file this way:
/*/main.e3eaf229.chunk.js /main.e3eaf229.chunk.js 200
/* /index.html 200
You can also be updating this file every time you build new js bundle during your CICD run

Adobe analytics with vue js adding external script

Im struggling to add adobe analytics external scripts to my Vue js project. The client uses Adobe analytics and im battling to add it to the project without the project complaining.
The external adobe script looks like the following:
//assets.adobedtm.com/file.min.js with async
Then it is required that you end it by adding the following just before the closing body tag:
<script type="text/javascript">_satellite.pageBottom();</script>
When the project starts it complains in console that $ is not defined because it is defined in webpack when i start the project and im guessing its not finding the alias.
This is the error:
VM29714:3 Uncaught ReferenceError: $ is not defined
Then further down it complains that it doesnt know what _satellite is:
login:54 Uncaught ReferenceError: _satellite is not defined
I just need the scripts and satellite close to be added to the project, the rest will work once these are added.
Ive tried added the scripts by injecting them into the head tag on runtime but that also doesnt work.
If you are implementing Adobe DTM, you cannot inject the header script dynamically. It must be placed directly on the page without async or deferred attributes.
If you are implementing Adobe Launch, you can inject the header script dynamically and asynchronously. And if you do this, you do not include the footer (_satellite.pageBottom()) code.
Your script example isn't explicit, but the .min portion implies you are using Adobe Launch.
VM29714:3 Uncaught ReferenceError: $ is not defined
This is not directly related to either Adobe DTM or Launch. You may possibly have some other script or code block deployed inside the DTM or Launch interface that references $, but that's a separate issue to work out. Yes, it may be coming from a DTM or Launch script according to the js console, but keep in mind that DTM/Launch is a tag manager. It hosts and deploys other tags/scripts. So you need to do some digging to see which tag/script from which Rule references it. Start by looking at the stack trace to find out where it's coming from.

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

Prestashop Productcomments Module Issue

I am experiencing a problem with the Productcomments module which I am using in a custom module and I cannot figure out how to fix it. The problem is with the star rating in the Productcomments form itself. This form works perfectly in a localhost environment - see images 1 and 2, but not on a live server - see images 3 and 4. On the live server it is showing no stars, just radio buttons, and no delete button for removing the stars.
Form as it looks on WAMP
Code from Chromes Inspect for WAMP
Form as it looks on Live Server
Code from Chromes Inspect for Live Server
Disabling the link to the following 2 js files recreates the problem on the local server which would suggest that the problem lies in the links to these two files on the live server, however I have checked all links to these files and they are correct, as are the permissions for these files.
jquery.rating.pack.js and productcomments.js
Occasionally when I clear cache under Advanced Parameters > Performance I get the following error message:
Fatal error: Uncaught --> Smarty: unable to write file /home/productm/public_html/cache/smarty/compile/10/e2/20/wrt5cbbb0747109d3_91450142
<-- thrown in /home/productm/public_html/tools/smarty/sysplugins/smarty_internal_write_file.php on line 46
This problem applies to all 1.6 versions of Prestashop tested.
Any suggestions on how to fix this problem would be appreciated.
Thanks
Kathleen
The error code you've got from clearing cache is linked to permission problems.
Here's probably a duplicate of your issue: How to fix erorr "Fatal error: Uncaught --> Smarty: unable to write file"?
Check that your prestashop files are set to 644 and folders 755 permission. (not just the js files you've mentioned).
Also if you manually moved the module to your live server(ftp), check the ownership of those files.
Edit:
I'll add this to the answer since the permissions didn't fix your problem.
looks like you have a prestashop bug going on with the JS (Synchronous loaded scripts)
here's a patch to fix that, maybe it fixes your original problem.
https://github.com/PrestaShop/PrestaShop/pull/6749/commits/73fd8dbed9f413a70f7d04fc4badd48f00ca501a

BigCommerce Stencil - TypeError: window.stencilBootstrap is not a function

Since around 10:30am EST today, I have been unable to apply stencil custom themes successfully. Any theme bundled before 10:30am EST today works fine when applied to a storefront. The themes work fine locally, and there are no errors when bundling, but once the theme is applied, the page loads HTML without images or any styling applied. The error in the console reads "TypeError: window.stencilBootstrap is not a function".
I have verified the issue on multiple accounts, and even occurs when trying to bundle and apply a fresh Cornerstone clone.
There are no reported issues on status.bigcommerce.com
Is anyone else having similar issues today?
Do I need to update my CLI?
Thanks
At the time of giving command stencil bundle, it will clear 'assets/dist' files. So that throws error theme-bundle.main.js file missing and window-stencilBootstrap is not a function.To avoid Clearing 'assets/dist' follow below steps.
Comment this below line in webpack.conf.js which is in root folder
/new CleanWebpackPlugin(['assets/dist'], {
verbose: false,
watch: false,
}),/
After this, run stencil bundle 'asset/dist' folder will not clear by doing so. Check u have 'assets/dist' folder then upload. After uploading your theme, front end will works fine.
This is a bug at stencil-cli.
There is an open issue for it: https://github.com/bigcommerce/stencil-cli/issues/379
I have just submitted a pull request with a possible fix: https://github.com/bigcommerce/stencil-cli/pull/409
In the issue, I suggest a workaround which can be done in the theme, without having to modify stencil-cli.
At stencil.conf.js, remove these two lines from the top of the file:
var webpack = require('webpack');
var webpackConfig = require('./webpack.conf.js');
Copy them as the initial lines of development and production functions, where these variables are actually used.
This change usually fixes the issue.