Hello,
If you are facing the same error, simple steps to fix it, is to just follow the below link topic from Vercel:
Hope this helps to resolve your issue!
Happy learnings.
Tag: error
Hello,
If you are facing error :
Unhandled Runtime Error
TypeError: Failed to construct 'URL': Invalid URL
And you already have following loader ‘imgix’ settings in your next.config.js file
images: {
// loader and path setting for android build to load nextjsimage and also on web on certain scenarios!
loader: 'imgix',
path: '/', // Remove the path prefix for production images
domains: [
'xxx.com',
'*.xxx.com',
'aaa.xxx.com',
'via.placeholder.com',
],
}To fix this the solution provided here worked out well!
Code snippet solution: source page stackoverflow
const loaderProp =({ src }) => {
return src;
}
<Image
src={currentImage.imageurl}
alt={currentImage.imageurl}
layout="fill"
className={styles.imageSize}
loader={loaderProp}
/>we just need to add loader prop to the Image tag of next.js component and passdown the callback function which resolves the error above, voila!
Hope this also help you if you are facing this solution in your next.js application.
happy learning!
Hello Guys,
Facing this issue and struggling to find the cause?, okay then lets direct jump in to the fix I found or more precisely mistake I found!
In my case I was wrapped the loading on controller in web.php route with single quotes!
Line of code causing this error:
Route::get('/book-readings/upload-photos', ['App\Http\Controllers\BookReadingController::class', 'uploadPhotos']);Very carefully watch in above code code was wrapped in quotes: ‘App\Http\Controllers\BookReadingController::class’,
Controller should be loaded without single quotes;
And second important reason is it, this line should shall fall before the resource route if you have similar to this controller, in my case it was :
Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class);
// this line was defined before the above route I wanted to work! (I am not sure why this line causing to stop showing the page :/)Finally I make these changes so everything started working smoothly & all routes loading fine and up!.
// Upload Audio Files:
Route::get('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'showPhotos'])->name('book-readings.upload-photos');
Route::post('/book-readings/upload-photos', [App\Http\Controllers\BookReadingController::class, 'uploadPhotos']);
Route::delete('/book-readings/upload-photos/{id}', [App\Http\Controllers\BookReadingController::class, 'destroyPhoto']);
Route::resource('/book-readings', App\Http\Controllers\BookReadingController::class);Hope this will give you a hint to point the issue you might come up like this mostly when we are new and learning and developing new things!
Happy Learnings
Hello,
This type error mostly get in scenario when you try to sort the readyonly data array.
For me this was occoured when I tried to sort the direct result from my GraphQL query response data like below:
const sortedData = data.bhangarwalas.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);In above, data.bhangarwalas is graphql query response results which is readonly in nature as response.
To fix this issue the solution is quick fix for which I have too google to know the result!
Here is the quick solution:
const sortedData = [...data.bhangarwalas];
sortedData.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);In code above, We need to clone or you in other words, copying the “data.bhangarwalas” into new array variable and then over that variable, we need to perform sorting operation, which results us right response.
Hope this help you to solve the quick error or to know what scenario this type of error is generated.
Thanks for reading.
Happy learning!
Hello,
If you too facing this error : Module not found: Error: Can’t resolve ‘private-next-pages/’ in ‘/vercel/path0’
while deploying your NextJs project over Vercel platform, please follow what solution and mistake I was doing.
As, I tried to debug this error by right away check the the next in the log highlighted (in screenshot above) recommending to following alias rule to be set if you have touched you next.config.js file with any webpack settings.
In my case I did have to touched the next.config.js file and so I have add the same lines of code recommend in the follow link of Next.js doc
But for me still I didn’t found the right solution, because was in the naming of folder under nextjs project.
Basically, I was loading the static content into the dynamic route in Nextjs (Like example reference here).
What I have missed was the name of the folder under pages directory I have created named as “learn” it should be similar to name “posts” as created one at root level of the project to hold the “.md” or “.html” file content to pass down to dynamic route page which will be under /pages/posts/[id].js
Sharing here screenshot of the directory where the naming was a mistake
After renaming the folder name “learn” to “posts” the error went off and found my deployment working successfully.
Hope this small mistake tip help you to solve this problem.
If you have found any mistake in the post. Please don’t hesitate to hit me on my email jat@doableyo.com to rectify.
Enjoyed reading this? How about sharing with your friends or in groups, this would help!
Thanks, Happy Learning!
Hello welcome to the post!
Look for “MultiPHP Manager” in Cpanel search bar or on home page of your Cpanel after login.
It will show you your current System PHP version and below option to change the setting for PHP version as required.
From dropdown menu like on right select the version of PHP you needed and apply, before that not to forget to select the list of domains, if you have multiple websites or subdomains to apply the latest PHP version.
Hope this solves your issue to the fastest when composer dependencies gives error like below when you trying to test small issue of your website.
{ "message": "syntax error, unexpected token \")\"", "exception": "ParseError", "file": "/home4/ininszp2/abclar/vendor/symfony/css-selector/XPath/Extension/NodeExtension.php", "line": 68, "trace": [ { "file": "/home4/ininszp2/abclar/vendor/composer/ClassLoader.php", "line": 428, "function": "Composer\\Autoload\\includeFile" }, { "file": "/home4/ininszp2/abclar/vendor/symfony/css-selector/XPath/Translator.php", "line": 56, "function": "loadClass", "class": "Composer\\Autoload\\ClassLoader", "type": "->" }, { "file": "/home4/ininszp2/abclar/vendor/symfony/css-selector/CssSelectorConverter.php", "line": 40, "function": "__construct", "class": "Symfony\\Component\\CssSelector\\XPath\\Translator", "type": "->" }, { "file": "/home4/ininszp2/abclar/vendor/tijsverkoyen/css-to-inline-styles/src/CssToInlineStyles.php", "line": 19, "function": "__construct", "class": "Symfony\\Component\\CssSelector\\CssSelectorConverter", "type": "->" }, { "file": "/home4/ininszp2/abclar/vendor/laravel/framework/src/Illuminate/Mail/Markdown.php", "line": 73, "function": "__construct", "class": "TijsVerkoyen\\CssToInlineStyles\\CssToInlineStyles", "type": "->" }, { "file": "/home4/ininszp2/abclar/vendor/laravel/framework/src/Illuminate/Mail/Mailable.php", "line": 309, "function": "render", "class":Thanks for reading and Happy learning!
Okay well, this error occurred when you try to send the generated buffer data as an attachment using @sendgrid/mail service.
To tackle issue, will simply paste the previous line of code and the fix line of code so data was then send as base64 content as required with the @sendgrid/mail service
res.send(response); //previous line of response from nextjs apiafter adding the fix over same above line using Buffer
res.send(Buffer.from(response).toString('base64')); // to base64 string as an output resolve the above issueIf anyone wants to look for the entire piece of file code, here you go:
// import the necessary node libraries
const chromium = require('chrome-aws-lambda');
const puppeteer = require('puppeteer');
import { createEmailTemplate } from "../../api/functions/index";
// var Buffer = require('buffer/').Buffer // note: the trailing slash is important!
export default async (req, res) => {
// console.log({ m: req.method.toLowerCase(), body: Object.keys(req.body).length });
if (req.method.toLowerCase() !== 'post' ||
(!Object.keys(req.body).length ||
process.env.YOUR_EXTERNAL_API_SECRET !== req.body.your_api_secret)) {
res.status(403).send("Access denied");
return;
}
const { generateType, store } = req.body; // && JSON.parse(JSON.streq.body);
const templatePayload = {
...req.body,
assetsBaseURL: process.env.NEXT_PUBLIC_ASSETS_BASE_URL,
siteName: process.env.SITE_NAME,
logoPath: store?.logo,
};
// console.log({ templatePayload });
try {
// compile the file with handlebars and inject the customerName variable
const html = createEmailTemplate("my-invoice", templatePayload);
// simulate a chrome browser with puppeteer and navigate to a new page
const browser = await puppeteer.launch({
args: chromium.args,
// defaultViewport: chromium.defaultViewport,
// defaultViewport: generateType && generateType === 'pdf' ? chromium.defaultViewport : { width: 640, height: 1200 }, //chromium.defaultViewport,
executablePath: await chromium.executablePath,
headless: generateType && generateType === 'pdf' ? true : chromium.headless,
ignoreHTTPSErrors: true,
});
const page = await browser.newPage();
await page.setViewport({
width: 640,
height: page.viewport().height, // + 400,
deviceScaleFactor: 1,
});
// set our compiled html template as the pages content
// then waitUntil the network is idle to make sure the content has been loaded
await page.setContent(html, { waitUntil: 'networkidle0' });
// convert the page to pdf with the .pdf() method
let response;
if (generateType && generateType === 'pdf') {
const pdf = await page.pdf({ format: 'A4' });
response = pdf;
} else {
const screenshot = await page.screenshot({ fullPage: true });
response = screenshot;
}
await browser.close();
// // send the result to the client
res.statusCode = 200;
res.send(Buffer.from(response).toString('base64'));
// CODE BELOW WRITE RESPONSE AS HTML AND IMAGE IS DISPLAYED, TESTTED
// res.writeHead(200, { 'Content-Type': 'text/html' });
// res.write('<html><body><img src="data:image/jpeg;base64,')
// res.write(Buffer.from(response).toString('base64'));
// res.end('"/></body></html>');
} catch (err) {
console.log(err);
res.status(500).json({ message: err.message });
}
};
I hope this find useful to anyone who facing this question or challenge.
Happy learning! Enjoy!