Fork me on GitHub
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: I just realized it is the exact same issue as @oconn was having above. Maybe you found a solution?


@oconn ☝️ that sounds similar to your issue


not sure if you found a solution yet or not


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

Vitor Barbosa18:07:13

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


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

import ReactDOM from 'react-dom';
window.ReactDOM = ReactDOM;
import React from 'react';
window.React = React;
import Select from 'react-select';
window.Select = Select;
import ReactTable from 'react-table';
window.ReactTable = ReactTable;
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',
              [{: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 (;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.


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.


Thanks for sharing btw

Vitor Barbosa21:07:28

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


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 place


the source maps reference gives an example:

{:output-to "resources/public/js/compiled/main.js"
 :output-dir "resources/public/js/compiled"
 :optimizations :simple
 :source-map "resources/public/js/compiled/"}


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 ?


use a different output-dir then selectively copy?


never mind, I'm a dummy.


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


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


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


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