TypeError: Class constructor Zn cannot be invoked without 'new'

[Debdut]

I get this TypeError while using Dexie.js in Typescript class implementation

TypeError: Class constructor Zn cannot be invoked without 'new'

While using the non-class implementation, it works absolutely fine!

var db = new Dexie("MyAppDatabase");
db.version(1).stores({contacts: 'id, first, last'});
db.table("contacts").put({first: "First name", last: "Last name"});

But if I use the class implementation, I get the error

import Dexie from 'dexie';

class AppDatabase extends Dexie {
    contacts!: Dexie.Table<IContact, number>;
    constructor () {
        super("AppDatabase");
        this.version(1).stores({
            contacts: '++id, first, last',
        });
    }
}

interface IContact {
    id?: number,
    first: string,
    last: string
}

const db = new AppDatabase();

Example directly taken from the docs.

[dfahlander]

Are you using moduleResolution "node" in tsconfig as suggested on the sample page? There might also be webpack- or typescript configuration causing problems with named imports. Please provide a link to codeproject, stackblitz or github where your issue is reproduced in full and I think me or someone else can pin point where the issue is.

[princefishthrower]

I also found this the case to be after upgrading dexie from 3.0.3 to 3.2.1.. Basically, the current version of the library is incompatibale with these docs

[szymswiat]

I'm facing the same issue. Which version of dexie is stable and documented?

[pavandv]

Any update on this??

[xmsz]

any update?

[dfahlander]

This is not a dexie error. The problem is that your own typescript code targets ES5 while you import a modern version of dexie targeting es2015 (which is wasn't available in earlier versions of dexie).

https://bobbyhadz.com/blog/typescript-class-constructor-cannot-be-invoked-without-new

What you need to do is either to make sure your packaging uses the legacy ES5 version of dexie.js (located node_moduöes/dexie/dist/dexie[.min].js)

or

Change your tsconfig to target ES2015 or later.

[yesixuan]

This is not a dexie error. The problem is that your own typescript code targets ES5 while you import a modern version of dexie targeting es2015 (which is wasn't available in earlier versions of dexie).

https://bobbyhadz.com/blog/typescript-class-constructor-cannot-be-invoked-without-new

What you need to do is either to make sure your packaging uses the legacy ES5 version of dexie.js (located node_moduöes/dexie/dist/dexie[.min].js)

or

Change your tsconfig to target ES2015 or later.

Change tsconfig is working, bug the question is early version like 2.0.4 does not need this config

[hobbio]

we are facing this issue on a gatsby project, the ts config is pointed to the target you mectioned above but in this case is more related on the way webpack (internall gatsby build engine) creates the code.

So we are having trouble on running dexi on gatsby using typescript

[bradp-roweit]

So we are having trouble on running dexi on gatsby using typescript

We too were struggling to run this using gatsby. Finally managed to get this working, just in case someone else comes across this issue from a google search... A custom babel config should do the trick. Might need to adjust the target browsers to drop support for older browsers. Examples for how to add babel config can be found in Gatsby docs.

[kalebheitzman]

A custom babel config should do the trick

Faced the same issue. This seemed to work for me in .babelrc:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-transform-classes"
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}