I install next-video plugin for showing videos in my website.
After that, most of the time site have full reload instead Fast Refresh.
I change my next.config.js for running this plugin.
/** #type {import('next').NextConfig} */
const withVideos = require('next-videos')
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
module.exports = withVideos(nextConfig)
this is plugin link in npmjs
https://www.npmjs.com/package/next-videos
This is the error
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
applyHandler#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:970:31
internalApply/results<#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:616:21
internalApply#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:615:54
hotCheck/</</</<#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:585:26
waitForBlockingPromises#http://localhost:3000/_next/static/chunks/webpack.js?ts=1666709630281:539:48
how can i solve this problem?
Related
I am using Unsplash images in my Nextjs App. Images are loaded and showing in the app but I am getting these errors and warnings. The way I am using images I just copy the image address from Unsplash and paste the URL in the src attribute.
Here is the next.config.js file:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
distDir: "build",
images: {
domains: ["images.unsplash.com", "cdn.pixabay.com", "images.pexel.com"],
},
};
module.exports = nextConfig;
Console error:
Network Tab error:
Note: I have also edited the next.config.js file.
Viewing a photo on Unsplash shows a URL of the format https://unsplash.com/photos/{id}.
Update your next.config.js to use the domain source.unsplash.com instead of images.unsplash.com, and then use http://source.unsplash.com/{id} in your src attribute. The image should then render as expected.
I'm getting this error in my log when I try to deploy on vercel
Found next.config.js:
/**
* #type {import('next').NextConfig}
*/
const nextConfig = {
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: [{ loader: '#svgr/webpack', options: { icon: true } }],
})
return config
}
}
module.exports = nextConfig
Error: No serverless pages were built. Learn More: https://err.sh/vercel/vercel/now-next-no-serverless-pages-built
I've tried deleting the node modules but that does not seem to work
Please help!
Navigate to settings of your project in Vercel dashboard
https://vercel.com/[username]/[project]/settings
Follow this process to fix:
Scroll down to Node.js Version of Search for Node.js Version on the page
Select a newer version, probably 16x or 18x and not 14x
Click the 'SAVE' button
Navigate back to Deployments https://vercel.com/[username]/[project]/deployments
Click the hamburger menu (three dots) in your most recent commit
Then click the 'REDEPLOY' button and make sure not to select the cache option
App should build successfully now
So I am trying to display images with next/image's component. However, the images are not being displayed. I believe this is because of a 400 bad request error next/image is giving me.
When I click on that URL, it says "The requested resource isn't a valid image" which is strange because after retrieving the image url from the backend, I AM able to download the image to see that it is a valid image, so this error is happening right after the image link is passed in the props of the component. Basically, my requests are correct, but next/image's interaction with the image url is being messed up. What's weird is that I also did not have this error a few days ago, and after not changing anything, I'm seeing this error.
I've configured the next.js config file like this, and the request to the backend does retrieve a downloadable image (next/image is just not displaying it correctly).
Here is my config file for next.js:
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const nextConfig = {
images: {
domains: [
'url.s3.amazonaws.com',
'url.s3.amazonaws.com',
'url.s3.amazonaws.com',
],
},
};
module.exports = withPlugins([[withImages]], nextConfig);
I'm late for the topic, but hope my answer will help someone else.
Adding the domain's config into the next.config.js is not enough (only work for local):
module.exports = {
...
images: {
domains: ['firebasestorage.googleapis.com'],
}
}
For production, you need to make sure that your "next" instance grabs that config.
So in my case, what I did to make it work is:
Before
const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir
}
});
After
const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir,
images: {
domains: ['firebasestorage.googleapis.com'],
}
}
});
This issue is due to next.js version 11. The issue has been fixed with the next#11.0.2-canary.4 version. You can update the version. The problem will be solved.
Using loader function solves the issue. Don't know why. But updating the version is the best option.
<Image
loader={()=>user.coverImage}
src={user.coverImage}
alt="user cover image"
layout="fill"
objectFit="cover"
/>
Did you update your nextjs version ?
it seems 10.1.X and newer have some problems...
https://github.com/vercel/next.js/issues/23523
I had to add a domain name including www prefix into next.config.js. E.g. both googlapis.com and www.googleapis.com.
I imported the image first.
import product_1 from '../public/src/assets/images/ecommerce/product_img_01.jpg'
and then imported
import Image from 'next/image'
and used it as so.
<Image src={product_1} />
and everything worked fine in next version 12.3.1
Run in console at proyect route: rm -rf .next/
Then run the server again and try
I’m implementing the Next.js Image component in my Headless project. The CMS that I’m using is WordPress. And since the image is coming from an external website, I need to specify the domain on next.config.js, as the documentation specifies:
https://nextjs.org/docs/basic-features/image-optimization
const nextConfig = {
image: {
domains: ['https://example.com'],
},
}
But in my next.config.js file I’ve already have this configuration:
const withStyles = require('#webdeb/next-styles');
module.exports = withStyles({
sass: true,
modules: true,
});
So my struggle is to combine this two on the config file.
Just for some context, without the image configuration, I have this error:
Error: Invalid src prop on next/image, hostname is not configured under images in your next.config.js
I've tried putting it together like the code bellow with the use of next-compose-plugins, but the error keeps showing:
const withStyles = require('#webdeb/next-styles');
const withPlugins = require('next-compose-plugins');
const nextConfig = {
image: {
domains: ['https://example.com'],
},
}
module.exports = withPlugins([
[withStyles({
sass: true,
modules: true,
})]
], nextConfig);
Without the nextConfig at the end of the module.exports, the code works without a problem.
A detail on the URL that I need to pass is that it's a subdomain and an homolog environment, but it doesn't need credentials to be accessed. I don't think it's the issue, tho.
Since I'm new with the Next.js, I just can't figure out how this configuration needs to work.
Your config object should be passed to the last plugin call. So in your case it would look like the following:
const withStyles = require('#webdeb/next-styles');
module.exports = withStyles({
sass: true,
modules: true,
images: {
domains: ['https://example.com'],
}
});
Also note that the correct entry for the next/image configuration is images and not image. Which is why it's probably not working when you tried with next-compose-plugins, as everything else seems to be correct in that code snippet.
For anyone whose above methods doesn't work, please remove the https:// or http:// in next.config.js;
module.exports = {
reactStrictMode: true,
images: {
domains: ['https://your-domain.com'], //make it 'your-domain.com'
},
};
Getting this error when using monaco editor with next js.
Have anyone resolved this?
Failed to compile
./node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.js```
Add this webpack config fixed it for me
const withCSS = require('#zeit/next-css');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = withCSS({
webpack(config, options) {
config.plugins.push(new MonacoWebpackPlugin());
return config;
},
cssLoaderOptions: { url: false }
})
#monaco-editor/react third party helper
I'm not sure why it works, I would rather avoid third party stuff, but this is he first thing I got to work, they just package it so nicely, so here it is:
https://www.npmjs.com/package/#monaco-editor/react
https://github.com/suren-atoyan/monaco-react
you can get rid of MonacoWebpackPlugin when using that.
Key dependencies I tested with:
"dependencies": {
"#monaco-editor/react": "4.2.1",
"next": "11.0.1",
"monaco-editor": "0.26.1",
Then usage is as described on README. They expose a Editor component helper, but you can also get a monaco instance if you want.
Related:
https://dev.to/swyx/how-to-add-monaco-editor-to-a-next-js-app-ha3
https://github.com/react-monaco-editor/react-monaco-editor/issues/271
https://github.com/resourcesco/snippets/blob/master/docs/monaco-editor-with-next.md
https://github.com/react-monaco-editor/react-monaco-editor/issues/334
https://github.com/ritz078/transform/issues/282