Server version is used in browser when bundled with Vite

thekevinbrown commented 3 years ago

I've just hit this issue:

https://github.com/vitejs/vite/issues/2329

Would it be possible to update the package.json semantics so that this is easier for consumers of the package?

swiftone commented 3 years ago

Hi @thekevinbrown!

Your question seems related to #568, so I'll link that, but there's not a specific answer for you there. Can you be more specific about the semantics you'd like to see? We have both a server bundle and a browser bundle, and as the Vite team pointed out, there aren't hard standards for how to define the bundles.

thekevinbrown commented 3 years ago

Hi @swiftone,

I'd like it so when I do this:

import { OktaAuth } from '@okta/okta-auth-js';
const oktaAuthClient = new OktaAuth(oktaAuthOptions);

I get the browser version in Vite.

Increasingly we'll need ESM in both browser and server, so in the long run this approach where module is the server module won't hold up in my opinion. As such, I think the best way to do that would be to:

Split the browser and server versions into two separate packages.
Provide module, browser, and main in the browser package, then provide both module and main in the server package.
Users can depend on the browser or server package as needed.

swiftone commented 3 years ago

Thanks for the response - We've definitely had discussions about how to best manage the not-quite-isomorphic nature of this package, so I'll add this issue into those discussions, but there isn't a short-term plan to change this yet.

As a workaround until then, can you make a local module that pulls in the okta code as it demands and then exports that in a way that Vite is happy with?

swiftone commented 3 years ago

Internal ref: OKTA-375389

thekevinbrown commented 3 years ago

@swiftone, no, unfortunately that's not a good workaround as whenever I import the module I get the server version. If I import the UMD directly, then Typescript doesn't get the types for the module.

The only workaround I've found is to alias okta-auth-js to the browser UMD, like this:

vite.config.ts

resolve: {
  alias: [
    {
      find: "@okta/okta-auth-js",
      replacement: require.resolve("@okta/okta-auth-js/dist/okta-auth-js.umd.js"),
    },
  ],
},

Which is pretty gross, but does work.

rschristian commented 3 years ago

@swiftone

While yes, there are no standards for fields like "browser" and "module" in a package, there are much better standards for the "exports" field, especially as tools are adopting resolve.exports.

Vite already uses this and we're adopting it into WMR right now as is Yarn (might actually already be in use in Yarn).

Adding the "exports" field and using resolve.exports as the standard to match would be a good move IMO.

Adding "exports" is a breaking change, however, so might need to be delayed depending on your roadmap.

swiftone commented 3 years ago

@rschristian - thanks for the detailed writeup, I'll definitely include this in our discussion.

shuowu commented 3 years ago

Close this issue as okta-auth-js v5 exposes isomorphic APIs.

cmacdonnacha commented 3 years ago

Is this working with Vite now? I'm still getting these errors:

Using v5.2.3

shuowu commented 3 years ago

@cmacdonnacha It's a known issue with the ESM bundle of okta-auth-js, as a workaround, please config vite to load the umd bundle from okta-auth-js. I am not very familiar with Vite, but you probably can try this config.

cmacdonnacha commented 3 years ago

Ok thanks @shuowu

chillitom commented 2 years ago

This issue saved my bacon, thanks all! It was a long journey to find this answer though, I'm adding the full text of the error in the hope that others will find it more easily.

> 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/@okta/okta-auth-js/esm/idx/types/index.js:12:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/types/idx-js.js" for import "IdxMessage"
    12 │ export { IdxMessage } from './idx-js';
       ╵          ~~~~~~~~~~

 > node_modules/@okta/okta-auth-js/esm/idx/types/index.js:13:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/authenticate.js" for import "AuthenticationOptions"
    13 │ export { AuthenticationOptions } from '../authenticate';
       ╵          ~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@okta/okta-auth-js/esm/idx/types/index.js:14:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/register.js" for import "RegistrationOptions"
    14 │ export { RegistrationOptions } from '../register';
       ╵          ~~~~~~~~~~~~~~~~~~~

 > node_modules/@okta/okta-auth-js/esm/idx/types/index.js:15:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/recoverPassword.js" for import "PasswordRecoveryOptions"
    15 │ export { PasswordRecoveryOptions } from '../recoverPassword';
       ╵          ~~~~~~~~~~~~~~~~~~~~~~~

 > node_modules/@okta/okta-auth-js/esm/idx/types/index.js:16:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/cancel.js" for import "CancelOptions"
    16 │ export { CancelOptions } from '../cancel';
       ╵          ~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 9 errors:
node_modules/@okta/okta-auth-js/esm/idx/types/index.js:12:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/types/idx-js.js" for import "IdxMessage"
node_modules/@okta/okta-auth-js/esm/idx/types/index.js:13:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/authenticate.js" for import "AuthenticationOptions"
node_modules/@okta/okta-auth-js/esm/idx/types/index.js:14:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/register.js" for import "RegistrationOptions"
node_modules/@okta/okta-auth-js/esm/idx/types/index.js:15:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/recoverPassword.js" for import "PasswordRecoveryOptions"
node_modules/@okta/okta-auth-js/esm/idx/types/index.js:16:9: error: No matching export in "node_modules/@okta/okta-auth-js/esm/idx/cancel.js" for import "CancelOptions"
...
    at failureErrorWithLog (C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:1493:15)
    at C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:1151:28
    at runOnEndCallbacks (C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:941:63)
    at buildResponseToResult (C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:1149:7)
    at C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:1258:14
    at C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:629:9
    at handleIncomingPacket (C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:726:9)
    at Socket.readFromStdout (C:\code\TradingUI\ui\node_modules\esbuild\lib\main.js:596:7)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:309:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

ChuckJonas commented 2 years ago

also ran into this issue. Quite painful and hard to track down. Should maybe leave this open or highlight it in the docs

cmacdonnacha commented 2 years ago

The fix for me was to add resolve in my vite.config.ts file:

export default defineConfig({
  ...
  resolve: {
    alias: {
      '@okta/okta-auth-js': '@okta/okta-auth-js/dist/okta-auth-js.umd.js',
    },
  },
  ...
});

okta / okta-auth-js

Server version is used in browser when bundled with Vite #641