Dexie outputs "default" with TypeScript + Webpack require

[douglasg14b]

When trying to follow the code here https://github.com/dfahlander/Dexie.js/blob/master/samples/typescript/src/appdb.ts

where you import Dexie from 'dexie';

After It's packed by webpack, it turns into __webpack_require__(56); which returns an object with a property of default, and under that property is all of the Dexie properties. This ends up preventing my class from extending Dexie since there is no Dexie to extend from, unless I was to have default.Dexie

Screenshot:

Is this intended behavior? And is there a way around this?

[nponiros]

The default part is normal. import Dexie from 'dexie' imports dexie using the default export and the default export is just dexie. Extending it should not be an issue unless something changed in typescript (don't remember seeing anything in the changelog) or dexie.

What is the error you get? It also could be an issue with your build process. I tested extending dexie a few days ago with typescript 2.4 (no webpack).

[douglasg14b]

To get this working, I had to do require ('dexie').default; and in the compiled output it uses the default property.

[activebiz]

I am having exact same behaviour when upgrading from webpack 3 to 4. I am using typescript. How do you do require ('dexie').default; with typescript ?

[dfahlander]

@activebiz Make sure you have the following in tsconfig.json:

{
  "compilerOptions": {
    ...
    "module": "es2015",
    "moduleResolution": "node"
    ...
  }
}

Also, that you import Dexie as the default import:

import Dexie from 'dexie';

If you still do these things and get error with webpack 4, we'd need to investigate what webpack / typescript configurations that could mess this up. Are you using the tsconfig attribute allowSyntheticDefaultImports? If so, try if importing Dexie as a named import will do it:?

import {Dexie} from 'dexie'; 

I know, it's a pain having to deal with these stuff. I think using default exports gives pain in general, that's why we've allowed named import of Dexie since version 2, even though not documented. May go over to that in the docs if this is a solution that gives less pain.

Different import styles have caused a lot of pain earlier. Because of that, Dexie in its module tries to safe it for all styles by exporting both "default", "Dexie" and "Dexie.default":

Dexie.default = Dexie; // Needed historically for some rollup users.

module.exports = {
  Dexie,
  default: Dexie
}

[activebiz]

Thanks for the quick response.

The tsconfig has got the same. the allowSyntheticDefaultImports is set to false. This error is at run time btw.

Uncaught ReferenceError: require is not defined at Module../node_modules/dexie/dist/dexie.mjs (dexie.mjs:3772) at webpack_require (bootstrap:724) at fn (bootstrap:101)

[dfahlander]

Sounds like a pure webpack problem. The dexie.mjs does not contain any call to require. Seems webpack is doing some transpiling here, or you are using some fork of dexie.

[activebiz]

Funny you mentioned dexie.mjs. My webpack 4 config needed following...

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

This has fixed the problem.

[dfahlander]

Can anyone advice here? Webpack is doing something strange. What version of dexie are you using? Only [email protected] has dexie.mjs but it does not contain require.

[activebiz]

I am using 3.0.0-alpha.2 and its working with above fix.

[eduard2014]

I´m using dexie (3.0.0-alpha.6), typescript(3.2.2) and webpack (4.27.1) and I have the same problem:

ReferenceError: require is not defined at Module.Texg (dexie.mjs:4232) at webpack_require (bootstrap:802) at fn (bootstrap:165) at Module.CyQN (AppDb.ts:1)

It's working with the activebiz fix.

[brandonxiang]

Anyone has solve this problem?

[brandonxiang]

Funny you mentioned dexie.mjs. My webpack 4 config needed following...

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

This has fixed the problem.

@activebiz what this means？