Clean install of Strapi/Next.js starter throws errors on preview mode - next.js

I am running a clean install of the strapi-starter-next-corporate starter app. When I try to access a preview of the unpublished "secret" page, I get this error:
[develop:frontend] error - ReferenceError: locale is not defined
[develop:frontend] at preview (C:\Users\username\Projects\projectname\frontend\.next\server\pages\api
\preview.js:36:5)
[develop:frontend] at Object.apiResolver (C:\Users\username\Projects\projectname\frontend\node_module
s\next\dist\server\api-utils.js:101:15)
[develop:frontend] at runMicrotasks (<anonymous>)
[develop:frontend] at processTicksAndRejections (internal/process/task_queues.js:95:5)
[develop:frontend] at async DevServer.handleApiRequest (C:\Users\username\Projects\projectname\fronte
nd\node_modules\next\dist\server\next-server.js:775:9)
[develop:frontend] at async Object.fn (C:\Users\username\Projects\projectname\frontend\node_modules\n
ext\dist\server\next-server.js:666:37)
[develop:frontend] at async Router.execute (C:\Users\username\Projects\projectname\frontend\node_modu
les\next\dist\server\router.js:205:32)
[develop:frontend] at async DevServer.run (C:\Users\username\Projects\projectname\frontend\node_modul
es\next\dist\server\next-server.js:846:29)
[develop:frontend] at async DevServer.run (C:\Users\username\Projects\projectname\frontend\node_modul
es\next\dist\server\dev\next-dev-server.js:355:20)
[develop:frontend] at async DevServer.handleRequest (C:\Users\username\Projects\projectname\frontend\
node_modules\next\dist\server\next-server.js:292:20) {
[develop:frontend] page: '/api/preview'
[develop:frontend] }
[develop:backend ] [2022-02-09 09:48:13.162] http: POST /graphql (9 ms) 400
[develop:frontend] TypeError: Cannot read property 'global' of undefined
[develop:frontend] at getGlobalData (C:\Users\username\Projects\projectname\frontend\.next\server\pag
es\_app.js:628:22)
[develop:frontend] at runMicrotasks (<anonymous>)
[develop:frontend] at processTicksAndRejections (internal/process/task_queues.js:95:5)
[develop:frontend] at async Function.MyApp.getInitialProps (C:\Users\username\Projects\projectname\fr
ontend\.next\server\pages\_app.js:249:24)
[develop:frontend] at async Object.loadGetInitialProps (C:\Users\username\Projects\projectname\fronte
nd\node_modules\next\dist\shared\lib\utils.js:69:19)
[develop:frontend] at async Object.renderToHTML (C:\Users\username\Projects\projectname\frontend\node
_modules\next\dist\server\render.js:314:17)
[develop:frontend] at async doRender (C:\Users\username\Projects\projectname\frontend\node_modules\ne
xt\dist\server\next-server.js:1149:38)
[develop:frontend] at async C:\Users\username\Projects\projectname\frontend\node_modules\next\dist\se
rver\next-server.js:1241:28
[develop:frontend] at async C:\Users\username\Projects\projectname\frontend\node_modules\next\dist\se
rver\response-cache.js:64:36
My preview url:
http://localhost:3000/api/preview?secret=xxxxxxxxxxxxxxxxx&slug=secret
I also tried:
http://localhost:3000/api/preview?secret=xxxxxxxxxxxxxxxxx&slug=/secret
My .env file for my next app:
NEXT_PUBLIC_STRAPI_API_URL=http://localhost:1337
PREVIEW_SECRET=xxxxxxxxxxxxxxxxx
My .env file for my strapi app:
FRONTEND_URL=http://localhost:3000
FRONTEND_PREVIEW_SECRET=xxxxxxxxxxxxxxxxx
The I18 plugin and the preview code seem not to be totally integrated. Has anyone else encountered this?
Windows 11
Node.js v14.18.3

I think that you found a bug. The reason is that strapi-starter-next-corporate uses locale inside API route /frontend/pages/api/preview.js. Next.js does not support locale inside API route. You can read more about it here.

Related

vercel nextjs deployment build error: How to debug?

