NativeScript: [NS8][Webpack5] Wrong bundling in release build

Still looking into the details, but a workaround is to disable webpack’s export tracking with

webpack.chainWebpack(config => {
  config.optimization.usedExports(false)
})

What’s happening is that (in this particular case) the class in ui-material-core:

https://github.com/nativescript-community/ui-material-components/blob/e0fbd59f678a23214958d5895e3185e6a6241cba/src/core/index.android.ts#L286-L295

is detected as unused in the app (since it’s not exported, and the installMixins/overrideViewBase functions are not called) - however webpack doesn’t drop it from the vendor chunk - and it’s definition stays as-is. The imports for those 2 properties aren’t converted to proper webpack imports either, so we end up with undefined.setNative that crashes…

vendor.js ends up looking like this:

class ViewOverride extends (/* unused pure expression or super */ null && (View)) {
    [androidElevationProperty.setNative](value) {
        this[elevationProperty.setNative](value);
    }
    [androidDynamicElevationOffsetProperty.setNative](value) {
        this[dynamicElevationOffsetProperty.setNative](value);
    }
}

If we opt-out of the used exports tracking, webpack processes it correctly:

class ViewOverride extends view_index_android.View {
    [style_properties.androidElevationProperty.setNative](value) {
        this[elevationProperty.setNative](value);
    }
    [style_properties.androidDynamicElevationOffsetProperty.setNative](value) {
        this[dynamicElevationOffsetProperty.setNative](value);
    }
}

(style_properties is defined)

I actually believe this is a webpack5 bug, will need to try and reproduce it outside of NS to submit a bug report.

@tinybigideas @PackagedCat in meantime while we are implementing a fix in webpack for this case, you can do this:

1. set your devDependencies to this:

"@nativescript/webpack": "~4.1.0",

1. Delete webpack.config.js

2. ns clean

3. npm install --legacy-peer-deps (This will generate a fresh webpack.config.js)

• Install sass if using .scss files in project: npm install sass -D --legacy-peer-deps

• If using Vue, be sure to install the following:

• npm install vue-loader @babel/core @babel/preset-env babel-loader -D --legacy-peer-deps

• You may also want to add '__DEV__': !production, to new webpack.DefinePlugin({ section – the sample app provided used that.

1. In package.json, change to "main": "app.js" (or if using Angular or any other with a main bootstrap file, change to "main": "main.js")

2. Run app and confirm runs just the same. Now make the release build.

We’ll close this issue once we have the webpack5 fix out.

This has been fixed in webpack 5.40.0 https://github.com/webpack/webpack/releases/tag/v5.40.0

https://github.com/webpack/webpack/issues/13575 https://github.com/webpack/webpack/pull/13590

Also suffering with this issue. Is there a way to hack around this issue for the time being?

Here is a demo example where the error occurs.

demo.crash.zip

The build command: ns build android --release --key-store-path *keystore* --key-store-password *keypassword* --key-store-alias *alias* --key-store-alias-password *password*