define pyodide interpeter breaks in webpack (cjs?)

[bugzpodder]

Will come up with a repro at somepoint but the essence is:

when calling define (from polyscript) on a custom element for pyodide interpeter it could not be loaded properly when polyscript is bundled via webpack.
esm import for polyscript works great.

[WebReflection]

so we have a webpack issue in another repo that has nothing to do with webpack ... great 😄

don't you think this is a webpack issue instead? which webpack version? which config? and once you answer, I've no idea how to fix webpack in here 😅

[WebReflection]

you mentioned CJS in the issue ... is CJS not reachable or wrong in webpack? 'cause it looks all there to me https://unpkg.com/browse/polyscript@0.1.11/cjs/

[bugzpodder]

having a bit of trouble setting up a clean repo but here are three screenshots. basically webpack can't handle dynamic imports.

[WebReflection]

basically webpack can't handle dynamic imports

again, this looks like a webpack issue to me ... there's gonna be a flag to tell webpack to ignore that and just work with the code as it is.

we're not bootstrapping all interpreters through the network and we won't bundle all interpreters neither because that would make this project various MB, less interesting, and way more obtrusive for all mobile devices.

the remote URL is also needed by interpreters themselves to auto-resolve their dependencies from a CDN so no matter how we look at this, the lazy load here is a feature.

That being said, a way to work around it would be to provide a folder with all files needed by pyodide, including all packages, and pass a different url in a custom build that points at that ... but it'll still be problematic for Webpack to bundle that because of WASM and other files (json or other things) that makes little sense bundled in a single JS file.

Accordingly, the solution to your problem is to tell Webpack that dynamic imports should be ignored.

There's nothing else we can do here so I'll close this issue for the time being.

[bugzpodder]

Got it to work with externalsPresets: { webAsync: true }

Alternatively you can define a function for externals and then process all cdn strings

[WebReflection]

btw, we use rollup all over the place and I never had any issue with dynamic imports there ... maybe you can check some rollup folder config and do a similar thing for your project