This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-07-08
Channels
- # aleph (10)
- # announcements (4)
- # beginners (25)
- # calva (4)
- # cider (56)
- # clj-kondo (10)
- # cljdoc (1)
- # cljs-dev (58)
- # clojure (42)
- # clojure-austin (5)
- # clojure-dev (90)
- # clojure-europe (2)
- # clojure-greece (2)
- # clojure-italy (3)
- # clojure-nl (63)
- # clojure-quebec (1)
- # clojure-seattle (2)
- # clojure-spain (4)
- # clojure-spec (19)
- # clojure-uk (25)
- # clojuredesign-podcast (5)
- # clojurescript (24)
- # cursive (15)
- # datomic (1)
- # events (1)
- # figwheel-main (10)
- # fulcro (62)
- # graphql (7)
- # keechma (11)
- # nrepl (1)
- # off-topic (12)
- # re-frame (8)
- # reitit (2)
- # remote-jobs (3)
- # shadow-cljs (127)
- # specter (1)
- # sql (43)
- # testing (2)
- # tools-deps (30)
- # xtdb (1)
Hello everyone! I just posted a question on stackoverflow on a problem I had using clojurescript + webpack with advanced compilations. I was going to post it here because I think it is more active than stackoverflow for clojurescript, but I think it is nice to post it there so it is easier for others with similar problems to find answers in the future. If someone can help, the link is here: https://stackoverflow.com/questions/56939962/clojurescript-with-webpack-and-infer-externs-requires-undefined-object-with-adva I just realized it is the exact same issue as @oconn was having above. Maybe you found a solution?
That does look like the issue I’m seeing. I have not solved the problem yet, still working it when I get down time. I am seeing other odd behavior when building with advanced that may or may not be related but... (clj->js {"@global" {:keyword "value"}})
throws a pretty cryptic error during advanced compilation and is fine with none or whitespace. Ran into that while trying to debug the above. I’ll be able to paste the error later today. Read through a few issues and was about to start looking into https://clojurescript.org/reference/compiler-options#optimize-constants.
Thanks @oconn. I'll keep trying to debug it and I'll share it here if I make any progress.
Hi @oconn.
I was able to find a very simple (yet tedious) workaround. Instead of creating a single bundle with webpack, if I create one bundle for each external library and define each of those libraries on the :foreign-libs
, it all works nicely.
This means I have this now:
src/js/react-dom.js
js
import ReactDOM from 'react-dom';
window.ReactDOM = ReactDOM;
src/js/react.js
js
import React from 'react';
window.React = React;
src/js/react-select.js
js
import Select from 'react-select';
window.Select = Select;
src/js/react-table.js
js
import ReactTable from 'react-table';
window.ReactTable = ReactTable;
webpack.config.js
js
module.exports = {
entry: {
react_dom: './src/js/react-dom.js',
react: './src/js/react.js',
react_select: './src/js/react-select.js',
react_table: './src/js/react-table.js',
},
output: {
filename: '[name].js',
}
}
project.cljs
clojure
[...]
:foreign-libs
[{:file "dist/react.js"
:provides ["react"]
:global-exports {react React}}
{:file "dist/react_dom.js"
:provides ["react-dom"]
:requires ["react"]
:global-exports {react-dom ReactDOM}}
{:file "dist/react_select.js"
:provides ["react-select"]
:requires ["react" "react-dom"]
:global-exports {react-select Select}}
{:file "dist/react_table.js"
:provides ["react-table"]
:requires ["react" "react-dom"]
:global-exports {react-table ReactTable}}]
[...]
This works for me, but I have no clue why it does. Apparently there are some tickets relating to foreign-libs opened on the jira (https://clojure.atlassian.net/projects/CLJS/issues/?filter=allissues&orderby=priority%20DESC&keyword=foreign-libs), but I could not track down one that explains this behaviour.@lilactown ☝️ tagging you just in case you want to follow the findings.
Ugh.. yeah that’s kinda what I was seeing - I have 5 foreign libs - 3 of them are undefined when using advanced compilation - commenting out a specific one results in the other two working. So I’m curious if commenting out react-select
or react-table
would result in the others being bundled properly. Then just bundle that one separately. That was one of my next steps.
Yes, in my case commenting out react-table
leads to react-select
being bundled properly.
Same as you.
can someone explain to me the relationship between directories used with :output-to
:output-dir
and :source-map
?
right now I use:
:output-to "resources/public/js/compiled/app.js"
:optimizations :simple
and it does the right thing, but I want to make include source-maps in an accessible placethe source maps reference gives an example: https://clojurescript.org/reference/source-maps
{:output-to "resources/public/js/compiled/main.js"
:output-dir "resources/public/js/compiled"
:optimizations :simple
:source-map "resources/public/js/compiled/main.js.map"}
I think the major thing is the source-map location needs to be somewhere the browser can access it
@lilactown if i set output-dir, I get a ton of sibling files in the resources/public/js/compiled directory -- all the compiler temp output ends up there
what is the correct way to get:
one js file & one source map under resources/public/js/compiled
but nothing else ?