Vue v3 + Vite + Okta. [vite] Dep optimization failed with erro

[mgagna]

Describe the bug

When trying to run the site in dev using npm run dev, vite throws this error:
[vite] Optimizable dependencies detected:
@okta/okta-auth-js, @okta/okta-signin-widget, @okta/okta-vue, vue

[vite] Dep optimization failed with error:
'toRelativeUrl' is not exported by node_modules@okta\okta-auth-js\lib\server\index.js, imported by node_modules@okta\okta-vue\bundles\okta-vue.esm.js

Reproduction

Please provide a link to a repo that can reproduce the problem you ran into.
I've tried it on an empty Vue3 project with Vite and vue-router, just adding the Okta components.
Create a project following the Vue v3 guide

• npm install -g @vue/cli
• vue upgrade --next
• npm init vite-app
• cd
• npm install

Add vue-rounter

• npm install vue-router@next --save

Add okta widget as in the basic Okta guide for Vue v3 (https://developer.okta.com/code/vue/okta_vue_sign-in_widget/)

• npm install @okta/okta-signin-widget
• npm install @okta/okta-vue

Now try to run it

• npm run dev
  And I get the error:
  [vite] Optimizable dependencies detected:
  @okta/okta-signin-widget, @okta/okta-vue, vue

[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "@okta/okta-auth-js" from "node_modules@okta\okta-vue\bundles\okta-vue.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
rollupInputOptions.external

It works if I use vue-service using npm run serve

System Info

• required vite version: "^1.0.0-rc.13"
• required Operating System: Windows 10
• required Node version: v14.15.1.
• Optional:
  • npm/yarn version: npm 6.14.8

package.json:
{
"name": "testOktaWithVite",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"@okta/okta-signin-widget": "^5.2.1",
"@okta/okta-vue": "^3.0.0",
"vue": "^3.0.4",
"vue-router": "^4.0.2"
},
"devDependencies": {
"vite": "^1.0.0-rc.13",
"@vue/compiler-sfc": "^3.0.4"
}
}

Logs (Optional if provided reproduction)

vite --debug

vite:config env mode: development +0ms
vite:config env: {} +4ms
vite:resolve (node_module entry) @okta/okta-signin-widget -> ./dist/js/okta-sign-in.entry.js +0ms
vite:optimize optimizing @okta/okta-signin-widget (no exports, likely commonjs) +0ms
vite:resolve (node_module entry) @okta/okta-vue -> bundles/okta-vue.esm.js +39ms
vite:optimize optimizing @okta/okta-vue (imports sub dependencies) +3ms
vite:resolve (node_module entry) vue -> dist/vue.runtime.esm-bundler.js +4ms
vite:optimize optimizing vue (imports sub dependencies) +4ms
vite:resolve (node_module entry) vue-router -> dist/vue-router.esm-bundler.js +4ms
vite:optimize skipping vue-router (single esm file, doesn't need optimization) +8ms
[vite] Optimizable dependencies detected:
@okta/okta-signin-widget, @okta/okta-vue, vue
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)

[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "@okta/okta-auth-js" from "node_modules@okta\okta-vue\bundles\okta-vue.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
rollupInputOptions.external
Error: [vite]: Rollup failed to resolve import "@okta/okta-auth-js" from "node_modules@okta\okta-vue\bundles\okta-vue.esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
rollupInputOptions.external
at Object.onwarn (C:\FuentesCs.io\testOktaWithVite\node_modules\vite\src\node\build\index.ts:127:13)
at Object.onwarn (C:\FuentesCs.io\testOktaWithVite\node_modules\rollup\dist\shared\rollup.js:19525:20)
at ModuleLoader.handleResolveId (C:\FuentesCs.io\testOktaWithVite\node_modules\rollup\dist\shared\rollup.js:18435:26)
at C:\FuentesCs.io\testOktaWithVite\node_modules\rollup\dist\shared\rollup.js:18402:22
at async Promise.all (index 2)
at ModuleLoader.fetchStaticDependencies (C:\FuentesCs.io\testOktaWithVite\node_modules\rollup\dist\shared\rollup.js:18400:34)
at async Promise.all (index 0)
at ModuleLoader.fetchModule (C:\FuentesCs.io\testOktaWithVite\node_modules\rollup\dist\shared\rollup.js:18377:9)
at async Promise.all (index 1) {
watchFiles: [
'C:\FuentesCs.io\testOktaWithVite\node_modules\vue\dist\vue.runtime.esm-bundler.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@VUE\runtime-dom\dist\runtime-dom.esm-bundler.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@VUE\shared\dist\shared.esm-bundler.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@VUE\runtime-core\dist\runtime-core.esm-bundler.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@VUE\reactivity\dist\reactivity.esm-bundler.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@okta\okta-vue\bundles\okta-vue.esm.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@okta\okta-signin-widget\dist\js\okta-sign-in.entry.js',
'\x00commonjsHelpers.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@babel\runtime\helpers\asyncToGenerator.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\@babel\runtime\regenerator\index.js',
'C:\FuentesCs.io\testOktaWithVite\node_modules\regenerator-runtime\runtime.js',
'\x00C:\FuentesCs.io\testOktaWithVite\node_modules\regenerator-runtime\runtime.js?commonjs-proxy'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: vite --debug
npm ERR! Exit status 1

[yyx990803]

Another lib using module field for Node.js entry :/

For now you'll have to add an alias to force @okta/okta-auth-js to resovle to @okta/okta-auth-js/dist/okta-auth-js.umd.js.

[yyx990803]

So the resolving is fixed in 409988f, however this library you are using isn't actually compatible with Vue 3... and Vite 2 currently only has Vue 3 support (@underfin is working on a Vue 2 support plugin).