Clojurians Log v2

@reefersleep you may benefit from learning about the :infer-externs option of the cljs compiler. You can turn this on via figwheel config too.

It’s pretty nice. Often you can just do a few type hints to get the externa you need.

@mikerod cheers 🙂 I’m just in doubt about which files to use for which config things; figwheel had everything in the project.clj, figwheel-main has several config files and is very minimal in the template example.

Yes. That’s true. @reefersleep I do think it can be confusing at first. The fig docs are what I read through to know more options. It goes through them fairly extensively. Most things go in your dev.cljs.edn or <something>.cljs.edn depending on what you want to call it. Sometimes you have multiple

But for now, I tried moving away from two unknowns and into just 1, so I created a lein new reagent-frontend project, and am trying to just connect react-dnd correctly.

Hmm. Ok. Well if you find how to configure cljs compiler. I still recommend infer externs to do your Interop

Currently stuck on a different issue; there’s a syntax error in the index.js-file I’m referring to. I don’t know why; it seems like ti’s referring to an undefined var.

And it’s been long since I’ve concerned myself with vanilla js, and I’ve never done React in Js, so I can’t figure out if it’s because the compiler assumes a wrong version of js, or if it’s because the react-dnd lib has to go through some kind of compilation stage when used in regular React-in-JS - it seems like referring to a var that’s not defined in the same file is either generally foolish, or alright if you have very strong assumptions about the environment (like you might in React-in-JS)

Some of the stackoverflow issues I’ve seen about a similar issue say it’s because the code assumes ES6, but specifying this for :language-in and :language-outmakes no difference at all.

I do like this:

:cljsbuild {:builds {:app {:compiler {:language-in   :es6
                                      :language-out   :es6
                                      :foreign-libs  [{:file     "node_modules/react-dnd-cjs/lib/index.js"
                                                        :requires ["cljsjs.react"]}]
...

However, in the frontend console, I get

(Uncaught referenceError: exports is not defined)

Which I totally get, because the index.js file looks like this:

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./common"));
__export(require("./hooks"));
__export(require("./decorators"));

I don’t see the exports that is referred to as the first argument for `defineProperty) defined anywhere in the same file.

Maybe React libraries are constructed in such a way that they assume things like an exports var to be available at all times, because it goes through some compilation stage when used in React-in-JS. idk. Or maybe ES6 just has it available as some global thing. If that’s the case, I just wonder why specifying that for :language-in and :language-out makes no difference.

I’ll take that into consideration 🙂

We’ll get back to that. Thanks! 😄

I’ve never tried to use an node mode index.js like that.

https://clojurescript.org/guides/webpack

Did this style setup for foreign-libs

I might be going about this in entirely the wrong way. It’s just that there was only 1 way to install react-dnd according to their docs, and that was npm i react-dnd-cjs, which is what I did, while standing in my project dir.

I’ll look at that link, thanks!

Well you get it from npm as usual

Then use webpack to build bundle to use from cljs via foreign-libs.

That’s probably the step I was missing. Thanks a lot, I’ll read up on it and see if that helps 🙂

That means that any CI I would have liked to use would need to have node, npm and webpack installed as well, right? Currently I’m just fiddling about on my personal computer, but I’m trying to imagine a more realistic, professional setting at the same time.

You would need node installed yes. Typically this comes with npm I believe.

Webpack you can just pull via npm as a dev dependency.

I’m following the example in https://clojurescript.org/guides/webpack , having first created a minimal project as described in https://clojurescript.org/guides/quick-start . However, when I get to the part where I :require [react], and do clj -m cljs.main -co build.edn -v -c -r, I get an error in the browser:

core.cljs:1 Uncaught ReferenceError: require is not defined
    at core.cljs:1

That’s an error I don’t understand - it’s like cljs core has not loaded? Why would my application manage to compile, but not know :require?

hello-world.core looks like this:

(ns hello-world.core
  (:require [react]))

(.log  js/console react/Component)

Nothing immediately comes to mind. I’d ask this same question on #clojurescript channel instead and probably would get good feedback

Thanks, I’ll try that 🙂

There seems to be no problem if I e.g. (:require [clojure.set :as set]) and use it afterwards, so I figure it does still have something to do with the bundled lib

So perhaps has to do with your foreign-libs declared

I haven’t declared :foreign-libs anywhere. In this project, I’ve only done what it said in the tutorials.

interestingly, there’s no mention of react in out/inferred-externs.js

Hm 🙂 Seems it’s a case of the dark arts. I tried over with a completely new project, not reusing any code from one tutorial in the other, and now it works.

That takes me some of the way… Maybe. Now I just have to get dark-arty as I try to figure out how to get this webpack-bundling setup to work together with figwheel-main.

Alright, here we go again. I’m trying to use a minimal example project based on the tutorial in https://clojurescript.org/guides/webpack . That worked as intended. Then I tried expanding upon it to include figwheel-main using the tutorial at https://github.com/bhauman/figwheel-main#setting-up-a-build-with-tools-cli When running clj -m figwheel.main -b dev -r, I get the following error:

Rees-MacBook-Pro:hello-bundler ree$ clj -m figwheel.main -b dev -r
2020-05-09 20:30:02.933:INFO::main: Logging initialized @4507ms to org.eclipse.jetty.util.log.StdErrLog
[Figwheel] Compiling build dev to "target/public/cljs-out/dev-main.js"
internal/modules/cjs/loader.js:1023
  throw err;
  ^

Error: Cannot find module '@cljs-oss/module-deps'
Require stack:
- /Users/ree/dev/projects/hello-bundler/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
    at Function.Module._load (internal/modules/cjs/loader.js:890:27)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at [eval]:8:13
    at Script.runInThisContext (vm.js:131:20)
    at Object.runInThisContext (vm.js:297:38)
    at Object.<anonymous> ([eval]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)
    at evalScript (internal/process/execution.js:94:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/ree/dev/projects/hello-bundler/[eval]' ]
}

This is the issue: https://github.com/bhauman/figwheel-main/issues/21

I’m thinking that maybe there’s a conflict in how the webpack tutorial sets up the target folder (`/out`) and where figwheel-main expects the target-folder to be (`target/public/cljs-out/{env}`). I tried resolving it by changing all references to out to the other folder, but nothing’s working so far, I still get the same error.

I also tried npm install module-deps to ensure that it was in ./node_modules, no difference.

Oh wait, I misread the install instructions for @cljs-oss/module-deps - it’s npm i @cljs-oss/module-deps!

That gets me to a different a different state; it hangs forever at

Rees-MacBook-Pro:hello-bundler ree$ clj -m figwheel.main -b dev -r
2020-05-09 20:47:49.100:INFO::main: Logging initialized @5067ms to org.eclipse.jetty.util.log.StdErrLog
[Figwheel] Compiling build dev to "target/public/cljs-out/dev-main.js"