Pre-bundling dependency error

[Clee681]

Describe the bug

I am using a library (okta-auth-js) that I think has support for both node and the browser. I'm trying to use the library both client-side and server-side via SvelteKit. I think the pre-optimization step is not bundling the dependency properly based on the below error.

Pre-bundling dependencies:
  @okta/okta-auth-js
(this will be run only when your dependencies or config have changed)
 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:17: error: No matching export in "browser-external:crypto" for import "createCipheriv"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                  ~~~~~~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:33: error: No matching export in "browser-external:crypto" for import "publicEncrypt"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                                  ~~~~~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:48: error: No matching export in "browser-external:crypto" for import "privateDecrypt"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                                                 ~~~~~~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:7:64: error: No matching export in "browser-external:crypto" for import "constants"
    7 │ import crypto, { createCipheriv, publicEncrypt, privateDecrypt, constants } from 'crypto';
      ╵                                                                 ~~~~~~~~~

 > node_modules/@peculiar/webcrypto/build/webcrypto.es.js:8:9: error: No matching export in "browser-external:process" for import "version"
    8 │ import { version } from 'process';

Reproduction

I created a bare bones reproduction using just Vite here: https://github.com/Clee681/okta-esm-module-repro

npm i
npm run dev

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.3
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 1.88 GB / 16.00 GB
    Shell: 3.1.2 - /usr/local/bin/fish
  Binaries:
    Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 91.0.4472.77
    Safari: 14.1
  npmPackages:
    vite: ^2.3.7 => 2.3.7

Used package manager: npm

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[dejour]

but crypto which imported by okta-auth-js isn't supported in browser.

[Clee681]

From an okta-auth-js maintainer:

This module is used as a fallback for node env, browser side depends on the Web_Crypto_API.

okta/okta-auth-js#768 (comment)

Based on that comment, shouldn't Vite ignore pre-bundling the dep when used client side?

As a SvelteKit user, I'm using both the okta-auth-js lib server-side as well as client-side. So, I'm not sure if Vite is properly resolving the dependency tree based on the environment (i.e. browser vs. node).

[Clee681]

Did some more digging, and it seems like okta-auth-js relies on a webpack config in order to decide between the node vs. browser dependencies.

lib/crypto/webcrypto.ts

// ./node is swapped for ./browser in webpack config
export * from './node';

https://github.com/okta/okta-auth-js/blob/master/lib/crypto/webcrypto.ts

webpack.common.config.js

// This is the base webpack config that other configs build upon
var webpack = require('webpack');

module.exports = {
  resolve: {
    extensions: ['.js', '.ts'],
    alias: {
      './node$': './browser' // use browser built-in objects and functions
    }
  },
};

https://github.com/okta/okta-auth-js/blob/master/webpack.common.config.js

I'm a little out of my depth here as I'm not very familiar with webpack and vite. Should Vite be able to handle this scenario?

[aagamdoshi]

Even I am facing similar issue while using Auth0, seems prebundling is the issue. As Auth0 library works well with Webpack

[mgdodge]

In looking at @Clee681 's comment, I had the thought that if it's just an alias, that can be accomplished via resolve.alias in the vite config file:

{
  resolve: {
    alias: [
      {
        find: /^@okta\/okta-auth-js$/,
        replacement: './node_modules/@okta/okta-auth-js/esm/index.js',
      },
    ],
  },
}

I'm pretty sure this is the way the module should be resolved for SPA usage, not sure how we'd do this for SSR. With this in place, the dev server runs and the build succeeds. Still have to set up a sample app to really test things, but if this is even a small step in the right direction, it's worth sharing.

UPDATE: I may have been premature - it looked like it worked for a moment, but now it's failing again. Not sure why.

[traveish]

Based on an old comment by Evan here

Using this for my alias got me past the build errors. I am using @okta/okta-vue @5.0.1 ... but not doing SSR though.

 resolve: {
   alias: {
     '@okta/okta-auth-js': '@okta/okta-auth-js/dist/okta-auth-js.umd.js',
   }
 }

[kenzouno1]

same issue with library @truffle/contract

[bluwy]

This may be fixed by #6493 with its changes to the browser-external proxy