In Laravel 6/nwidart/laravel-modules 7 app I installed proengsoft/laravel-jsvalidation
in the directory of my module but I got errors that
Class 'JsValidator' not found
When I used proengsoft/laravel-jsvalidation for all app and in blade file I had :
<script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
{!! JsValidator::formRequest('\Modules\Pages\Http\Requests\PageTypeRequest', '#form_page_type_edit'); !!}
But after I removed proengsoft/laravel-jsvalidation in root app and installed under my module
I found the file at path Project/Modules/Pages/vendor/proengsoft/laravel-jsvalidation/public/js/jsvalidation.js
and tried :
<script src="{{ asset('Modules/Pages/vendor/proengsoft/laravel-jsvalidation/public/js/jsvalidation.js')}}"></script>
But still the same error.
I tried
composer dump-autoload
both in app root and in package dir and failed.
Which way is correct ?
Thanks!
Related
i just have a complete clear blade template file which manually add the app.js file in local server machine . the error i faced is GET http://127.0.0.1:8000/js/app.js net::ERR_ABORTED 404 (Not Found)
here is the code i used <script src="{{ asset('js/app.js') }}" defer></script> to blade file
whats wrong ?
could someone help me please ?
you have to configure your webpack.mix.js or vite.config.js then do npm run. After that public/js files will be created.
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 am using laravel filemanager:
https://unisharp.github.io/laravel-filemanager/installation
When I publish public from vendor everything works except JS files.
It still uses js files from vendor instead from public.
I tried:
Run composer dumpautoload
Clear all cache after any code changes, both in laravel and browser.
Deleting js files from public directory does nothing but when I delete
them from vendor folder it says they are missing even when they are in
public directory..
Well I found out that only one js/script was not used from public but vendor directory.
Inside vendor views directory => index.blade.php I found:
<script>{!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/script.js')) !!}</script>
{{-- Use the line below instead of the above if you need to cache the script. --}}
{{-- <script src="{{ asset('vendor/laravel-filemanager/js/script.js') }}"></script> --}}
And commented vendor script and uncommented public one.
Now it works.
How do I add a third party js file to specific blade views?
Basically I want to add gridstack functionality in a dashboard page inside my new project.
I already tried downloading the js and css files from gridstack, I then placed the gridstack.js in the project's resources/assets/js/ folder, and the css files inside the project's resources/assets/css/ folder
The next step would be to load the files in the mixer. For that I thought that I could just go to /resources/assets/js/app.js and add the library
require("./bootstrap");
//Add the following two lines
require("./jquery-ui.min");
require("./gridstack");
then I ran npm run dev, which gave the following errors
ERROR Failed to compile with 20 errors
These dependencies were not found:
jquery-ui/data in ./resources/assets/js/gridstack.js
jquery-ui/disable-selection in ./resources/assets/js/gridstack.js
omitted 18 similar lines
To install them, you can run: npm install --save jquery-ui/data
jquery-ui/disable-selection jquery-ui/focusable jquery-ui/form
jquery-ui/ie jquery-ui/keycode jquery-ui/labels jquery-ui/jquery-1-7
jquery-ui/plugin jquery-ui/safe-blur jquery-ui/scroll-parent
jquery-ui/tabbable jquery-ui/unique-id jquery-ui/version
jquery-ui/widget jquery-ui/safe-active-element jquery-ui/widgets/mouse
jquery-ui/widgets/draggable jquery-ui/widgets/droppable
jquery-ui/widgets/resizable
Of course I tried to run npm install --save jquery-ui/data to see if it works and it does not:
npm ERR! Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
How can I add a simple js and css to my project without all these compilation errors...?
I also tried another approach: removed the requires from the above approach, and went for the webpack.mix.js file and made it look like this:
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/app-landing.js', 'public/js/app-landing.js')
.js('resources/assets/js/jquery-ui.min.js', 'public/js')
.js('resources/assets/js/gridstack.js', 'public/js')
....
I then ran the npm run dev only to get the same error from above.
What is wrong here?
I tried to remove the jquery-ui refference and run the npm again... the exact same error
Also, I installed gridstack using npm in my project... but I have no idea how to directly use it. I should be able to use it, since it is "installed", but how?
I also did a npm cache clean, no effect
I also verified my versions of node and npm, they seem ok:
node v6.10.3
npm v3.10.10
EDIT
After removing the ./ from the require, and after removing the jquery-ui altogether (it was already loaded) I managed to get no more errors from the npm command.
However the gridstack functionality is just not there. I compared my sources with an official demo of gridstack and saw that they include 2 js files of gridstack:
<script src="../dist/gridstack.js"></script>
<script src="../dist/gridstack.jQueryUI.js"></script>
But Laravel mix does not agree with me adding the extra require. I get errors again from npm if in /resources/assets/js/app.js I put the following
require("./bootstrap");
require("gridstack");
require("gridstack.jQueryUI"); // nor does it work if I use gridstack.all.js or gridstack.jQueryUI.js
What can I do to get the gridstack full functionality inside my Laravel 5.4 project?
EDIT
What seemed to work is:
remove all changes done previously like the one in app.js
I copied webpack.config.js from node_modules/laravel-mix into my project's root folder
I added the bellow code
module.exports.resolve = {
extensions,
alias: {
'vue$': 'vue/dist/vue.common.js',
'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui')
}
};
In webpack.mix.js, I added the following:
mix.js('resources/assets/js/app.js', 'public/js')
.copy('node_modules/gridstack/dist/gridstack.all.js','public/js');
in package.json I added:
"devDependencies": {
...
"gridstack": "^0.3.0"
}
in the command line I did
sudo npm rebuild node-sass
then
sudo npm run dev
After I the above, npm compiles correctly the mix, bun now, I get a jQuery error in the frontend:
jQuery.Deferred exception: c.draggable is not a function
d.prototype.draggable#http://myproject.com/js/gridstack.all.js:16:1395
This points to the second part of the gridstack.all.js (right at the beginning of it, where jquery is defined... again)
Error seems to indicate that jquery is loaded more than once. But that is not a problem in a classic PHP app.
Any idea how to make this work?
The default laravel application requires by default Bootstrap, lodash and jquery, and when I add gridstack to the project, looks like somewhere there is a second require for jquery. I just don't get it.
Can anyone try to simulate what I am doing and tell me how they did
it?
you need to include gridstack via asset() then everything will be happy - for this example the files are in /public/js/dashboard
eg (the hootsuite grid demo page)
<!DOCTYPE html>
<html>
<head>
<title>Grid Demo</title>
<link rel="stylesheet" href="css/dashboard/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{ asset('js/dashboard/fixtures.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/jquery.gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/load.js') }}" type="text/javascript"></script>
</head>
<body>
<div class="header">
-
+
<p>
<a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
</p>
</div>
<div class="grid-container">
<ul id="grid" class="grid">
<li class="position-highlight">
<div class="inner"></div>
</li>
</ul>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
After compiing all my assets through laravel-mix. It displays no error and it went build successful that means all my assets were compiled to the dist/css/ folder.
and I referenced it through
{{ HTML::style('dist/css/auth.css') }}
But i get no display from the view. What's wrong with this ?
Make sure you have HTML package installed via Laravel collective
https://laravelcollective.com/docs/5.3/html
If you did already, try to escape {!! HTML::style('dist/css/auth.css') !!}
Utimately you could go back to the original
<link href="{{ asset("dist/css/auth.css") }}" rel="stylesheet">
Maybe you should try to reference it using relative path:
{{ HTML::style('/dist/css/auth.css') }}
If this doesn't work, try:
<link href="/dist/css/auth.css" rel="stylesheet">
By this, you can determine if the problem was in compiling or HTML package.