Hi, I'm trying to add frontend api in Next 12: I'm...
# generalw
weboux
02/12/2023, 12:34 PMHi, I'm trying to add frontend api in Next 12: I'm doing like in: https://supertokens.com/docs/thirdpartyemailpassword/nextjs/init but I have:
> [PWA] Build in develop mode, cache and precache are mostly disabled. This means offline support is disabled, but you can continue developing other functions in service worker.
wait - compiling /_error (client and server)...
error - ../../node_modules/supertokens-auth-react/lib/build/authRecipe-shared.js:4:0
Module not found: Can't resolve 'react/jsx-runtime'
Import trace for requested module:
../../node_modules/supertokens-auth-react/lib/build/thirdpartyemailpassword.js
../../node_modules/supertokens-auth-react/recipe/thirdpartyemailpassword/index.js
./config/superTokens.tsx
./pages/_app.tsx
https://nextjs.org/docs/messages/module-not-found
I use next-pwa and when I moved if (typeof window !== 'undefined') {
SuperTokensReact.init(frontendConfig())
} to next.config.js
/** @type {import("next").NextConfig} */
const withPWA = require('next-pwa');
module.exports = withPWA({
reactStrictMode: true,
i18n: {
locales: ['en', 'jp', 'pl'],
defaultLocale: 'en',
},
images: {
deviceSizes: [280, 320, 375, 425, 768, 1024, 1200, 1440, 2560],
loader: 'default',
domains: ['s.yimg.com', 'localhost', 'pfartists.xyz'],
formats: ['image/avif', 'image/webp'],
},
pwa: {
dest: 'public',
register: true,
skipWaiting: true,
},
});
What is reason? 🤔
r
rp_st
02/12/2023, 12:38 PMSeems like a react module was not found. Have you installed dependencies correctly?
w
weboux
02/12/2023, 12:39 PMYes, I copied from your documentions in nextjs section
r
rp_st
02/12/2023, 12:40 PMHave you setup the NextJS app correctly?
rp_st
02/12/2023, 12:40 PMAlso, you need to run yarn add supertokens-web-js as well
w
weboux
02/12/2023, 12:41 PMboth yes
r
rp_st
02/12/2023, 12:42 PMMaybe @porcellus can help out
w
weboux
02/12/2023, 12:42 PMok :)
weboux
02/12/2023, 12:47 PM@rp_st aa and I forgot:
To verify session in next (frontend) when I have backend in nestjs, I need to use: https://supertokens.com/docs/thirdpartyemailpassword/nextjs/session-verification/in-ssr , yes?
r
rp_st
02/12/2023, 12:47 PMYes
w
weboux
02/12/2023, 12:49 PMonly I need change backendConfig to frontendConfig?
r
rp_st
02/12/2023, 12:49 PMPlease see the guide. Thanks
w
weboux
02/12/2023, 12:50 PMOk. I were making sure.
p
porcellus
02/12/2023, 1:49 PMhi
porcellus
02/12/2023, 1:49 PMare you using react in next?
porcellus
02/12/2023, 1:52 PMumm, I mean, do you have react installed? which version?
w
weboux
02/12/2023, 1:54 PMI use Nextjs 12 so React too.
weboux
02/12/2023, 1:54 PMhmm
weboux
02/12/2023, 1:55 PMReact: 17.0.2
weboux
02/12/2023, 1:55 PMNextjs: 12.1.4
weboux
02/12/2023, 2:23 PM@porcellus ? :)
p
porcellus
02/12/2023, 2:24 PMcan you try re-installing your dependencies? are you using pnpm or yarn link in your setup?
w
weboux
02/12/2023, 2:24 PMok
weboux
02/12/2023, 2:27 PMthe same error :/
weboux
02/12/2023, 2:27 PMerror - ../../node_modules/supertokens-auth-react/lib/build/authRecipe-shared.js:4:0
Module not found: Can't resolve 'react/jsx-runtime'
Import trace for requested module:
../../node_modules/supertokens-auth-react/lib/build/thirdpartyemailpassword.js
../../node_modules/supertokens-auth-react/recipe/thirdpartyemailpassword/index.js
./config/superTokens.tsx
./pages/_app.tsx
https://nextjs.org/docs/messages/module-not-found
p
porcellus
02/12/2023, 2:29 PMare you using pnpm or yarn link in your setup? or just plain npm?
w
weboux
02/12/2023, 2:30 PMyarn
p
porcellus
02/12/2023, 2:30 PMalso, did you clear the lockfiles and node_modules before re-installing?
w
weboux
02/12/2023, 2:30 PMDo you mean what did I delete yarn.lock?
p
porcellus
02/12/2023, 2:31 PMyeah.
w
weboux
02/12/2023, 2:31 PMno
weboux
02/12/2023, 2:31 PMI try again with this
p
porcellus
02/12/2023, 2:32 PMalso, does your app run without supertokens-auth-react?
w
weboux
02/12/2023, 2:34 PMdependences are installed and don't help
weboux
02/12/2023, 2:36 PM? I'm doing as in documentation. I don't add sign in and sign up.
weboux
02/12/2023, 2:36 PMI only did installation.
p
porcellus
02/12/2023, 2:37 PMso you are not importing anything in the app?
w
weboux
02/12/2023, 2:37 PMyes
p
porcellus
02/12/2023, 2:37 PMI mean the import trace you pasted here shows that you do.
porcellus
02/12/2023, 2:40 PManyway, I have to leave now for a bit, I'll investigate this after I get back.
also, I'm not sure this issue is related to supertokens, please confirm that the app works right/loads if you are not adding our SDK
w
weboux
02/12/2023, 2:47 PMVs code is stupid xd this module wasn't installed but for the first time, it did not show me an error when importing.xd
weboux
02/12/2023, 2:47 PMbut
weboux
02/12/2023, 2:48 PMI have now:
weboux
02/12/2023, 2:48 PMxd
weboux
02/12/2023, 2:49 PMMaybe I need config to next.config.js
weboux
02/12/2023, 2:50 PMThis is the only thing I can think of right now.
And frontend was working earlier. I'm changing from Firebase to SuperTokens.
p
porcellus
02/12/2023, 3:06 PMto be honest I'm not sure what causes this error besides what it says in the error message.
porcellus
02/12/2023, 3:06 PMI'm fairly sure that this doesn't have anything to do with supertokens though.
r
rp_st
02/12/2023, 3:07 PMThanks for your help @porcellus. This error doesn’t seem to be from supertokens.
rp_st
02/12/2023, 3:08 PM@weboux please try and figure this out on your own.
w
weboux
02/12/2023, 3:40 PMI guess I have to use like for React and not Nexta 🤔 maybe then it will go. Just a shame because it won't use nexta's backend functions and I wanted to learn that xd probably won't work out
If not, and vs code error, and probably wasn't this talking :/
2 Views