figwheel-main

figwheel-main http://figwheel.org
2020-05-09T00:14:28.135200Z

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

2020-05-09T00:14:47.135800Z

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

reefersleep 2020-05-09T12:28:24.137300Z

@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.

2020-05-09T12:34:53.138100Z

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

reefersleep 2020-05-09T12:36:19.140800Z

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.

2020-05-09T12:37:24.143100Z

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

reefersleep 2020-05-09T12:37:35.143500Z

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.

reefersleep 2020-05-09T12:39:58.145900Z

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)

reefersleep 2020-05-09T12:41:00.146800Z

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.

reefersleep 2020-05-09T12:42:20.147700Z

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"]}]
...
in the project.clj

reefersleep 2020-05-09T12:43:20.148300Z

However, in the frontend console, I get

reefersleep 2020-05-09T12:44:05.148500Z

reefersleep 2020-05-09T12:44:34.149200Z

(Uncaught referenceError: exports is not defined)

reefersleep 2020-05-09T12:44:49.149600Z

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

reefersleep 2020-05-09T12:44:53.149800Z

"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"));

reefersleep 2020-05-09T12:45:26.150400Z

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

reefersleep 2020-05-09T12:47:00.152100Z

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.

reefersleep 2020-05-09T12:47:42.152200Z

I’ll take that into consideration 🙂

reefersleep 2020-05-09T12:48:01.152400Z

We’ll get back to that. Thanks! 😄

2020-05-09T12:49:31.153Z

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

2020-05-09T12:49:59.153300Z

https://clojurescript.org/guides/webpack

2020-05-09T12:50:08.153600Z

Did this style setup for foreign-libs

reefersleep 2020-05-09T12:51:55.154800Z

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.

reefersleep 2020-05-09T12:52:12.155100Z

I’ll look at that link, thanks!

2020-05-09T12:55:04.155600Z

Well you get it from npm as usual

2020-05-09T12:55:18.156100Z

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

reefersleep 2020-05-09T13:01:10.156900Z

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

1👍
reefersleep 2020-05-09T13:03:11.158500Z

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.

2020-05-09T14:43:17.159200Z

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

2020-05-09T14:43:27.159600Z

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

1👍
reefersleep 2020-05-09T14:55:42.161100Z

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:

reefersleep 2020-05-09T14:56:05.161500Z

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

reefersleep 2020-05-09T14:57:55.162200Z

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?

reefersleep 2020-05-09T14:58:51.162600Z

hello-world.core looks like this:

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

(.log  js/console react/Component)

2020-05-09T15:05:49.163800Z

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

reefersleep 2020-05-09T15:06:38.164Z

Thanks, I’ll try that 🙂

reefersleep 2020-05-09T15:07:27.164800Z

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

2020-05-09T15:07:47.165200Z

So perhaps has to do with your foreign-libs declared

reefersleep 2020-05-09T15:08:36.165800Z

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

reefersleep 2020-05-09T15:11:17.166200Z

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

reefersleep 2020-05-09T15:45:28.166900Z

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.

reefersleep 2020-05-09T15:46:01.167600Z

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.

reefersleep 2020-05-09T18:33:11.169800Z

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.&lt;anonymous&gt; ([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 error is mentioned in an old figwheel-main issue from 2018, but it says there that it’s fixed. Any idea what’s wrong?

reefersleep 2020-05-09T18:33:33.170100Z

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

reefersleep 2020-05-09T18:43:31.172Z

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.

reefersleep 2020-05-09T18:44:33.172400Z

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

reefersleep 2020-05-09T18:49:08.172900Z

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

reefersleep 2020-05-09T18:51:02.173600Z

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"