build a project using Vuejs 3 in Laravel 8 went running on Laravel server it works well but went I run npm run prod and deploy it in Cpanel compilation fails with Uncaught SyntaxError: 59 in the console I have remove style and script tags from blade file but still have a problem. please I really need your help
Please check your final html code. May be there you will find a <style>...</style> or <script>...</script> tags... These are the main problem of Uncaught SyntaxError: 59. Yes, it will be ignored in local and development environment but won't in production one...
For example:
<div id="app">
<script>
alert('yes');
</script>
</div>
The main idea to put script and style tags out of the div#app element.
Related
I am trying to use #yaireo/tagify in my Laravel 9 project. (https://www.npmjs.com/package/#yaireo/tagify)
I imported it with npm i #yaireo/tagify --save
Then put import Tagify from '#yaireo/tagify' in my app.js file, then ran npm run build on my project.
I can verify the code gets added to the project as it appears in my previously empty app.abc123.js file by looking at the sources within Chrome. The file looks compressed / optimized which I expect to happen.
However, I get this error in the console jquery-3.6.1.min.js:2 Uncaught ReferenceError: Tagify is not defined
I've also tried copying the jQuery.tagify.min.js file to /resources/js/jQuery.tagify.min.js and then using #vite(['resources/js/jQuery.tagify.min.js']) within the blade template, then npm run build to build the files. Again this works, and the file is included in the sources, but the exact same error.
The only way I were able to get it to work without the error was by copying jQuery.tagify.min.js directly to /public/build/assets/jQuery.tagify.min.js and using <script type="text/javascript" src="/build/assets/jQuery.tagify.min.js"></script> in the blade template.
This says to me that vite seems to be doing something when it's trying to compress/optimise the file that breaks the functionality.
I recall running into the same issues with bootstrap and JQuery and ultimately decided to reference the CDN for those files.
This is the raw jQuery.tagify.min.js file: https://pastebin.com/PzK7ps25
This is the file after being processed by vite / npm run build: https://pastebin.com/1FCDXyty
What am I doing wrong?
Edit:
Not that it should have any bearing on the issue, the code I am using within the blade template is:
<input name='basic' value='tag1, tag2, group 3, etc...'>
<script>
$( document ).ready(function() {
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=basic]');
// initialize Tagify on the above input node reference
new Tagify(input)
});
</script>
I am new to Laravel Vue and I recently came to a project. at my localhost everything working fine, but when I pushed my project to the server via git, the Vue components not working. it says this error in the console...
Uncaught SyntaxError: Unexpected token '<' app.js:1
there is no npm install on the server so I run the command locally "npm run production" and pushed the app.js and all other js files via git to the server.. the server files are the same as localhost but Vue components not working on the server, but they are running on localhost..., I am stuck to the problem with 3 days, any help will be highly appreciated.
Thanks
Just for clarity, the CSS file is rendering but the JS file not
In my console:
Resource interpreted as Stylesheet but transferred with MIME type text/html: /rider/auth/public/css/app.css.
Uncaught SyntaxError: Unexpected token '<' app.js:1
So the issue was in the .env file , and there was a variable "ASSET_URL = ./public" , this was not allowing the application to go to the correct path . Thanks #Aless55 for your great support
I'm using laravel-mix with Vue 3 and I'm getting the following error:
ERROR in ./resources/js/components/App.vue 2:0-54
Module not found: Error: Can't resolve './App.js/?vue&type=script&lang=js' in './resources/js/components'
components/App.vue
<template>
<div id="app">
<h1>Hello world</h1>
</div>
</template>
<script src="./App.js/"></script>
components/App.js
export default {
name: "App",
};
In my previous projects with Vue 2 and Laravel 7 I didn't get these errors. Now I'm using Vue 3 and Laravel 8, but don't know how to fix it. I have installed vue-loader and vue-template-compiler so I guess it should work.
Does Vue 3 allow importing a script from a separated js file? In Vue 2 that was possible (I like to separate the HTML from the JS because of some issues with my editor and also for better organization.)
This not related to Vue3, just you added slash after file so it's understanding as a dir.
<script src="./App.js/"></script>
to
<script src="./App.js"></script>
I'm creating a new Blog web application using laravel. In this app in need an editor to create blog posts so I use ckeditor for this.
I have used the official ckeditor documentation to install and setup the ckeditor but it is not show the editor in my textarea.
This is the script I used
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace('article-ckeditor');
</script>
This is implementing ckeditor
<div class="form-group">
{{Form::label('body', 'Body')}}
{{Form::textarea('body', $post->body, ['id' => 'article-ckeditor', 'class' => 'form-control', 'placeholder' => 'Body Text'])}}
</div>
Here I found some error in console log
Failed to load resource: the server responded with a status of 404 (Not Found) (ckeditor.js:1)
Uncaught ReferenceError: CKEDITOR is not defined at create:108
After run the php artisan vendor:publish --tag=ckeditor command i got more new errors.
Uncaught TypeError: Cannot read property 'unselectable' of null (ckeditor.js:326 )
at b (ckeditor.js:326)
at a.<anonymous> (ckeditor.js:322)
at a.h (ckeditor.js:11)
at a.<anonymous> (ckeditor.js:13)
at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:14)
at a.fireOnce (ckeditor.js:13)
at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:14)
at Object.<anonymous> (ckeditor.js:252)
at g (ckeditor.js:233)
at Object.load (ckeditor.js:233)
I'm creating a blogging app so I need an editor but it's not working and I can't solve this because it's not show any errors. The whole application is working property except this editor.
From the error it seems that the ckeditor.js file is not loading.
The official documentation of UniSharp/laravel-ckeditor says you should publish the resources via this command:
php artisan vendor:publish --tag=ckeditor
After that command you should have this file: your_project_path/public/vendor/unisharp/laravel-ckeditor/ckeditor.js.
Update: The last error (Cannot read property 'unselectable' of null) seems to be a known issue of ckeditor with the default laravel app.js, they recommend to remove defer from the line loading app.js in the template app.blade.php:
<script src="{{ asset('js/app.js') }}"></script>
I've recently set up my Laravel 5.7 project with GIT. I did a clone onto a new computer and ran composer install. I keep getting a syntax error (T_CONSTANT_ENCAPSED_STRING).
I'm using a Upgraded version of Laravel 5.7(started at 5.1). Using the Bican Roles package to manage roles on the site.
I've tried reinstalling and uninstalling the package. Also tried wrapping it with double parentheses. (thats the part not formatting). all to no avail
//before rendering in app.blade.php
#role('admin')
// after rendering
<?php if (Auth::check() && Auth::user()->is'admin'): ?>
Errors I'm getting when trying to load the page.
syntax error, unexpected ''admin'' (T_CONSTANT_ENCAPSED_STRING) (View:
C:\wamp64\www\dashboard\resources\views\app.blade.php) (View:
C:\wamp64\www\dashboard\resources\views\app.blade.php) Previous
exceptions syntax error, unexpected ''admin''
(T_CONSTANT_ENCAPSED_STRING) (View:
C:\wamp64\www\dashboard\resources\views\app.blade.php) (0) syntax
error, unexpected ''admin'' (T_CONSTANT_ENCAPSED_STRING) (0)
This part leads to error: Auth::user()->is'admin'
It should be Auth::user()->is('admin'). You should check the code where the Blade directive #role is defined.