[Q] Uncaught TypeError: Object(...) is not a function in connect(store, LitElement)

[dzintars]

Not sure is this relevant, but will leave it there for an reference.
When trying to build with Webpack, build process succeeds, but at runtime i get Uncaught TypeError: Object(...) is not a function. It points to connect(store, LitElement){....}.
If i look into sourcemap i see that error comes from let Sr = class extends (Object(wr.connect) (fn, vr)) {.... which seems wrong to me because of missing comma. If i add that comma, no more runtime error and application is running.
If i compile the same source with Rollup, there is no error at all and application works as expected.
I will update this issue once i will get further.

[CaptainCodeman]

Difficult to suggest anything without a reproducible setup.

[dzintars]

Ok. I got closer to the root cause. I copied source of this library into local utils/connect/index.ts and modified import accordingly. When I did that my Prettier added missing semicolons in various places as example there - const unsubscribe: unique symbol = Symbol();. (trailing semicolon)
Now build succeeds as well and I have no run-time error.
So this is somewhat related to my WebPack configs.
I will update this issue once I will figure this out. Probably i need some preloader which adds missing semicolons.
EDIT:
Nop. Even if I turn semi of semi: false, in Prettier and format my source, just importing this module leads to run-time error, but does not fail if importing from utils.

[dzintars]

What about this line:

  class connected extends superclass {
    private [unsubscribe]: Unsubscribe;
    private [dispatchMap]: DispatchMap
....

You have that trailing semicolon there.

[lorefnon]

I also ran into this today.

The problem is that in package.json you have a browser field ("browser": "connect.min.js") pointing to connect.min.js which is not a module.

Webpack's resolution for default import is determined by resolve.mainFields which defaults to ['browser', 'module', 'main'], so webpack picks up the connect.min.js.

I suggest updating the browser field to connect.js because all webpack users are likely to run into this.

Temporary workaround is to add the following alias in webpack.config.js:

module.exports = { 
    // ... 
    resolve: {
        alias: {
            '@captaincodeman/redux-connect-element': path.resolve('node_modules', '@captaincodeman/redux-connect-element/connect.js')
        }
    }
}

[dzintars]

I just gave up and cloned this repo into local utils directory and fixed some typo. Working fine.