core-web package fails during runtime after building within vue app

[takahser]

New issue checklist

• [ X ] I have read all of the README
• [ X ] I have searched existing issues and this is not a duplicate.

General information

• Library version(s): core-web v1.4.3
• Browser version(s): Chrome: 72.0.3626.121, Firefox: 65.0.1, Safari: 12.0.3
• Devices/Simulators/Machine affected: No
• Reproducible in the testnet? (Yes/No): Yes
• Related issues: -

Bug report

Expected behavior

@nimiq/core-web should work in a VueJs app either of the following both scenarios:

• running a vue app locally using vue-cli-service serve
• building it using vue-cli-service build and running from a webserver should also work.

Actual behavior

• Running this vue app locally using vue-cli-service serve works.
• Building the project using vue-cli-service build and running from a webserver doesn't work. Instead, it fails with a console error, which is varies in different browsers (for details, see 'Crash log' section)

Steps to reproduce

git clone the reproduction repo and run:

# install dependencies
yarn install

# serving locally works
yarn serve

# building and serving from webserver fails
# i) create the build
# ii) run the built files in the /dist dir using the 'serve' web server package
yarn run serve:dist 

Crash log

• Chrome

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module.<anonymous> (web.esm.js:1)
    at Module.6a96 (web.esm.js:1)
    at l (bootstrap:78)
    at Module.56d7 (HelloWorld.vue?91b6:20)
    at l (bootstrap:78)
    at Object.0 (bootstrap:151)
    at l (bootstrap:78)
    at r (bootstrap:45)
    at bootstrap:151
    at bootstrap:151

• Safari

[Error] TypeError: The superclass is not an object.
    (anonymous function) (chunk-vendors.baa86154.js:7:437627)
    6a96 (chunk-vendors.baa86154.js:7:659917)
    l (app.2a74bbbc.js:1:526)
    56d7 (app.2a74bbbc.js:1:4356)
    l (app.2a74bbbc.js:1:526)
    (anonymous function) (app.2a74bbbc.js:1:1521)
    l (app.2a74bbbc.js:1:526)
    r (app.2a74bbbc.js:1:390)
    (anonymous function) (app.2a74bbbc.js:1:1486)
    Global Code (app.2a74bbbc.js:1:1490)

• Firefox

TypeError: class heritage i.JungleDB is not an object or null web.esm.js:1:397996
    6a96 web.esm.js:1 6a96 web.esm.js:1 l8Webpack

[mar-v-in]

I found this example of JavaScript that becomes broken when compiled through webpack/vue-cli in production mode:

class TestClass {}
const TestNamespace = {}
TestNamespace[TestClass.name] = TestClass
class TestSubClass extends TestNamespace.TestClass {}
console.log(TestSubClass)

This looks like an issue with the minimizer used by webpack/vue-cli. Building in development mode (vue-cli-service build --mode=development) won't cause the issue. I guess it is possible to somehow configure (or disable) the minimizer, but I am not an expert on vue-cli-service and webpack configuration.

[bitcoinvsalts]

hi @mar-v-in thank you for your reply. @takahser also added an issue on the vue-cli repo and here is their reply: https://github.com/vuejs/vue-cli/issues/3590#issuecomment-470819191

what's your thought on it?

[arpu]

@sisou any news on this? i hit the same problem on webpack production build

the only solution is disable minimize in production :/

module.exports = {
  //...
  optimization: {
    minimize: false
  }
};

[arpu]

ok worked with this too

minimizer: [
            new TerserPlugin( {
                extractComments: true,
                cache: true,
                parallel: true,
                sourceMap: false, // Must be set to true if using source-maps in production
                terserOptions: {
                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                    extractComments: "all",
                    keep_fnames: /Float32Array/, //https://github.com/mrdoob/three.js/issues/18540
                    mangle: {keep_classnames: true}, //https://github.com/nimiq/core-js/issues/482
                    compress: {
                        drop_console: true,
                        //  passes: 3,
                        //  keep_infinity: true
                    },
                },
            } ),

        ],

as shown in the comment https://github.com/nimiq/core-js/issues/482#issuecomment-472611483

the importend part is mangle: {keep_classnames: true}, //https://github.com/nimiq/core-js/issues/482

[sisou]

Thank you for your research and solution. The core-js library currently relies on global class names, which are indeed mangled by the production bundler.

For the browser package of Nimiq 2.0 Albatross, we hope to not rely on globals anymore and have a self-contained build.

[arpu]

hey @sisou,

what i read there is now way right now for a rust wasm Albatross build, would it make still sense to implement nimiq with the core-js for a webapp?

[sisou]

The Core Client API will (hopefully) not change significantly for Albatross.

So yes, building a Nimiq webapp is still a good idea with core-js now.

Experiments with compiling to WASM in core-rs-albatross are currently going on, but since the light consensus is also not 100% ready yet, a browser node from the rust code is not yet possible.

[arpu]

ok good to know! would be good to find a fix for this on nimiq core-js side or find a way to only not mangle global class names for core-js

[arpu]

@sisou no idea if this is relevant but on debug builds i still get

WARNING in ./node_modules/@nimiq/core-web/web.esm.js 1:95102-95112
Critical dependency: the request of a dependency is an expression

difficult to debug to find web.esm.js 1:95102-95112