Using aws-jwt-verify in nuxt project gives error
RaminderPaulSingh opened this issue · 8 comments
Description:
Error in nuxt project when aws-jwt-verify module is used.
Create a Nuxt project using the command npm init nuxt-app nuxt-sample.
Some times it is observed that the project creation process may hang at the step of extracting the rxjs package. However, waiting for approximately 5-7 minutes allows the project creation to proceed successfully.
Steps to Reproduce the issue:
Create a Nuxt project using the following command:
npm init nuxt-app nuxt-sample
During the project creation process, select the following options:
a) Programming language: JavaScript
b) Package manager: npm
c) UI framework: None
d) Template engine: HTML
e) Do not select any Nuxt.js modules.
f) Linting tools: None
g) Testing framework: Jest
h) Rendering mode: Universal (SSR / SSG)
i) Deployment target: Server (Node.js hosting)
j) Development tools: jsconfig.json (Recommended for VS Code if you're not using TypeScript)
k) Continuous integration: None
l) Version control system: Git
Once the project is created, navigate to the project folder by running the command:
cd nuxt-sample
Install the aws-jwt-verify package by executing the following command:
npm install aws-jwt-verify
Open the file pages/index.vue.
Insert the provided code snippet between the <script></script> tags.
Build using npm run build
Following error occurs:_
ERROR in ./node_modules/aws-jwt-verify/dist/esm/jwt-rsa.js 316:63
Module parse failed: Unexpected token (316:63)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
| static create(verifyProperties, additionalProperties) {
return new this(verifyProperties, additionalProperties?.jwksCache);
| }
| }
@ ./node_modules/aws-jwt-verify/dist/esm/index.js 3:0-46 3:0-46
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue?vue&type=script&lang=js&
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
ERROR in ./node_modules/aws-jwt-verify/dist/esm/cognito-verifier.js 83:63
Module parse failed: Unexpected token (83:63)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
| static create(verifyProperties, additionalProperties) {
return new this(verifyProperties, additionalProperties?.jwksCache);
| }
| /**
@ ./node_modules/aws-jwt-verify/dist/esm/index.js 4:0-59 4:0-59
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nuxt-sample@1.0.0 build: nuxt build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nuxt-sample@1.0.0 build script.
The reason is the use of the optional chaining operator (.?) which has long been supported and it is surprising that it does not work out of the box in Nuxt yet. It looks like Webpacks fault in this case.
Afraid this isn't an issue in this library here but in your tool stack, I had a quick stab at fixing it by tweaking nuxt.config.js (thanks, your steps to reproduce are flawless) but came out empty handed. If you're lucky @hakanson may have an idea.
I have created an issue with nuxt github reppository. I will update this thread after reply from nuxt team
Thanks
Link to ticket created with nuxt repository:-nuxt/nuxt#20874
@ottokruse I got suggestion from nuxt team (nuxt/nuxt#20874). As per suggestion I added aws-jwt-verify to build.transpile
In file nuxt.config.js made below changes:-
build: {
transpile: [
"aws-jwt-verify"
]
}
After making this change I got following error:-
ERROR in ./node_modules/aws-jwt-verify/dist/esm/jwt-rsa.js
Module not found: Error: Can't resolve '#node-web-compat' in 'C:\Users\Lenovo\Documents\fare_nexus\nexus-sandbox\frontend\node_modules\aws-jwt-verify\dist\esm'
@ ./node_modules/aws-jwt-verify/dist/esm/jwt-rsa.js 3:487-531 35:545-558 36:135-148 36:1204-1217 46:10-23 122:171-184 122:306-319
@ ./node_modules/aws-jwt-verify/dist/esm/index.js
@ ./middleware/auth.js
@ ./.nuxt/middleware.js
@ ./.nuxt/client.js
@ multi ./.nuxt/client.js
In ticket #69, one of the suggestion was to "aws-jwt-verify": "^2.1.3" to fix the issue related to "Error: Can't resolve '#node-web-compat' . I used version "^2.1.3" and it works!
But can we get this error fixed for version 3.0.0
Thanks
PS:- In Nuxt project aws-jwt-verify works if we add aws-jwt-verify to build.transpile in nuxt.config.js and use "aws-jwt-verify": "^2.1.3"
That error is also a bug in your toolchain I'm afraid.
This lib here uses subpath imports (aka private imports) from v3 onwards, that's why it uses the indirection of importing '#node-web-compat' (to support both NodeJS and Web)
NodeJS has long supported that too, but toolchains are still catching up. I know webpack and esbuild support it, but eg rollup needs a bit of configuration help. Looks like Nuxt needs that too.
Usually tools have a "resolve" config option, where you can manually specify how to resolve imports should the tool not be able to resolve the import itself. That could be a solution for you here too.
Any luck?
I am using below configs:-
build: {
transpile: [
"aws-jwt-verify"
]
}
and also I am using
"aws-jwt-verify": "^2.1.3"
With these changes aws-jwt-verify" is working.
thanks