Fork me on GitHub

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

{: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]
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?


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

    <div id="app">


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

    {% 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" %}



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
  2    (:require [react-dom :as react-dom]
  3              [ :as util]
  4              [ :as tmpl]
  5              [ :as input]
  6              [ :as batch]
  7              [ :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


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


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