I'm a bit lost here. I'm NOT new to Laravel Mix so this is really confusing.
I have a layout blade file and it looks something like this
<html> ....
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js"></script>
<script src="{{ mix('/js/myjs.js") }}></script>
</body>
</html>
The myjs.js is compiled using Laravel Mix and contains dozen of libraries and all of them compile and work properly.
However if I include this
require('katex'); //so it's above everything else to simulate situation from above, when it's included in the layout file
...
and drop the CDN script from the layout file - the Katex library won't work.
I tried using require('katex/dist/katex.min.js') but still nothing. The katex.min.js file in the library and the one in CDN are the same.
I'm not expert on npm and I only use it to fetch libraries and then merge and minify them in my Laravel app.
Can anyone help me pin point the problem here or point me to what am I doing/getting wrong here?
Shouldn't the
<script src="lib1.js"></script>
<script src="lib2.js"></script>
included in the html, and
require('lib1')
require('lib2')
compiled to
<script src="{{ mix('compiled.js') }}"></script>
produce the same thing?
Thanks!
UPDATE:
I'm using Katex to implement this summernote plugin.
Katex should be installed as:
window.katex = require('katex');
Related
I have a small issue with my current configuration using Laravel for the backend, and Vue in the frontend, while my application is built using Laravel mix (6.0).
I am using the following simple mix configuration:
mix.js("resources/js/app.js", "public/js/app.js")
.vue()
.version()
.extract();
Everything works fine when running npm run watch, and when I launch the production build, I get as expected three files in my public folder (manifest.js, app.js and vendor.js). I included these three files in my app.blade.php file in the following way:
<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
The mix-manifest.json that comes out looks like this:
{
"/js/app.js": "/js/app.js?id=55e00bb7adfe7cc8d33c",
"/js/vendor.js": "/js/vendor.js?id=3cc2a9d83cabdff07b38",
"/js/manifest.js": "/js/manifest.js?id=7d6950016e73d672d079",
}
Most of the routes are working just fine with such a configuration.
However, the problem I am facing is a generic 404 error that shows up when trying to access particular routes having at least two levels, such as <my_website>/read/<post_id>. In this case, the browser tries to resolve something like <my_website>/read/js/app/1.js which obviously doesn't exist, as it should search for <my_website>/js/app/1.js instead.
Am I missing something obvious here? Is there any way to include a full path in the manifest file to avoid this, and making sure that the browser resolves the correct files? Or any other work around to make this work? Thank you!
You can force a base URL in the browser. This rewrites the URLs for you.
Use the <base> tag
See documentation of the base tag here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Example:
<base href="https://www.example.com/">
I don't know, how much time I lost looking for solution for this issue. I wanted to use Chart.js in my Laravel project, so I followed instructions described here.
composer require fx3costa/laravelchartjs (runned)
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class (added in the right place)
npm i chart.js (used to install chart.js)
In my controller and blade I used code from example 1 (Line Chart / Radar Chart)
After that the error appeared: Uncaught ReferenceError: Chart is not defined. Before and after that I was trying different solutions, but always something was wrong and I think this one should work for me. I probably missed something obvious, but very important.
Have you any ideas?
Should I add something to webpack.mix.js or bootstrap.js files after installing with npm?
EDIT:
If I put <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> in my head section of blade, everything is working fine, but I'm using laravel-mix to use a locale file instead of link.
Chart.js must be loaded before content in order to use it in any Controller. I was loading my laravel-mix variables after HTML content (because it includes some big libralies like jQuery etc.), so that's why it couldn't work.
SOLUTION:
At the end of my document I still have my previous script
<script src="{{ asset('js/app.js') }}" ></script>
But now I made a new loadBefore.js file in resources/js directory with one line of code:
require('chart.js/dist/chart.js');
If there will be any reason to put there any other javascript code, it will be easy to put it there.
I also added this file to webpack.mix.js like this:
mix.js('resources/js/loadBefore.js', 'public/js').sourceMaps();
And of course at the end I added this script to the head section in my blade:
<script src="{{ asset('js/loadBefore.js') }}"></script>
Now everything is working and I'm using already existing in my Laravel files chart.js file. I don't know, someone knows an easier solution, so for now I'm accepting my answer, but I'm still open for suggestions.
why you just dont copy the content of
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
in a file at your local, for example: /public/js/chart.js
and load it in head
<script src="{{asset('js/chart.js')}}"></script>
A minor question. I was trying to learn routing using Vue.JS in laravel, so I went to this website and I see :
<script src="{{ mix('js/app.js') }}"></script>
And this differs from what I know on including app.js into my website like this:
<script src="{{ asset('js/app.js') }}"></script>
My question is:
Is there any difference on using one of them?
When to use mix or asset?
Does using asset affect routing in Vue.JS?
I tried using either of them, but as I said, I'm new to routing using laravel & Vue.JS so I don't know where I did wrong. I can't get it to work.
I've also tried googling, but what they show isn't related to my question,
.
.
PS: Additional Notes.
In my "website" I already implemented Authentication. Could be a factor or not that cause my routing to fail. If so, how to handle this?
The mix() function will bring you the versioned file of that asset(with a unique id) While the asset function will not take into affect changes made to that asset while running npm run dev or npm run watch The mix function is for cache busting.
I've a problem with my website, the layout load properly (and CSS) but no JS and page in yield.
I've copy paste the layout of my other website, inclued tje JS and CSS file, I do not understand why it does not work while on other sites it's good..
Code for include the JS and CSS file: <script src="{{url('js/jquery.min.js')}}"></script>
As you can see, the page is empty, and this is not normal.
Image of error:
Ahh... ok.
I've forget to DL From:: into my project. Sorry
I had the same problem when I was creating a recent Laravel project however mine was narrowed down too 2 problems. 1 being the JS had an error and 2nd was the way I called it.
I fixed it by doing the following:
<script type="text/javascript" src="{!! asset('js/jquery.min.js') !!}"></script>
I've tried to implement the jQuery Tags Manager (http://welldonethings.com/tags/manager) the last days in vain...
What the environment looks like:
it is a bootstrap powered website with several elements on it which should be able to be tagged (within a bootstrap modal).
What I have done so far:
I have added the tagManager class to my input field.
<form>
<input type="text" name="tags_0" placeholder="Tags" class="tagManager">
</form>
Furthermore, in the head section of my website I have included a custom javascript file:
<script type='text/javascript' src="js/javascript.js"></script>
The file looks like this:
jQuery(".tagManager").tagsManager();
Of course also the jQuery lib and the bootstrap & TagsManager css files were included.
However when ever I am entering a tag it does reload the website with the get-variable "?tags_0=test"
I am kind of frustrated right now. It seems so simple, but I cannot get it working...
Best regards,
Nico
This probabily isn't going to help the original poster since this was asked some time ago, but I was having the exact same problem and when I searched for help I found this question, so my answer might help someone that ends up here with the same problem.
I was trying to use this jQuery plugin as well and I was having a hard time to get it working too. Spent hours checking the code and searching for help but always got to the conclusion that the code was correct, so I had no idea what was wrong. However, somehow, it then started working.
One thing I noticed was that if I had the call for the css file first and then the js files, it would show some weird thing in the place where it should have the "x" for deleting the tag. But if I called the js files first and then the css file, it would work perfectly.
This is the code I used:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-tagmanager.js"></script>
<link href="bootstrap-tagmanager.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="text" name="products" placeholder="Add your Products" class="tagManager">
<script>
jQuery(".tagManager").tagsManager();
</script>
</body>
Hope this helps someone.