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

thekevinbrown · 2021-03-02T22:45:20Z

I've just hit this issue:

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

The text was updated successfully, but these errors were encountered:

swiftone · 2021-03-02T22:53:44Z

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 · 2021-03-03T01:09:18Z

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 · 2021-03-03T17:14:56Z

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 · 2021-03-03T17:19:40Z

Internal ref: OKTA-375389

thekevinbrown · 2021-03-03T21:59:02Z

@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 · 2021-03-04T00:00:47Z

@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 · 2021-03-04T00:09:15Z

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

shuowu · 2021-07-15T18:13:19Z

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

cmacdonnacha · 2021-10-13T15:39:45Z

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

Using v5.2.3

shuowu · 2021-10-13T15:50:38Z

@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 · 2021-10-13T15:52:07Z

Ok thanks @shuowu

chillitom · 2021-11-23T15:51:19Z

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 · 2022-01-07T06:22:33Z

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

cmacdonnacha · 2022-05-12T10:54:37Z

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',
    },
  },
  ...
});

thekevinbrown mentioned this issue Mar 3, 2021

When importing some modules with multiple entry points in package.json, the server version is selected instead of the browser version vitejs/vite#2329

Closed

2 tasks

ericclemmons mentioned this issue Mar 19, 2021

chore: Vite Bundle Size Action Example Demonstrating Vite Errors with library aws-amplify/amplify-js#7970

Closed

ErikCH mentioned this issue Mar 23, 2021

Vite apps will not build or run while using Amplify libraries with AWS-SDK aws/aws-sdk-js#3673

Closed

3 tasks

shuowu closed this as completed Jul 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

thekevinbrown commented Mar 2, 2021

swiftone commented Mar 2, 2021

thekevinbrown commented Mar 3, 2021

swiftone commented Mar 3, 2021

swiftone commented Mar 3, 2021 •

edited

Loading

thekevinbrown commented Mar 3, 2021

rschristian commented Mar 4, 2021

swiftone commented Mar 4, 2021

shuowu commented Jul 15, 2021

cmacdonnacha commented Oct 13, 2021 •

edited

Loading

shuowu commented Oct 13, 2021 •

edited

Loading

cmacdonnacha commented Oct 13, 2021

chillitom commented Nov 23, 2021

ChuckJonas commented Jan 7, 2022

cmacdonnacha commented May 12, 2022

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

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

Comments

thekevinbrown commented Mar 2, 2021

swiftone commented Mar 2, 2021

thekevinbrown commented Mar 3, 2021

swiftone commented Mar 3, 2021

swiftone commented Mar 3, 2021 • edited Loading

thekevinbrown commented Mar 3, 2021

rschristian commented Mar 4, 2021

swiftone commented Mar 4, 2021

shuowu commented Jul 15, 2021

cmacdonnacha commented Oct 13, 2021 • edited Loading

shuowu commented Oct 13, 2021 • edited Loading

cmacdonnacha commented Oct 13, 2021

chillitom commented Nov 23, 2021

ChuckJonas commented Jan 7, 2022

cmacdonnacha commented May 12, 2022

swiftone commented Mar 3, 2021 •

edited

Loading

cmacdonnacha commented Oct 13, 2021 •

edited

Loading

shuowu commented Oct 13, 2021 •

edited

Loading