I’m running into a strange issue with Webpack and ...

# javascript

[Jordan Petersen]

I’m running into a strange issue with Webpack and could use some guidance. It seems like Webpack is transforming my imports differently than expected.

I’m trying to integrate tooling from @reown/appkit. I’ve added the dependency in our Gradle file using:

implementation(npm("@reown/appkit", "1.6.5"))

I’ve also written the external declarations. The package installs correctly and is bundled into our JS distribution without issues.

However, inside this dependency, there’s a block of code that asynchronously loads additional modules in parallel:

await Promise.all([
    import('@reown/appkit-ui'),
    import('@reown/appkit-scaffold-ui/w3m-modal')
]);

But somewhere in the process, Webpack transforms these imports into:

await Promise.all([
    Promise.resolve(/*! import() */).then(
        __webpack_require__.bind(__webpack_require__, /*! @reown/appkit-ui */"../../node_modules/@reown/appkit-ui/dist/esm/index.js")
    ),
    __webpack_require__.e(/*! import() */"vendors-node_modules_reown_appkit-scaffold-ui_dist_esm_exports_w3m-modal_js").then(
        __webpack_require__.bind(
            __webpack_require__, /*! @reown/appkit-scaffold-ui/w3m-modal */"../../node_modules/@reown/appkit-scaffold-ui/dist/esm/exports/w3m-modal.js"
        )
    )
]);

The issue is that vendors-node_modules_reown_appkit-scaffold-ui_dist_esm_exports_w3m-modal_js doesn’t exist, and Webpack tries to fetch it from our backend, which obviously fails.

I’d expect the second import to look more like this:

Promise.resolve(/*! import() */).then(
    __webpack_require__.bind(__webpack_require__, /*! @reown/appkit-scaffold-ui/w3m-modal */"../../node_modules/@reown/appkit-scaffold-ui/dist/esm/exports/w3m-modal.js")
)

I can’t figure out why Webpack is wrapping it with __webpack_require__.e(...). Has anyone encountered something like this before? Any ideas on how to resolve it?

Thanks in advance!

[Jordan Petersen]

We think it might be related to webpacks tree-shaking. If I look at webpack-internal the browser sources, we can see @reown/appkit-scaffold-ui/dist/esm/exports/w3m-modal.js is missing.

[turansky]

Looks like they recommend Vite as bundler.
If it's option for you - Kotlin/JS integration with Vite is here ;)
cc @Michael Porotkin

[Jordan Petersen]

Hmm seeing this when importing the plugin:

An exception occurred applying plugin request [id: 'io.github.turansky.kfc.application', version: '13.6.0']
> Failed to apply plugin 'io.github.turansky.kfc.application'.
   > Plugin with id 'org.jetbrains.kotlin.plugin.js-plain-objects' not found.

[turansky]

You can make it available in root project