Welcome! Please see the About page for a little more info on how this works.

0 votes
in ClojureScript by

I have a project setup where I want to serve my clojurescript from my clojure server and I want to keep all in one repo, if possible. The server works and returns the static resources including reagent files. However, when the app.js is processed, I get the following console ouput:

core.cljs?rel=1589815066414:6  undefined
core.cljs?rel=1589815066414:8  Uncaught TypeError: Cannot read property 'call' of undefined
    at core.cljs?rel=1589815066414:8
(anonymous) @ core.cljs?rel=1589815066414:8

To my eyes everything in my code looks the way it should be.

This is my core.cljs:

(ns ws-poc.core
  (:require
   [reagent.core :as reagent]))
(.log js/console reagent) ;; <== reagent is undefined, see first line of log

(reagent/render-component
 [:h1 Works!]
 (. js/document (getElementById "app")))

This is my index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet" type="text/css"> -->
  </head>
  <body>
    <div id="app">
      <h2>Works!</h2>
    </div>
    <script src="js/compiled/app.js" type="text/javascript"></script>
  </body>
</html>

This is my project structure:

.
├── project.clj
├── resources
│   └── public
│       ├── css
│       ├── index.html
│       └── js
│           └── compiled
│               ├── app.js
│               └── out
│                   ├── cljs
│                   ├── cljs_deps.js
│                   ├── cljsc_opts.edn
│                   ├── cljsjs
│                   ├── clojure
│                   ├── figwheel
│                   ├── goog
│                   ├── process
│                   ├── reagent
│                   └── ws_poc
├── src
    └── ws_poc
        ├── core.cljs
        └── server
           └── core.clj

And finally my project.clj:

(defproject ws-poc "0.1.0-SNAPSHOT"
      :description "FIXME: write description"
      :url "http://example.com/FIXME"
      :license {:name "Eclipse Public License"
                :url "http://www.eclipse.org/legal/epl-v10.html"}
      :dependencies [[org.clojure/clojure "1.8.0"]
                     [org.clojure/clojurescript "1.10.764"]
                     [environ "1.2.0"]
                     [reagent "1.0.0-alpha1"]]

      :plugins [[lein-figwheel "0.5.19"]
                [lein-cljsbuild "1.1.8"]
                [lein-environ "1.2.0"]]

      :source-paths ["src"]

      :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]

      :main ^:skip-aot ws-poc.server.core

      ; :target-path "target/%s"
      :profiles {:dev {:env {:dev? "true"}
                       :cljsbuild {:builds
                                   [{:id "dev"
                                     :source-paths ["src"]
                                     :figwheel {}
                                     :compiler {:main ws-poc.core
                                                :asset-path "js/compiled/out"
                                                :output-to "resources/public/js/compiled/app.js"
                                                :output-dir "resources/public/js/compiled/out"
                                                :source-map-timestamp true}}]}}}

      :figwheel {:css-dirs ["resources/public/css"]})

2 Answers

0 votes
by
 
Best answer

I decided against using clj and cljs in one codebase. I tried different configurations and in one I got reagent to work but then I had trouble running my server. This is far too much effort for the little added value, I expected to get from this.

0 votes
by
(ns ws-poc.core
  (:require
   [reagent.core :as reagent]))

The :as creates a namespace alias only. Therefore accessing reagent is not valid. The alias lets you write the "shorter" reagent/render instead of the fully-qualified reagent.core/render.

You should be getting a compiler warning for the (.log js/console reagent) call.

This has nothing to do with your setup and is just an incorrect use of a namespace alias as a var.

...