https://github.com/armincerf/ag-charts-v6-bugif you need more info

I never tried esbuild before

maybe it just leaves global as is? webpack replaces it

or are you not running this for dev? your dev build doesn't use esbuild?

this is only for production builds, I'm trying to debug an issue with a library that only happens in production. Will give it a go with webpack

do you have a comparable JS example? to me this error looks like you are supposed to pass in an arg somewhere that is missing

and immediately I'm reminded of why I don't like webpack....

alexdavis@Alexs-MBP-2 ag-charts-v6-bug % npx webpack --entry target/index.js --output public/js/libs.js

Error: Cannot find module 'webpack-cli/package.json'
Require stack:
- /Users/alexdavis/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at runCli (/Users/alexdavis/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js:78:26)
    at /Users/alexdavis/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js:178:5
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/alexdavis/.npm/_npx/89d6e678e21f2dae/node_modules/webpack/bin/webpack.js'
  ]
}

works in development could mean so many things

development also uses the react dev version, so maybe IT doesn't like something

need to narrow it down a little more to be sure it is actually the closure compiler/shadow-cljs messing up

I've set up the same thing with plain react and made a production build and it works fine

the error above suggests you are relying on a global install?

npm install webpack webpack-cli in the project. remove the global if you have one

but just glancing over some of the ag code I see a bunch of stuff the closure compiler will absolutely hate

yeah I wish I didn't have to use it... unfortunately I do

var w = "\n                function get_" + n + "() {\n                    return this." + t + ";\n                };\n                get_" + n + ";\n            ";
                        Object.defineProperty(f, n, {
                            set: eval("\n                " + (d ? "var setCount \x3d 0;" : "") + "\n                function set_" + n + "(value) {\n                    const oldValue \x3d this." + t + ";\n                    " + (h ? "value \x3d convertor(value);" : "") + "\n                    if (value !\x3d\x3d oldValue) {\n                        this." + t + " \x3d value;\n                        " + (d ? "console.log({ t: this, property: '" + n + "', oldValue, value, stack: new Error().stack });" : "") + "\n                        " + ("normal" === e ? "this.markDirty(this, " + g + ");" : "") + "\n                        " + ("transform" === e ? "this.markDirtyTransform(" + g + ");" : "") + "\n                        " + ("path" === e ? "if (!this._dirtyPath) { this._dirtyPath \x3d true; this.markDirty(this, " + g + "); }" : "") + "\n                        " + ("font" === e ? "if (!this._dirtyFont) { this._dirtyFont \x3d true; this.markDirty(this, " + g + "); }" : "") + "\n                        " + (k ? "changeCb(this);" : "") + "\n                    }\n                    " + (q ? "if (value !\x3d null \x26\x26 value._dirty \x3e " + v.NONE + ") { this.markDirty(value, value._dirty); }" : "") + "\n                };\n                set_" + n + ";\n            "),
                            get: eval(w),
                            enumerable: !0,
                            configurable: !0
                        })

why the fuck is there eval code?

There is some issue about it causing other issues https://github.com/ag-grid/ag-grid/issues/5336

Maybe it will work if I trigger the fallback by enforcing CSP somehow

nah all stuff with eval is almost guaranteed to break

function get_" + n + "( here they are creating a function with a dynamic name

the closure compiler will almost certainly have renamed or removed that actual function

so it can't find it and break maybe

no clue what this code is supposed to be doing but it looks suspicious

But if I can get ag charts to go through another bundler it will be ok right?

no clue

worth a try, since the closure compiler is definitely much more picky about certain code

but yeah confirmed that esbuild just doesn't replace the global like webpack would

just replacing it with window manually works fine

Ok once that is working the production build does work with my minimal example, so that is good I guess. Are there any major concerns for using this double bundle/external provider approach in a big app?

only if you intend to code split

We do have a couple of modules but can probably combine them into one since it doesn't make a huge difference for our use case anyway

cljs code still splits just fine

just the JS code won't

so there will always be one huge libs.js file

Ahh I see, shouldn't be a problem then. So only remaining issue is I would like to use esbuild, which I guess means changing the external_boilerplate.js file in shadow, what do you think the best way to do that is?

you can just take the original file and put it into your classpath

so you create a src/main/shadow/build/targets/external_boilerplate.js or whatever your source path is

and in that file replace global with window

or check if esbuild has a flag to replace that. I'd expect it to have one

why do you set :compiler-options {:output-feature-set :es5}? that is causing the problem.

It is needed for our internal UI modules to work. Do we have a way to set babel or other config to recognise properly?

> for our internal UI modules to work

what does that mean? what error do you get otherwise?

We could not import the UI library, but with es5 we could able to import and consume.

the error is telling you that a newer JS feature cannot be downgraded to :es5. so the fix is either to bump that lower limit, or not use that library. there is no other solution.

I mean you can use something like webpack to get rid of that error, but the code will still be using that newer version of code

Can we compile that specific module only with webpack?, if yes could you please provide if any examples

no, webpack either for everything or nothing

Ok got it. Thanks

Can we add the following babel polyfill as part of the shadow-cljs lifecycle hooks just before its regular compilation phase, https://babeljs.io/docs/babel-plugin-transform-named-capturing-groups-regex

babel is not used, so no

I mean you can always preprocess the file in the node_modules folder

Nice, can I preprocess the file in this location node_modules/@internationalized/date/dist/main.js Please let me know how to do it

you run babel on that file manually

shadow-cljs is not involved

Sure. Thanks much @thheller for your help!

do you mind to explain why you need :es5? it makes no sense to use :es5, I don't get why you are using it. all this effort seems wasted on a faulty assumption that you need :es5? are you running on some historic JS engine from 10 years ago?

there are very very few reasons to run :es5, basically only specialty JS engines. definitely not for browsers, unless you need to support like ie8?

There is a one react library which developed by another internal team and it's compatible to :es5/`:es6` . I personally like to use :es8 but few compatibility issues with that library. I will check with my team if they can target for :es8

can you give an example? I mean stuff :es8 is usually compatible with all of :es5, just not the reverse? I have not seen code that worked in :es5 but not :es8 in a JS engine that supports :es8?

We have import statement like below ["@fuegokit/react" :as fuegokit] and (def ui-box (react-interop/react-factory fuegokit/Box)) With es8 getting

cient.cljs:23 Uncaught TypeError: app.fuegokit.ui_box is not a function

none of that generates any es8 code, so the fault is likely somewhere else?

try to (js/console.log "debug" fuegokit/Box fuegokit) before the (def ui-box ...). just to see what that object is

also are there any other console messages? maybe an error during load?

One is, in.js:1499 Module not provided: module$node_modules$$internationalized$date$dist$main r

anything else?

Another in.js:1499 SyntaxError: Unexpected token ',' (at module$node_modules$react_aria_components$dist$main.js:266:375)

I have added (js/console.log "debug" fuegokit/Box fuegokit) But nothing printing in console

do you do any other manual processing of the code?

the react-aria-components code works just fine?

which browser are you testing with?

I am using chrome

The console looks

yeah the last error is pretty much irrelevant at that point, all the others cause that one

there should be no errors during load, the code cannot be trusted to work after the first

have you tried disabling all chrome extensions? all looks like valid code to me, so not sure why it fails for you

Disabled all extensions in chrome, but having same logs

and there is no other processing of the JS output?

Yes, currently no manual processing

just running npx shadow-cljs server

very strange. all those packages compile and work just fine for me

Oh ok. I have tried with [email protected] and latest version, but not sure where it is breaking

well 2.14 would also be a much older closure-compiler version, that could always be a problem