Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script> , as they will not be parsedError Code
There is quite a couple of things that can trigger an error like this, In this page I am going to guide you through fixing this error.
Solution One: Check for tags you have not closed yet. <div>
Forgetting to close a tag I initially open is very common and its one of the top reasons many of us hit this error in the console.
Go through your code and be sure you have not left any tag unclosed.
Solution Two: Properly Import your Js Script
Another reason you might be facing this issue is that you are adding this script tag:
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
Inside the Vue root element (
script tags inside the Vue managed elements
Move it outside the Vue’s root element.
Try placing it just before your app script tag on the bottom of your file:
<!DOCTYPE html> <html lang="en"> <head> <!-- ... --> </head> <body> <div id="app"> <!-- ... your vue app / no script tag allowed here ... --> </div> <script src="https://www.google.com/recaptcha/api.js?" async defer></script> <script src="http://127.0.0.1:8000/js/app.js"></script> </body> </html>
Solution Three: Define Script type
You can use script tag in this way and it will work fine. I was facing the same problem when I used
<script></script> tag without specifying its type. After using the type attribute Vue did not warn me for critical error:
Solution four: Last Resort
If you have tried all of the above and nothing seems to be working, then run an update. chances are, one of your dependencies might be out of date and updating it might help you get back to code, but this is rarely the case for the above error.
Npm run update