I am new to Elixir and need help resolve error below. I am not clear how I can resolve?
"File app.js not defined in asset manifest"
I have in my Blade files the below two lines which are being pointed to as causing the error.
<link rel="stylesheet" href="{{ elixir('app.css') }}">
<script src="{{ elixir('app.js') }}"></script>
rev-manifest file is as below: It is in public/build/
{
"app.css": "css/app-scheduler-7b1b6567b7f6fa730140.css",
"app.js": "js/app-scheduler.js"
}`
Here is the gulp file `const elixir = require('laravel-elixir');
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js');
});
`
App.js is available in resources/assets/app.js
I have found these webconfig files? Is there anything I should try here
output: {
filename: 'js/[name]-scheduler.js',
path: path.join(__dirname, '/public/build'),
chunkFilename: 'js/[name]-scheduler.js',
publicPath: '/build/'
Your css is inside a path (/css).
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
Related
I have a Laravel 8 app running on Jetstream with Inertia Js and VueJs 3.
When I run: npm run prod
I receive this error:
Exception
Unable to locate Mix file: /css/app.css. (View: /var/www/html/mysite/resources/views/app.blade.php)
http://subdomain.mysite.com/
After changing:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
to
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
and:
<script src="{{ mix('js/app.js') }}" defer></script>
to
<script src="{{ asset('js/app.js') }}" defer></script>
It works well. But isn't this wrong? What is the advantage of using mix instead of asset?
I also tried using <link rel="stylesheet" href="{{ asset(mix('css/app.css')) }}"> but it's still not working. I receive the same error saying that mix is unable to locate the file: /css/app.css
This is a simple Laravel app, without any customizations.
I tried to run npm run prod with the hope that the page size will be smaller, but I see the same page size as for npm run watch or npm run dev (17Mb).
Any advice for reducing the page size for a VueJs Laravel app?
UPDATE
webpack.mix.js content:
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
tailwindcss('tailwind.config.js')
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
mix-manifest.json content:
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
}
Modify the following statements:
#vite(['resources/css/application.css', 'resources/js/application.js'])
For this:
Css: link rel="style sheet" href="{{ mix('css/app.css') }}"
JavasScript: src="{{ mix('js/app.js') }}" defer
In the app.blade.php and guest.blade files located in resources\views\layout
I have a Laravel 7 project and installed bootstrap as well as the ui vue auth package. I'm trying to modify the home (home.blade.php) which extends app.blade.php but I've found that somehow the <div id="app"> in app.blade.php is rendering twice. I put a script tag with a console.log() at the bottom of app.blade.php just before the div tag closes and it outputs twice. However, when I put the script tag outside this div it behaves as it should and it only outputs once.
I found out that this is due to a script tag in the head of app.blade.php:
<script src="{{ asset('js/app.js') }}" defer></script>
When I commented that line, everything worked fine! So, my questions are:
Why is this script tag here? Why does it make everything run twice? Do I really need it? Will I encounter problems in the future by not having it?
webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
resources/js/app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
app.blade.php:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Icons -->
<script src="https://kit.fontawesome.com/36a988e261.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<script type="application/javascript">console.log('app')</script>
</div>
</body>
</html>
Edit: Since it's been a few hours and no answers I decided to set up a repo in case anyone wants to see first-hand what the problem is.
I faced same problem, in my case it was due to some iframes in the page targetting # src url. I realized it was written several times that message in the console :
[Vue devtools message in console][1]
So, I created a new special route
Route::get('/frame', [PagesController::class, 'frame'])->name('frame');
which return an empty string like
/**
* Used for iframes to override dowloadinf twice page content
*/
public function frame() {
return "";
}
And it solved my problem. Maybe it can be the same for all ressources fetched at "#"
.
[1]: https://i.stack.imgur.com/Z55BX.png
I found out this is because of having script tags outside of a Vue component. I deleted the script tag in app.blade.php and put the ExampleComponent that comes when installing vue with laravel which has a console.log inside the mounted() method and it only gets called once.
Still, I have no idea as to why this happens. If someone could shed light into this matter that would be awesome. Maybe I'll post another question with this new insight.
I used these vue js files to build my form in Larval.
When I call these files in Larval I get a blank page.
The structure of my files is as follows:
And the contents of app.js file is as follow:
import Vue from "vue"
import App from "./components/App.vue"
import store from "./components/store"
import VeeValidate from "vee-validate"
Vue.use(VeeValidate);
import "./components/directives"
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount("#app");
Of course, I get the below warning when I run nmp run watch's command.
WARNING in ./resources/js/app.js 5:8-19 "export 'default' (imported as
'VeeValidate') was not found in 'vee-validate' # multi
./resources/js/app.js ./resources/sass/app.scss
My question is: How to import external vue js files to laravel project?
First thing you need to include app.js to your blade file like this
<script src="{{asset('js/app.js')}}"></script>
after that if you want to use vue js components in you blade app you need to define them in your app.js like this:
Vue.component('home', require('path to your component').default);
and in your blade under div #idd add your tag <home></home>
use src="{{ mix('js/app.js') }}"
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}" />
<title>VueJS CRUD Operations in Laravel</title>
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Here is my Bootstrap links which I'm using:
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
and js
<script src="{{ asset('js/vendor/jquery-1.12.0.min.js') }}"></script>
but both are not loaded in my template.
routes are below:
Route::get('/', function () {
return view('home', ["bodyClass" => ""]);
});
Used of bodyClass also but not working(<body class="bodyClass">) in html code. Inside the body all needed (header, footer, banner and content) include. But can't run so.
Here is my website Link: http://ecodexpert.com/
Wondering how can I link with blade syntax to my jquery/javascript files?
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/bootstrap.js"></script>
This didn't work:
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/jquery.min.js') }}">
<link type="text/css" rel="stylesheet" href="{{ URL::to('js/bootstrap.js') }}">
URL::to($param) directs to your root folder (/public) and adds the string folders. URL::to('js/bootstrap.js') directs to /public/js/bootstrap.js. this looks correct to me.
although you used a css linking tag for javascript. try using:
<script src="{{ URL::to('js/jquery.min.js') }}"></script>
<script src="{{ URL::to('js/bootstrap.js') }}"></script>
You should use the following:
<script src="{{ URL::asset('/js/jquery.min.js') }}"><script/>
<script src="{{ URL::asset('/js/bootstrap.js') }}"><script/>
This will always work. If you are creating a package in workbench this is also the way to go.
And if you want to publish your assets to public you will do:
php artisan asset:publish --bench="vendor/package"