figwheel-main 2022-03-03

jumar05:03:57

Since yesterday I'm struggling with conversion of my very old lein-figwheel based project (created with luminus almost 5 years ago) to figwheel-main. I updated a lot of dependencies and configuration and I think I'm close now. But when I try to load the page it fails with these errors (see the image) I struggled quite a bit with figwheel's configuration and was confused by what goes into dev.cljs.edn vs figwheel-main.edn After reading the first half of the documentation, it's much clearer and this is what I've got: figwheel-main.edn

;; overriding default index.html page
;; 
{:open-url ""
 :css-dirs ["resources/public/css"] ; 
 :watch-dirs ["src/cljc" "src/cljs" "env/dev/cljs"] ; 
 ;; automatically bundle JS dependencies like react: 
 :auto-bundle :webpack

}

http://dev.cljs.edn

{:main ***-

 :log-level :info

 ;; re-frame-10x setup: 
 :closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}
 ;; also install devtools via preload: 
 :preloads [devtools.preload day8.re-frame-10x.preload]
 }

In package.json I included react and react-dom

"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },

How can I debug this problem?

jumar05:03:47

It's backend + frontend app. Backend serves an html page at configured url (http://localhost:5001/app) It looks like this:

<body>
    <div id="app">

    </div>

    <!-- scripts and styles -->
    <script type="text/javascript">
     var context = "{{servlet-context}}";
     var csrfToken = "{{csrf-token}}";
    </script>

    {% script "/assets/jquery/jquery.min.js" %}
    {% script "/assets/popper.js/dist/umd/popper.min.js" %}
    {% script "/assets/bootstrap/js/bootstrap.min.js" %}

    <!-- original js/app.js script was built by old lein-figwheel -->
    <!-- {% script "/js/app.js" %} -->

    <!-- Here I include the dev build output produced by figwheel-main-->
    {% script "/cljs-out/dev-main.js" %}

  </body>

jumar08:03:52

I got further - the first problem was that I was confused by figwheel lein aliases. I was only running lein fig while I was supposed to specify the dev build. I copied this alias into my :aliases and trying it now

"fig:build" ["trampoline" "run" "-m" "figwheel.main" "-b" "dev" "-r"]

lein fig:build

[Figwheel] figwheel-main.edn is valid \(ツ)/
[Figwheel] Compiling build dev to "target/public/cljs-out/dev/main.js"
...
[Figwheel] Failed to compile build dev in 15.35 seconds.
[Figwheel:WARNING] Compile Exception   target/public/cljs-out/dev/day8/re_frame_10x/inlined_deps/reagent/v1v0v0/reagent/dom.cljs   line:2  column:14

  No such namespace: react-dom, could not locate react_dom.cljs, react_dom.cljc, or JavaScript source providing "react-dom" (Please check that namespaces with dashes use underscores in the ClojureScript file name) in file target/public/cljs-out/dev/day8/re_frame_10x/inlined_deps/reagent/v1v0v0/reagent/dom.cljs

  1  (ns day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.dom
  2    (:require [react-dom :as react-dom]
                  ^---
  3              [day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.impl.util :as util]
  4              [day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.impl.template :as tmpl]
  5              [day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.impl.input :as input]
  6              [day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.impl.batching :as batch]
  7              [day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.impl.protocols :as p]

[Figwheel:SEVERE] failed compiling file:target/public/cljs-out/dev/day8/re_frame_10x/inlined_deps/reagent/v1v0v0/reagent/dom.cljs

I'm not sure why this doesn't work - react-dom is specified in package.json

jumar08:03:10

After commenting out re-frame-10x I got another error. It seems that figwheel docs are incorrect, because for me the build output is target/public/cljs-out/[build-name]/main.js NOT target/public/cljs-out/[build-name]-main.js However, after fixing this I get another error

Uncaught SyntaxError: Cannot use import statement outside a module   main.js:1

# main.js:1
import {npmDeps} from "./npm_deps.js";

jumar09:03:57

Ok, I fixed this by fixing script tag in my html page

<script type="text/javascript" src="cljs-out/dev/main_bundle.js"></script>

👏 2

2022-03-03

Channels