Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2022-11-01

Channels

#scittle
<
2022-11-01
>
chromalchemy17:11:55

I am trying to require jquery from scittle and getting Could not find namespace error: cljs 

(ns jquery-test
  (:require
    ["jquery" :as jq]))

(js/console.log "cljs code ran")
html 
<script src=""></script>
<script src=""></script>
<script src="/assets/cljs/jquery_test.cljs" type="application/x-scittle"></script>
Any thoughts why this may not be working?

borkdude18:11:44

@chromalchemy I think jquery works by defining a global $ or so object which you can use without :require, just as js/$

chromalchemy18:11:21

If I remove require and try (js/$.Alert "Hello") I get this error

chromalchemy18:11:55

for reference, I was able to use 

(:require ["jquery" :as jq]))
On a shadow-cljs build and use like 
(-> (jq ".options-form") (.serialize))

borkdude18:11:46

Does jquery have an Alert function?

borkdude18:11:55

This is not shadow

😆 1
borkdude18:11:12

I don't see .Alert being defined in the $ object here: https://codepen.io/jbalsamo/pen/OVdOPV

borkdude18:11:31

When I write: 

console.log($)
console.log($.Alert)

borkdude18:11:41

I see: 

ƒ (a,b){return new n.fn.init(a,b)}
iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js:1 undefined

chromalchemy18:11:32

Ok, thanks. I will find a better function to test. I was going off this https://www.sitepoint.com/ways-jquery-alert/ ps. I understand it’s not shadow, just providing my baseline experience to try to better understand the differences in requiring dependencies.

chromalchemy18:11:20

oh thats from 2011 😵

chromalchemy18:11:50

that linked article

borkdude18:11:09

You probably won't need jquery in 2022 anyway, there is a lot of stuff in the browser now

chromalchemy18:11:59

Thanks. I have a call to a (malformed?) endpoint that seems to return html response (instead of json). And jquery.ajax somehow successfully interprets as jsonp. I tried fetch and couldn’t get it to work, even with help from the cljs channel..

borkdude18:11:08

Well, if you include jquery in a script tag, you have the js/$ available in scittle scripts, that's how it currently works.

chromalchemy18:11:24

Ok, it is indeed working like that. ex: (-> (js/$ ".target-elem") (.addClass "text-red-500")) Works! 🎉

chromalchemy18:11:26

Can scittle cljs require and use code from a pre-existing bundle.js?

borkdude18:11:45

What module format is bundle.js compiled in?

borkdude18:11:09

Currently this doesn't matter, but in the future scittle may be able to :require es6 modules directly

borkdude18:11:37

Currently it only works if a foo.js file included in a script tag defines some global or you can import it as a module and then manually define some globals

chromalchemy18:11:19

Thanks, I will look at that> Not sure the format. It is an older codebase using Webpack / Babel. Here is the webpack config. 

var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    bail: true,
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                include: /(assets\/js|assets\\js|node_modules\/@bigcommerce\/stencil-utils|node_modules\\@bigcommerce\\stencil-utils)/,
                query: {
                    compact: false,
                    cacheDirectory: true,
                    presets: ['es2015-loose'],
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    watch: false
};

borkdude18:11:01

you may be able to deal with that with requirejs in the browser, then pull out the module, define it as a global and then you can access it from scittle

chromalchemy19:11:37

will try out some of those options. Thx for info