I'm making an app in next js that requires payments with stripe. When I define stripe like so, It says cannot find name 'Stripe'.
export const stripe:any = Stripe('stripe public key')
I know why this error comes up, because I am importing the stripe js code in my app.jsx file like so.
<script src='https://www.js.stripe.com/v3/'></script>
Despite the error the stripe checkout works just fine, but I can't deploy my code by running npm run build with the error. Any ideas?
Related
I faced a problem while creating static pages in Next JS with GraphQL requsts using fetch.
I've created page where I render over 100 list of data and also created static dynamic pages for those items using generateStaticParams function provided by Next.
Local build was done without any issues but when I deployed it to vercel, build crashed.
I am wondering if the problem is somewhere in WordPress.
To check it I replaced those static pages with https://jsonplaceholder.typicode.com/ - free fake API.
And with that API everything works fine.
Error that appeared during vbercel build:
I would be grateful if someone could help me with this.
Thanks :)
I tried different API to check if this error will also happen, but everything worked fine.
My operating system: Windows 11
Node version: 18.12
Next version: 13.1.6
The issue appears to be with using fetch in Server Components.
You can either use axios OR inside next.config.js set:
module.exports = {
experimental: {
enableUndici: true
}
}
We are integrating azure media service video player in our app using vue 3. Unable to play the video file when we integrate with in vue js. Same code is working when we we go with html. Any one can help me to fix this issue.
I have integrated below code
index.html
Compile the code using npm run serve getting below error
error amp is not defined no-undef
I have a Nextjs app.
I fetch data from a headless CMS to populate the 404 error page.
If I don't get a reasonable response from the CMS I'd like to throw a 500 error.
Is this possible from getStaticProps?
Just throw the error, NextJS will take care of generating the 500 for you.
❌ Don't add a try {} catch(){} in getStaticProps.
✅ Do this:
export async function getServerSideProps() {
throw new TypeError("Ops, CMS didn't return a reasonable response.");
}
BE AWARE: The error component is only used in production.
In development you’ll get an error with the call stack to know where the error originated from.
If you want to see what happens before deploying to production you can run the following command on your local env:
yarn build && NODE_ENV=production yarn start
⚠️ Re-run this command every-time you update the code otherwise you won't see any change.
See https://nextjs.org/docs/advanced-features/custom-error-page#more-advanced-error-page-customizing
In a Next.JS app, you see that the code for a component runs on both the Server and the Client.
So if you have the following code:
const Title = () => {
console.log('--> Hello')
return (<h1>Some title</h1>)
}
and you run this in a dev environment (npm run dev), you will see the console.log statement print to both the Server in the terminal as well as the Browser's console.
So firstly, what is happening here? How come all the code on the page gets run in both places on every page load?
Wouldn't Next.JS just sent a pre-transpiled HTML file to the Browser? How come that console.log statement is getting run in the Server even though we're not in getServerSideProps or something similar?
Now, this may be a core feature of React that I've overlooked, so please tell me if it's just that manifesting in Next.JS
Wouldn't Next.JS just sent a pre-transpiled HTML file to the Browser?
Yes, this is correct. But to transpile it to html it first needs to run your app and render it with ReactDOMServer.renderToString method.
So it is not specifically Next.js feature, but just a React SSR thing, every similar framework would do the same thing.
I am trying to deploy nuxtjs app as cloud function on Firebase following this tutorial. I am able to deploy everything (functions and hosting). However, when I try to open the page browser displays Error: could not handle the request.
In the function logs I see the following error: FATAL Cannot resolve "~/graphql/index.js" from "/workspace/graphql/index.js".
The path that fails to be resolved is specified in nuxt.config.js in serverMiddleware:
serverMiddleware: [{ path: '/graphql', handler: '~/graphql/index.js' }],
I tried using ./ instead of ~/ but it changes nothing. I also tried this approach, but it also makes no change, same error is thrown. Obviously dev server runs correctly.
Although the middleware is a graphql one I don't think it's a graphql problem, so no graphql tag at the moment.
Does anyone know how to set up a nuxt server middleware so that Firebase can resolve it?