Arkadii Ivanov
06/27/2022, 9:08 AMbrowser()
+ binaries.library()
and everything works fine. Now I'm trying to replace Compose with React (org.jetbrains.kotlin-wrappers:kotlin-react-dom
), and I'm getting the following runtime error:
Uncaught Error: Error loading module 'xyz'. Its dependency 'react-dom/client' was not found. Please, check whether 'react-dom/client' is loaded prior to 'xyz'.
If I use binaries.executable()
then there is another runtime error:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'"
Is there a way to distribute a Chrome extension with React dependencies?Big Chungus
06/27/2022, 10:42 AMArkadii Ivanov
06/27/2022, 10:48 AMBig Chungus
06/27/2022, 10:50 AMArkadii Ivanov
06/27/2022, 3:23 PMYou could also have a look at generated webpack config and then try to remove all declared externals via webpack.config.d@Big Chungus Do you have an example how it can be done? For me, everything I put inside
webpack.config.d
directory looks ignored. Also is it applicable for binaries.library()
?Big Chungus
06/27/2022, 3:27 PMturansky
06/27/2022, 4:22 PMreact
and react-dom
in your example) will be available by defaultBig Chungus
06/27/2022, 4:34 PM^/build/js/packages/...
). Or does it not even use webpack for libraries anymore? I kinda assumed it was using webpack externals feature before, but now I feel that it might have been a wrong assumption.
EDIT: for test task I found webpack config embedded into karma.conf.js
, so that solves part of the mystery. But how exactly is the binary built?binaries.executable()
will not work here due to (I assume) missing main method since without it everything gets treeshakenbinaries.library()
by running webpack, rollup or any other bundler on the distribution task output manually.Ilya Goncharov [JB]
06/27/2022, 4:54 PMbinaries.library()
webpack is not used. It is just compilation output (and with IR, all kotlin related modules are included into script)
Moreover, it is the case to not use webpack and leave it as is (and integrate dependencies with own JS project with npm/yarn and bundle it with preferable way)Big Chungus
06/27/2022, 4:57 PMArkadii Ivanov
06/27/2022, 4:57 PMBig Chungus
06/27/2022, 4:58 PM./gradlew jsBrowserProductionLibraryDistribution
2. cd build/productionLibrary
3. npx rollup <your_module_output_file_name>.js --file output.js --format iife
plugins {
kotlin("js")
}
kotlin {
js(IR) {
browser()
binaries.library()
}
}
dependencies {
implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
implementation("org.jetbrains.kotlin-wrappers:kotlin-styled")
implementation("org.jetbrains.kotlin-wrappers:kotlin-extensions")
implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion")
implementation("org.jetbrains.kotlin-wrappers:kotlin-mui")
implementation("org.jetbrains.kotlin-wrappers:kotlin-mui-icons")
implementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:1.0.0-pre.348"))
// New stuff
implementation(npm("react-dom", "*"))
implementation(npm("@mui/material", "*"))
implementation(npm("react", "*"))
implementation(npm("@emotion/react", "*"))
implementation(npm("@emotion/styled", "*"))
implementation(devNpm("rollup", "*"))
implementation(devNpm("@rollup/plugin-commonjs", "*"))
implementation(devNpm("@rollup/plugin-node-resolve", "*"))
}
Run ./gradlew jsBrowserProductionLibraryDistribution
Then cd build/productionLibrary
Then yarn install
And finally yarn rollup ChromeExtensionReproducer-chrome-extension.js --file _out.js --format iife --plugin @rollup/plugin-commonjs --plugin @rollup/plugin-node-resolve
After that your "fat-lib" will be at _out.js
Ping me if you want to discuss what's happening in more detailsArkadii Ivanov
06/27/2022, 6:58 PMUncaught ReferenceError: process is not defined
This looks like the produced code is for server (node), not browser. Overall this looks quite complicated. Maybe I should stick with Compose and without any npm dependencies for now? I won't be able to use mui
either, I guess. The whole reason why I am replacing Compose with React is because I wanted Kotlin 1.7.0, and converting Compose -> React is trivial in my case.Big Chungus
06/27/2022, 7:03 PMArkadii Ivanov
06/27/2022, 7:06 PMBig Chungus
06/27/2022, 7:06 PMwindow.process = window
to the very top of your fat-bundle. See if that hacks it 😄Arkadii Ivanov
06/27/2022, 7:23 PMwindow.process = window
results in uncaught TypeError: window is not a function
🙃Big Chungus
06/27/2022, 7:24 PMyarn rollup -c
Arkadii Ivanov
06/27/2022, 7:38 PMwindow
is defined, I'm able to show an alertTry with this.It works now without errors! Thanks again!
Big Chungus
06/27/2022, 7:47 PMArkadii Ivanov
06/27/2022, 7:57 PMBig Chungus
06/27/2022, 7:57 PMArkadii Ivanov
06/27/2022, 7:58 PMBig Chungus
06/27/2022, 7:59 PMturansky
06/27/2022, 8:04 PMbundling npm deps in a library projectIt looks like
executable
distributionBig Chungus
06/27/2022, 8:06 PMArkadii Ivanov
06/27/2022, 8:09 PMbinaries.library { bundle = true }
would be nice to have. Maybe worth filing a ticket../gradlew :chrome-extension:browserProductionLibraryDistribution
2. cd chrome-extension/build/productionLibrary
3. npm install
4. npx webpack --config ../../webpack.config.js
The config file:
const path = require('path');
module.exports = {
entry: './ChromeExtensionReproducer-chrome-extension.js',
target: 'web',
mode: 'production',
output: {
path: path.resolve(__dirname, 'build/dist'),
filename: 'ChromeExtensionReproducer-chrome-extension.js',
},
};
Big Chungus
06/28/2022, 10:40 PMArkadii Ivanov
07/02/2022, 5:12 PMbinaries.library()
via jsBrowserDevelopmentLibraryDistribution
on Kotlin 1.6.10, all Kotlin dependencies (other Kotlin modules from my project, coroutines, atomicfu, etc.) are bundled inside the resulting .js
file. So if I don't have any NPM direct or transitive dependencies, then there is only one single .js
file created with everything bundled. But on Kotlin 1.7.0 there is separate .js
file per each dependency: kotlinx.coroutines-kotlinx-coroutines-core-js-ir.js
, 88b0986a7186d029-atomicfu-js-ir.js
, and also files for each of my project's modules. Is this change intentional?Big Chungus
07/02/2022, 5:15 PMArkadii Ivanov
07/02/2022, 5:17 PMBig Chungus
07/02/2022, 5:18 PMArkadii Ivanov
07/02/2022, 5:21 PMBig Chungus
07/02/2022, 5:22 PMArkadii Ivanov
07/02/2022, 5:30 PM1.6.20
. To switch it off:
# gradle.properties
kotlin.js.ir.output.granularity=whole-program // `per-module` is the default
Big Chungus
07/02/2022, 5:33 PMArkadii Ivanov
07/02/2022, 5:34 PMBig Chungus
07/02/2022, 5:35 PMArkadii Ivanov
07/02/2022, 5:36 PM./gradlew clean
everything is good! Thanks!binaries.library()
. I'm using the following snippet by running ./gradlew browserLibraryBundle
, the output is in build/dist
folder.Big Chungus
07/02/2022, 7:13 PMArkadii Ivanov
07/02/2022, 7:16 PM