Vite works, but not as good as good old <script> tags. Why?

Hello friends,

Step 1: I bought a HTML + CSS template for a website. When I unpack the ZIP file and view the website in my browser, then everything is fine. No problem there. Zero errors in the developers tools in the browser.

Step 2: Now I am trying to add Laravel to the template. One of changes is that I added vite. Vite pushes the scripts to the end of the tag. The Vite directives looks like this:

@push('scripts')
	@vite('resources/js/jquery-3.6.0.min.js', 'js')
	@vite('resources/js/jquery-ui.min.js', 'js')
	@vite('resources/js/bootstrap.min.js', 'js')
	@vite('resources/js/bootstrap.bundle.js', 'js')
	@vite('resources/js/owl.carousel.js', 'js')
	@vite('resources/js/range-slider.js', 'js')
	@vite('resources/js/jquery.themepunch.tools.min.js', 'js')
	@vite('resources/js/jquery.themepunch.revolution.min.js', 'js')
	@vite('resources/js/extensions/revolution.extension.actions.min.js', 'js/extensions')
	@vite('resources/js/extensions/revolution.extension.carousel.min.js', 'js/extensions')
	@vite('resources/js/extensions/revolution.extension.kenburn.min.js', 'js/extensions')
	@vite('resources/js/extensions/revolution.extension.layeranimation.min.js', 'js/extensions')
	@vite('resources/js/extensions/revolution.extension.migration.min.js', 'js/extensions')
	@vite('resources/js/extensions/revolution.extension.navigation.min.js', 'js/extensions')
	@vite('resources/js/extensions/revolution.extension.parallax.min.js', 'js/extensions')
	@vite('resources/js/extensions/revolution.extension.slideanims.min.js', 'js/extensions')
	@vite('resources/js/custom.js', 'js')
	@vite('resources/js/app.js', 'js')
@endpush

Step 3: Vite seems to work just fine. I look in the Chrome browser and see this error message:

jquery-3.6.0.min.js:2 Uncaught ReferenceError: punchgs is not defined
    at S.fn.init.revolution (jquery.themepunch.revolution.min.js:7:1844)
    at HTMLDocument.<anonymous> (app.js:18:55)
    at e (jquery-3.6.0.min.js:2:30038)
    at t (jquery-3.6.0.min.js:2:30340)

Step 4: I replaced the above Blade directives with the good old tags, like this:

    <script  src='http://127.0.0.1:5173/resources/js/jquery-3.6.0.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/jquery-ui.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/bootstrap.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/bootstrap.bundle.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/owl.carousel.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/range-slider.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/jquery.themepunch.tools.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/jquery.themepunch.revolution.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.actions.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.carousel.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.kenburn.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.layeranimation.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.migration.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.navigation.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.parallax.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/extensions/revolution.extension.slideanims.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/custom.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/app.js'></script>

Step 5: I look in the browser and see 0 errors.

Step 6: I narrow down the problem to these two files:

    <script  src='http://127.0.0.1:5173/resources/js/jquery.themepunch.tools.min.js'></script>
    <script  src='http://127.0.0.1:5173/resources/js/jquery.themepunch.revolution.min.js'></script>

Step 7: I added 'defer' to Vite and verified with the browser if the defer looks nice. And yes, it looks like nice proper HTML.

I suspect that this has something to do with defer or order of loading. I tried all sorts of stuff, like putting the jquery.themepunch.revolution.min.js file in the very bottom, or putting it in the tag, or put everything in etc. Nothing can remove that error except using old school tags. Defer in vite also does not seem to remove the error. I refresh the page in the browser using CONTROL-SHIFT-R. But the question remains: What is vite doing different from the normal thing? And how can I fix the error while still using Vite?

Snapey

2 years ago

Level 122

if you are not compiling assets, why bother with vite. Put the assets in the public folder and link to them direct

<script  src='/js/jquery-3.6.0.min.js'></script>
<script  src='/js/jquery-ui.min.js'></script>

but please, never put the host name or port in your code -it makes it impossible to deploy

eventlistener

2 years ago

Level 3

@snapey Thank you for pointing out to never use hostnames or port names in the code. Now I put my js files in the public folder and removed hostnames from the code.

