Dexie.js: Dexie is not a constructor (webpack)

[sebastianmacias]

I'm trying to use Dexie in an Nuxt.js project using vscode.

This is my JS code

let Dexie = require('dexie')
let spawn = Dexie.spawn
var db = new Dexie('testdb')

and this is the error I'm getting.

client.js:60 [nuxt] Error while initializing app TypeError: Dexie is not a constructor
    at Object../node_modules/babel-loader/lib/index.js?{"plugins":[["transform-imports",{"vuetify":{"transform":"vuetify/es5/components/${member}","preventFullImport":true}}]],"babelrc":false,"cacheDirectory":true,"presets":["/home/dev/go/src/bitbucket.org/scaletech/investbase/frontend/node_modules/babel-preset-vue-app/dist/index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/dexie.vue (dexie.vue:19)
    at __webpack_require__ (bootstrap 1e2afcf4fb935497a243:712)
    at fn (bootstrap 1e2afcf4fb935497a243:117)
    at Object../pages/dexie.vue (dexie.vue:1)
    at __webpack_require__ (bootstrap 1e2afcf4fb935497a243:712)
    at fn (bootstrap 1e2afcf4fb935497a243:117)
    at <anonymous>

This might be related to #236

Thanks

[sebastianmacias]

Ok, I was able to get it working by replacing:

let Dexie = require('dexie')

with:

let Dexie = require('dexie').default

It would be a good idea to add this to the docs

tnx

[nponiros]

This is a babel/webpack compatibility issue as far as I know and has nothing directly to do with dexie. Might be better to use ecmascript modules like so:

import Dexie from 'dexie';

[dfahlander]

Yes, the UMD version of dexie (dexie.js and dexie.min.js) exports Dexie and not {default: Dexie}. The only explanation I can find about this, would be that since dexie also support the ES6 module format (has a "module" entry in package.json), the packer might see that and prefer that one. The packer then translates the ES6 export back to a plain require, which fails like this.

[rustygreen]

I am having an issue getting Dexie to import as an ES6 module

import { Dexie } from 'dexie'; // --> TypeError: dexie_1.Dexie is not a constructor

Example: https://stackblitz.com/edit/angular-nmg28c?file=src%2Fapp%2Fapp.component.ts

Any suggestions?

[dfahlander]

import Dexie from 'dexie';

[rustygreen]

Thanks @dfahlander! Sorry, I missed that detail in a previous posting. Much appreciated!

[Pixelynx]

I am having an issue getting Dexie to import as an ES6 module

import { Dexie } from 'dexie'; // --> TypeError: dexie_1.Dexie is not a constructor

Example: https://stackblitz.com/edit/angular-nmg28c?file=src%2Fapp%2Fapp.component.ts

Any suggestions?

Funny enough, I was having issues with getting Vimeo to import using ES6 and because of your post, I decided to add in the curly braces and it worked. lol

[deanpm1994]

I solve the issue adding to my webpack configuration the rule

{
     test: /\.mjs$/,
     include: /node_modules/,
     type: "javascript/auto"
}