Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-12-12

Channels

#shadow-cljs
<
2020-12-12
>
wilkerlucio05:12:54

hello, I bumped shadow in a project and now I'm getting this: Namespace imports (goog:some.Namespace) cannot use import * as. Did you mean to import d3 from 'goog:module$node_modules$d3$dist$d3_node';? Any idea why? The line it points out have this: import * as d3 from "d3";

thheller14:12:07

@wilkerlucio should be import d3 from "d3", unfortunately the closure folks made that change in a strict way. cant' cheat anymore

wilkerlucio14:12:10

thanks, that fixes it 🙏

p-himik15:12:35

When I compile a small piece of code with 

:target           :browser
                         :compiler-options {:output-feature-set :es6}
                         :js-options       {:babel-preset-config {:modules "commonjs"
                                                                  :targets "chrome > 70"}}
there's always this small JS block in the result (after formatting it): 
if ("undefined" !== typeof Symbol) {
        var c = Symbol;
        "object" != typeof c || !c || c instanceof Array || c instanceof Object || Object.prototype.toString.call(c)
    }
It doesn't seem to have any effect and I couldn't find where it comes from. Do you have any idea?

thheller16:12:03

something in cljs.core. look for js/Symbol dunno why its not removed either.

p-himik10:12:12

Nope, nothing there as well. Just 5 instances of js/Symbol usage and none of them seems to be the culprit.

GGfpc21:12:18

So I've recently migrated to shadow-cljs in order to use NPM packages with reagent. I've managed to port over all my previous dependencies from cljsjs, but when I try to use this project: https://github.com/weknowinc/react-bubble-chart-d3 I get an error like this 

Assert failed: Component must not be nil
I'm importing as such 
(ns goodstats.stats
  (:require [reagent.ratom :as ratom]
            [reagent.core :as reagent]
            [ajax.core :as ajax]
            [clojure.edn :as edn]
            ["@weknow/react-bubble-chart-d3" :refer (BubbleChart)]
            ["recharts" :as recharts]))



(def BubbleChart (reagent/adapt-react-class BubbleChart))
In the README they say that one needs to import React as the component does not import it, but I assumed Reagent already imported react (since I'm using other react components). Does anyone know what I'm doing wrong?

anonimitoraf22:12:28

Is that :refer (BubbleChart) on purpose? Instead of :refer [BubbleChart]?

GGfpc22:12:14

I got it from here

GGfpc22:12:26

On the shadow-cljs start page

anonimitoraf22:12:38

Ah. I just had a look at the npm page and it looks like BubbleChart is the default import So, try :default BubbleChart

GGfpc22:12:09

I tried both suggestions and unfortunately the error persists

anonimitoraf22:12:01

maybe try :as BubbleChart as well?

anonimitoraf22:12:20

I remember having to do :as Blah when I thought I needed :default Blah

GGfpc22:12:50

That was the first thing I've tried to no avail 🙂

anonimitoraf22:12:16

I'd be interested to know how people go about debugging issues like this

anonimitoraf22:12:17

one other thing to check is, maybe the import is fine but the issue is caused by something else. After importing it, can you do a (print BubbleChart)? Just to check if it really is nil

GGfpc22:12:37

Hmm, it seems that it returns a function. The console log points to this

GGfpc22:12:11

But in the REPL it's nil

GGfpc13:12:29

Interestingly, this library also does not work for me https://github.com/kauffecup/react-bubble-chart Could the problem be related to d3?

GGfpc22:12:04

Also, in another dependency I have the following issue: 

The required JS dependency "core-js/es6/math" is not available, it was required by "node_modules/recharts/lib/polyfill.js".

Dependency Trace:
        goodstats/index.cljs
        goodstats/stats.cljs
        node_modules/recharts/lib/index.js
        node_modules/recharts/lib/polyfill.js
index.cljs imports all others so I'm able to fix the missing dependency on all but index.cljs by adding the following to index.cljs 
(:require ["core-js/es6/math"])
Resulting in this. And now I don't know how to proceed. 
The required JS dependency "core-js/es6/math" is not available, it was required by "goodstats/index.cljs".

Dependency Trace:
        goodstats/index.cljs