But now the debugging becomes a little bit more difficult because files are not found. Look here below to see what I mean (web server is using port 8000).

The following code produces 0 errors:

<script  src='/js/jquery-3.6.0.min.js'></script>
<script  src='/js/jquery-ui.min.js'></script>
<script  src='/js/bootstrap.min.js'></script>
<script  src='/js/bootstrap.bundle.js'></script>
<script  src='/js/owl.carousel.js'></script>
<script  src='/js/range-slider.js'></script>
<script  src='/js/jquery.themepunch.tools.min.js'></script>
<script  src='/js/jquery.themepunch.revolution.min.js'></script>
<script  src='/js/extensions/revolution.extension.actions.min.js'></script>
<script  src='/js/extensions/revolution.extension.carousel.min.js'></script>
<script  src='/js/extensions/revolution.extension.kenburn.min.js'></script>
<script  src='/js/extensions/revolution.extension.layeranimation.min.js'></script>
<script  src='/js/extensions/revolution.extension.migration.min.js'></script>
<script  src='/js/extensions/revolution.extension.navigation.min.js'></script>
<script  src='/js/extensions/revolution.extension.parallax.min.js'></script>
<script  src='/js/extensions/revolution.extension.slideanims.min.js'></script>
<script  src='/js/custom.js'></script>
<script  src='/js/app.js'></script>

However the following code:

@vite('/js/jquery-3.6.0.min.js', 'js')
@vite('/js/jquery-ui.min.js', 'js')
@vite('/js/bootstrap.min.js', 'js')
@vite('/js/bootstrap.bundle.js', 'js')
@vite('/js/owl.carousel.js', 'js')
@vite('/js/range-slider.js', 'js')
@vite('/js/jquery.themepunch.tools.min.js', 'js')
@vite('/js/jquery.themepunch.revolution.min.js', 'js')
@vite('/js/extensions/revolution.extension.actions.min.js', 'js/extensions')
@vite('/js/extensions/revolution.extension.carousel.min.js', 'js/extensions')
@vite('/js/extensions/revolution.extension.kenburn.min.js', 'js/extensions')
@vite('/js/extensions/revolution.extension.layeranimation.min.js', 'js/extensions')
@vite('/js/extensions/revolution.extension.migration.min.js', 'js/extensions')
@vite('/js/extensions/revolution.extension.navigation.min.js', 'js/extensions')
@vite('/js/extensions/revolution.extension.parallax.min.js', 'js/extensions')
@vite('/js/extensions/revolution.extension.slideanims.min.js', 'js/extensions')
@vite('/js/custom.js', 'js')
@vite('/js/app.js', 'js')

produces the following errors (note the double slashes after the port number):

127.0.0.1/:1366     GET http://127.0.0.1:5173//js/jquery-3.6.0.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/jquery-ui.min.js 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/bootstrap.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/bootstrap.bundle.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/owl.carousel.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/range-slider.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/jquery.themepunch.tools.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/jquery.themepunch.revolution.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.actions.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.carousel.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.kenburn.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.layeranimation.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.migration.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.navigation.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.parallax.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/extensions/revolution.extension.slideanims.min.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/custom.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:1366     GET http://127.0.0.1:5173//js/app.js net::ERR_ABORTED 404 (Not Found)
```

Snapey

2 years ago

Level 122

@eventlistener why use vite?

eventlistener

2 years ago

Level 3

@Snapey Because I want to find a job. I am currently working on a Laravel portfolio with all kinds of stuff that are not going to be used in real life, but they will get me a job.

Think of it as a showcase where you see delicious apple pies that are not going to be eaten ever. But if a customer sees those fake apple pies, then he will be mouthwatering to pay for a real pie.

Bingo!

newbie360

2 years ago

Level 24

the file is saved in your-project/public/resources/js/jquery-3.6.0.min.js

<script  src='/resources/js/jquery-3.6.0.min.js'></script>

the file is saved in your-project/resources/js/jquery-3.6.0.min.js

@vite('resources/js/jquery-3.6.0.min.js')

so where you saved the files

eventlistener

2 years ago

Level 3

@newbie360 Thnx!

Please or to participate in this conversation.