Fork me on GitHub
#clojurescript
<
2019-07-08
>
Vitor Barbosa17:07:58

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?

lilactown17:07:48

@oconn ☝️ that sounds similar to your issue

lilactown17:07:56

not sure if you found a solution yet or not

oconn17:07:17

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.

Vitor Barbosa18:07:13

Thanks @oconn. I'll keep trying to debug it and I'll share it here if I make any progress.

oconn18:07:44

Thank you - I would appreciate that and I’ll do the same

Vitor Barbosa21:07:15

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&amp;orderby=priority%20DESC&amp;keyword=foreign-libs), but I could not track down one that explains this behaviour.

Vitor Barbosa21:07:43

@lilactown ☝️ tagging you just in case you want to follow the findings.

oconn21:07:53

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.

oconn21:07:07

Thanks for sharing btw

Vitor Barbosa21:07:28

Yes, in my case commenting out react-table leads to react-select being bundled properly.

ghadi18:07:58

can someone explain to me the relationship between directories used with :output-to :output-dir and :source-map ?

ghadi18:07:27

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 place

lilactown18:07:39

the 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"}

lilactown18:07:26

I think the major thing is the source-map location needs to be somewhere the browser can access it

ghadi18:07:56

@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

ghadi18:07:30

what is the correct way to get: one js file & one source map under resources/public/js/compiled but nothing else ?

ghadi18:07:53

use a different output-dir then selectively copy?

ghadi18:07:55

never mind, I'm a dummy.

ghadi18:07:08

All those littered files... are the source mapped files

ghadi19:07:51

is the output-dir something that is a good candidate for caching across multiple builds / SHAs in a CI system?

ghadi19:07:26

(I ask because source-maps is blowing up build times by 2x)

lilactown19:07:29

I think CLJS uses an AOT cache for deps etc. but I'm not sure