I'm a beginner deploying a basic nextjs app with vercel.
This error is occurring in the node_modules files, not in any code that I have written.
How should I go about debugging this?
TypeError: Cannot read properties of undefined (reading 'page')
at /vercel/path0/node_modules/next/dist/export/index.js:223:40
at Array.filter (<anonymous>)
at /vercel/path0/node_modules/next/dist/export/index.js:222:43
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1168:21
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async /vercel/path0/node_modules/next/dist/build/index.js:1044:17
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:65:29)```

"Request is not available" on apollo graphql query to withApiAuthRequired endpoint

I'm fairly new to graphql/apollo setup, and am stuck on the following issue:
My setup looks like this roughly:
Resolvers:
export const resolvers: Resolvers = {
Query: {
getUser: withApiAuthRequired(getUser)
}
};
async function getUser(req: any, res: any) {
try {
const { accessToken } = await getAccessToken(req, res);
console.log(accessToken);
} catch (error) {
console.error(error);
res.status(error.status || 500).end(error.message);
}
}
Client caller:
const data = await client.query({
query: gql`
query UsersQuery {
getUser
}
`
});
console.log(data);
The error I get:
Uncaught (in promise) Error: Request is not available
at new ApolloError (index.js?f0e4:29:1)
at eval (QueryManager.js?2692:596:1)
at both (asyncMap.js?bd9c:16:46)
at eval (asyncMap.js?bd9c:9:57)
at new Promise (<anonymous>)
at Object.then (asyncMap.js?bd9c:9:1)
at Object.eval [as next] (asyncMap.js?bd9c:17:1)
at notifySubscription (module.js?9653:132:1)
at onNotify (module.js?9653:176:1)
at SubscriptionObserver.next (module.js?9653:225:1)
at eval (iteration.js?aad9:4:50)
at Array.forEach (<anonymous>)
at iterateObserversSafely (iteration.js?aad9:4:1)
at Object.next (Concast.js?eb39:25:43)
at notifySubscription (module.js?9653:132:1)
at onNotify (module.js?9653:176:1)
at SubscriptionObserver.next (module.js?9653:225:1)
at eval (createHttpLink.js?2d67:103:1)
Thank you so much for the guidance!
try this one:
const data = await client.query({
query: gql `
query {
getUser
}
`
});
console.log(data);
I believe the issue is that I was trying to use withApiAuthRequired inside Resolvers. The argument to Resolvers needs to be an unwrapped function to work. I ended up just skipping the withApiAuthRequired wrapper and using getSession instead.

Deploying next-auth app to Vercel creates error in credentials provider

I am trying to deploy my next app to vercel. I am using next-auth for authentication with credentials and an api that returns a JWT. On localhost it works ok, but when I put it on vercel, and try to login, nothing happens. However when I view the logs in the project's dashboard functions, there's an error:
[POST] /api/auth/callback/credentials
03:32:18:58
2021-12-21T00:32:19.071Z 410db3c3-d841-45d1-8df2-0cdbb4aa8793 ERROR TypeError: "ikm"" must be an instance of Uint8Array or a string
at normalizeUint8Array (/var/task/node_modules/#panva/hkdf/dist/node/cjs/index.js:20:15)
at normalizeIkm (/var/task/node_modules/#panva/hkdf/dist/node/cjs/index.js:24:17)
at hkdf (/var/task/node_modules/#panva/hkdf/dist/node/cjs/index.js:47:60)
at getDerivedEncryptionKey (/var/task/node_modules/next-auth/jwt/index.js:99:34)
at Object.encode (/var/task/node_modules/next-auth/jwt/index.js:45:34)
at Object.callback (/var/task/node_modules/next-auth/core/routes/callback.js:457:37)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:197:28)
at async NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:40:7)
at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils.js:101:9)
2021-12-21T00:32:19.071Z 410db3c3-d841-45d1-8df2-0cdbb4aa8793 ERROR TypeError: "ikm"" must be an instance of Uint8Array or a string
at normalizeUint8Array (/var/task/node_modules/#panva/hkdf/dist/node/cjs/index.js:20:15)
at normalizeIkm (/var/task/node_modules/#panva/hkdf/dist/node/cjs/index.js:24:17)
at hkdf (/var/task/node_modules/#panva/hkdf/dist/node/cjs/index.js:47:60)
at getDerivedEncryptionKey (/var/task/node_modules/next-auth/jwt/index.js:99:34)
at Object.encode (/var/task/node_modules/next-auth/jwt/index.js:45:34)
at Object.callback (/var/task/node_modules/next-auth/core/routes/callback.js:457:37)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:197:28)
at async NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:40:7)
at async Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils.js:101:9)
RequestId: 410db3c3-d841-45d1-8df2-0cdbb4aa8793 Error: Runtime exited with error: exit status 1
Runtime.ExitError
Additional info:
The SignIn() function looks like this:
signIn("credentials", {
email: values.name,
password: values.password,
redirect: false,
callbackUrl: `/app`
})
.then((data) => console.log("loginpagethen", data))
.catch((error) => console.log("loginpagecatch", error));
I think the problem occurs somewhere in the jwt callback function because authorize returns a user(with all the data, including jwt from server). Also if I console.log the user in the jwt callback function,I can actually see the user object. However the session isn't present.
async jwt({ token, user, account, profile, isNewUser }) {
if (user) {
console.log("user", user); //user is there
token.accessToken = user.token;
}
return token;
},
async session(session, token) {
console.log("session", session); //session is not there
return session;
},
};
P.S. I have added environment variables.
Any idea on how I can get my app to behave on vercel?
in your .env file creates an environment variable:
API_SECRET_KEY=q3t6w9z$C&F)asdfasdfasfasdfasdfasd1sdfasf

firebase admin sdk authentication fails locally with getaddrinfo ENOTFOUND

Having a local developed cloud function and started it locally via:
firebase emulators:start
The cloud function is here:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp({
credential: admin.credential.applicationDefault(),
databaseURL:"https://test1-xxx.firebaseio.com",
});
I get:
FirebaseAppError: Credential implementation provided to initializeApp() via the "credential" property failed to fetch a valid Google OAuth2 access token with the following error: "Error fetching access token: Error while making request: getaddrinfo ENOTFOUND metadata.google.internal. Error code: ENOTFOUND".
at FirebaseAppError.FirebaseError [as constructor] (/Users/dgang/study/test/functions/node_modules/firebase-admin/lib/utils/error.js:42:28)
at FirebaseAppError.PrefixedFirebaseError [as constructor] (/Users/dgang/study/test/functions/node_modules/firebase-admin/lib/utils/error.js:88:28)
at new FirebaseAppError (/Users/dgang/study/test/functions/node_modules/firebase-admin/lib/utils/error.js:122:28)
at /Users/dgang/study/test/functions/node_modules/firebase-admin/lib/firebase-app.js:121:23
at processTicksAndRejections (internal/process/task_queues.js:89:5) { errorInfo: {
code: 'app/invalid-credential',
message: 'Credential implementation provided to initializeApp() via ' +
'the "credential" property failed to fetch a valid Google ' +
'OAuth2 access token with the following error: "Error ' +
'fetching access token: Error while making request: ' +
'getaddrinfo ENOTFOUND metadata.google.internal. Error ' +
'code: ENOTFOUND".' }, codePrefix: 'app' }
I defined GOOGLE_APPLICATION_CREDENTIALS as needed but this does not help.
I tried to google the issue but without avail.
What needs to be fixed here?
Update:
When i require the service account explicitely it works:
var serviceAccount = require("service-account.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL:"https://test1-xxx.firebaseio.com",
});
but this is a dangerous option

firebase clearAllNotifications() not working in ionic 3

I need to remove old notification form status bar in ionic 3.
I have used firebase plugin( "#ionic-native/firebase": "^4.20.0" and "cordova-plugin-firebase": "2.0.5"). Here is app.component.ts file
import { Firebase } from '#ionic-native/firebase';
constructor(private platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen,
public firebase: Firebase) {
platform.ready().then(() => {
this.firebase.clearAllNotifications().then(clearData => {
console.log('removed all notification');
}).catch(err => {
console.log('error in removing notification');
});
});
}
and gives error something like
ERROR: Unhandled Promise rejection: undefined is not an object (evaluating 'this.fcm.clearAllNotifications().then') ; Zone: <root> ; Task: setTimeout ; Value: TypeError: undefined is not an object (evaluating 'this.fcm.clearAllNotifications().then')
how can I achieve this functionality, can anyone please help me.
Thank you.
#ionic-native/firebase": "^4.20.0"
has no method available called clearAllNotifications() you have to download the latest version or need to add manually here

Resources