considering jose library from dist/browser instead of dist/node

[suraj-sella]

This is more of a discussion rather than an issue. Apologies if this had a better place to be asked than here, I used this space for lack of a discussions tab.

I am running a project scaffolded through create electron-vite in react. Ordinarily with a simple index.js file using the jose library I am able to generate the expected PublicKeyType & PrivateKeyType but when using the jose library inside of main.ts app.whenReady in electron-vite react project it is giving types of CryptoKey for both the public & private keys. Upon research I found that, jose's dist/browser code is being used from node modules rather than dist/node code which is required for my project to run successfully.

Can somebody point me to the configuration changes required to tell electron-vite to use dist/node within jose library and not the dist/browser for this to resolve the methods used of jose.

PS: I have tried nodeIntegration: true, hoping it would help but no luck. I have been going through similar issues and the docs but no luck.

[caoxiemeihao]

Hey! 👋 @suraj-sella
Perhaps you can provide a minimal replication repo for our discussion.

[suraj-sella]

@caoxiemeihao Thank you so much for responding.

Here is a minimal replication repo as requested: https://github.com/suraj-sella/electron-vite-jose

Please note that I have used require statements and you can see the cryptoRuntime is node:crypto as expected.
If you replace those require with import statements (I am assuming that is standard) cryptoRuntime becomes webCryptoAPI and the functionality fails.

Again, highly appreciate the time you spend with this query.

[caoxiemeihao]

• Case 1: import * as jose from 'jose' means it will be resolve by Vite, and the actual loaded path is dist/browser/index.js

---

• Case 2: const jose = require('jose') will not resolved by Vite, which means that using the require(id) function of Node.js to load the module, the actual path is dist/node/cjs/index.js.

---

This is simply because Vite will not parse the require(id) function by default and we do not want require(id) to be parsed by Vite in the Electron main process.
If you want to import dist/node or dist/browser very accurately you can complete the import path.

Although Vite can be configured to control the imported path, this may not apply to all npm modules.

BTW, another way is to change the import path by resolve.alias. This is a very convenient way. I will often use it to achieve my purpose.

e.g.

// vite.config.ts
{
  resolve: {
    // For Vite parse `import` path.
    alias: {
      jose: 'jose/dist/node/cjs/index.js', // use node.js
      jose: 'jose/dist/browser/index.js', // use browser
    },
  },
}

[suraj-sella]

That was so explanatory. Thank you so very much for your valuable time. I do have a follow up query though,

1. In Case 1. why are we going with the actual loaded path of dist/browser/index.js. Is this how vite works always resolving browser code?
2. Case 2 makes complete sense I could now understand why it works for me. But, you mentioned we can import dist/node by very accurately completing the import path. Are you suggesting the below ?

import * as jose from '../node_modules/jose/dist/node/cjs' ?

3. I have tried the resolve alias previously (this to me as per docs sounded like the best and correct way to solve my issue) but does not work for me. I have pushed that code to the same repo as well. Do check it out if you can as I am wondering if that is correct then is resolve not working as vite intended.