#JQuery inside of script

73 messages · Page 1 of 1 (latest)

fresh pewter
#

A few days i was making a mistake using <script> on Astro, but affortunatly support ai and people helped me with it, but now I´m fecing a new trouble, I´m using JQuery library and librearies designed on JQuery also, but when I try to use them inside of astro <script> tag i have errors where basic jquery sintax is not recognized, but i would like to say that it works from anyway but vscode is complaining by my code, i know that is TS but how can i resolve this? is there an aproach to handle this? i mean an aproach to use jquery inside of script tag

slim brambleBOT
#
Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

sour fable
#

I have the same problem 😦 did you have any luck solving this issue?

crimson loom
#

Bump…

pulsar rampart
# 
const $ = jQuery;

try this hahaha

crimson loom
#

It doesn’t work… it doesn’t make JQuery available on the window object

#

Many plugins look for it on the window object

lone oak
#

You can just use a script tag to get it from cdn at runtime ( same as always ) or inject it into window if you're bundling... but note jquery has been substantially replaced by builtins and vanilla libs, so you probably don't need it

crimson loom
lone oak
crimson loom
#

Yep. It’s a monster - a single file a bazillion lines long. Astro gives us a way to replace it piece by piece with components

#

How do you inject it into window? I’ve tried from within my script file that I links to - but it doesn’t play ball

lone oak
#

You can check if its in window and set it if not

#

like ```html
<script is:inline>
if(window.$ === undefined) window['$'] = jquery
...

#

where jquery is your import

crimson loom
#

That’s what I’ve been doing… only I’ve been pulling the file in as a script tag / link

lone oak
#

oh with the script tag it should just work

#

as in from cdn right?

crimson loom
#

No - as in from my own script file

#

That imports jQuery

#

And imports all the jQuery plugin

lone oak
#

hmm, idk if chaining it would work

crimson loom
#

It was using webpack - I’ve swapped out the webpack stuff for vite

lone oak
#

You probably need to import it once and inject it

#

If your other stuff needs it to be in window

crimson loom
#

So load as script tag and then inject it? I’ve noticed if i include jQuery in layout it doesn’t filter through - but it does if on the page

lone oak
#

Yeah, I would try just importing and adding to window and then having everything else use the window object

#

I can't remember how well it plays with bundlers since most of it was before they existed

crimson loom
#

Yep. I might even just build my script and stick it in public

lone oak
#

Sounds good, probably would make migration easier too

crimson loom
#

Should still be able to replace parts of it via components

#

Yep is there a way I can run build to generate the code and stick it in public when I run dev?

lone oak
#

With vite directly, but astro overrides some stuff... I'd probably just set up another config if it doesn't work or not in docs

crimson loom
#

I tried that - but I couldn’t run vite directly

#

It said vite wasn’t recognised

lone oak
#

Yeah, you just can't use the default config name

crimson loom
#

So I think Astro must be overriding it

#

Gotcha

#

So I’d need a to run vite outside of my Astro directory

lone oak
#

No, you can just name it like app.vite.config.ts or something

#

then astro won't see it

crimson loom
#

Gotcha - and use vite to run it?

lone oak
#

Yep, just add another script to package.json

#

But I probably wouldn't go too far down packaging jquery rabbit hole... it works from cdn

crimson loom
#

So use that to kick off building my dev JS and then tell it to run astro dev

lone oak
#

Or copy the files you need to public folder and do script import from there

crimson loom
#

It’s all the dependencies - hundreds of them… and they need to be built cos someone a few years back started splitting things off for webpack

lone oak
lone oak
#

good luck though 🙂

crimson loom
#

The scss files for example - ideally I’d build them and send them to public. It is a monster. It’s stable, battle tested…

But old and zero test coverage

#

So migrating to astro is an attempt to address that

lone oak
#

Once they are built, they should be pretty static though, so I would probably try to keep it separate ( the build process ) from astro

crimson loom
#

Then bits can be picked off

crimson loom
#

So build - move to public folder, making the paths match the current paths

#

And it should work as it does now. Then bits can be replaced

#

Until it’s all replaced 😁

#

Nobody has touched it - too scared too. I put my hand up - I’m an idiot 😁

lone oak
#

Haha

#

But yeah, I think building them to public folder and importing (not bundle import) from there would probably be easiest transition

crimson loom
#

And I could use the old webpack to do the build

#

Then once in astro land, i can use astro components

#

And anything I replace - I remove from jQuery land

lone oak
#

Yeah, thats smarter than switching to vite

crimson loom
#

So, I built it.. unminified so I can read it… the bundle file is nearly 250,000 lines long

#

If ever there was a project that needed migration to astro…

lone oak
#

Why fix something when you can make people download 10mb of plugins 😄

hexed ledge
crimson loom
crimson loom
#

I have kept jQuery outside as a script tag - removed all imports to jQuery, kept imports to jQuery plugins within their own file… it seems to work 😁

#

And… I’ve managed to get svelte, vue and react components (to prove I can make it work) working with the old code base

#

Used a nanostore for cross world comms