I am very new to the nextjs and have come across the Image component issue. I also checked around and it seems that there are similar questions but none of them has the given scenario.
I am trying to load image from the remote source via Image component. The documentation saying that you should adjust your next.config.js file to allow remote images. Since I am using next 13.0.3 version I am using images.remotePatterns property. Despite this fact I am still getting an error of hostname not being configured.
Can you please suggest what I am doing wrong and how to overcome that problem?
Br,
Aleks.
next.config.js
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'swiperjs.com',
port: '',
pathname: '/demos/images/**',
}
],
},
Usage:
<Image
src="https://swiperjs.com/demos/images/nature-1.jpg"
className={styles.swiperslideimg}
alt="test" width={400} height={400}/>
Error:
Invalid src prop (https://swiperjs.com/demos/images/nature-1.jpg) on next/image, hostname "swiperjs.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
That configuration should work. Note that you have to restart the development server by rerunning yarn run dev or npm run dev for these configuration changes to take effect.
I faced the same problem and found the solution i was using
Notus NextJS
which had a slightly older version of nextjs so i ran
npm outdated
and updated the package.json and ran
npm run install:clean
Try to leave just that:
images: {
remotePatterns: [
{
hostname: 'swiperjs.com',
}
],
},
Related
Trying this for 2 days now followed all the steps mentioned in the docs but seems like it is not reading the config or something
Error Page Shown
Uncaught Error: Invalid src prop (https://images.pexels.com/photos/14397947/pexels-photo-14397947.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) on `next/image`, hostname "images.pexels.com" is not configured under images in your `next.config.js`
Component Used
<Image
src="https://images.pexels.com/photos/14397947/pexels-photo-14397947.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt={props.team.name}
width={props.width}
height={props.height}
placeholder="blur"
/>
next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.pexels.com',
port: '',
pathname: '/photos/**',
},
],
},
}
I tried many things but doesnt seem to work
npm run dev // tried restarting the server but no luck
npm run install:clean // tried clean install doesnt work
npm update // doesnt work
Any idea what i am doing wrong?
I tried different things and found the solution i was using
Notus NextJS
which had a slightly older version of nextjs so i ran
npm outdated
and updated the package.json and ran
npm run install:clean
Update 1 : Updated the latest working solution to #Jeevan Rupacha answer, please scroll below to check it out.
I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.
Parsing error: Cannot find module 'next/babel'
Require stack:
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\bundle.js
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\eslint-parser.js
D:\app\next_app\ratu-seo\node_modules\eslint-config-next\parser.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\config-array-factory.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\cli-engine.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\api.js
c:\Users\Admin.vscode\extensions\dbaeumer.vscode-eslint-2.1.23\server\out\eslintServer.js
Create file called .babelrc in your root directory and add this code:
{
"presets": ["next/babel"],
"plugins": []
}
And in .eslintrc, replace the existing code with:
{
"extends": ["next/babel","next/core-web-vitals"]
}
I had this same problem - but only when I wasn't opening the project folder directly. It appears to be related to how ESLint needs to be configured for workspaces.
In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.
TL;DR - see this answer which points to this blog. This fixed it for me.
Some Details
For example, if I have:
~
| -- some_folder
| | -- project_1
| | -- project_2
| ...files relating to both projects...
I'll often just cd ~/some_folder && code .
But then I get the same error you're experiencing. However, if I cd ~/some_folder/project_1 && code . then everything works fine.
If that's the case for you as well, then what you need (as described in the links above) is to:
Create a workspace config
Specify folders where you need ESLint to run
You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents
{
"eslint.workingDirectories": [
"./project_1",
"./project_2"
]
}
Note: You don't need to create extra .babelrc file
In your NextJS Project you have this file , named .eslintrc.json,
In this file
You have following code
{
"extends": "next/core-web-vitals"
}
Replace it with
{
"extends": ["next/babel","next/core-web-vitals"]
}
Note: If you only replace with
{
"extends": ["next/babel"]
}
The red error sign will go but the code won't compile and gives compile error.
For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.
{
"extends": ["next/core-web-vitals", "prettier"]
}
In my case, the issue occurs when I code in VSCode and use pnpm as the package manager, I tried lots of methods in StackOverflow, and finally, I find out that it's the duty of the VSCode ESLint plugin.
So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.
{
"eslint.packageManager": "pnpm"
}
Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:
{
"extends": ["next/babel", "next/core-web-vitals"]
}
then ctrl + shift + p and search for ESLint: Restart ESLint Server.
It worked for me by just adding prettier in .eslintrc file.
{
"extends": ["next", "prettier"]
}
Try updating the .eslintrc.json file to
{
"extends": ["next", "prettier","next/core-web-vitals"],
"plugins": ["prettier"]
}
Also install prettier plugin if you don't have it already
npm install eslint-plugin-prettier#latest --save-dev
Don't have to include .babelrc file as it will replace Nextjs SWC compiler
S
I had this same problem - Close the IDE and reopen it with the project folder !!
My Problem
I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.
My Solution
add this into the ESLint config file:
parserOptions: {
babelOptions: {
presets: [require.resolve('next/babel')],
},
},
You can also always try updating React and then Next. I had the same error message then updated them both and now my app is working fine.
Upgrade React version to latest
Most applications already use the latest version of React, with Next.js 11 the minimum React version has been updated to 17.0.2.
To upgrade you can run the following command:
npm install react#latest react-dom#latest
Or using yarn:
yarn add react#latest react-dom#latest
Upgrade Next.js version to latest
To upgrade you can run the following command in the terminal:
npm install next#latest
or
yarn add next#latest
Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.
Add prettier to your project
yarn add --dev eslint-config-prettier
Update your eslint config as follows
{
"extends": ["prettier", "next/core-web-vitals"]
}
Add global vscode settings and include your project path
{
"eslint.workingDirectories": ["./your-project"]
}
In my case I had to disable VSCode ESLint extension.
Unfortunately when I added ["next/babel"] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.
ctrl + shift + p
TypeScript: Restart TS server
Really, just adding prettier to "extends": ["next/core-web-vitals] to have something like ==> {"extends": ["next/core-web-vitals", "prettier"]}, gets rid of the error, without having to create an extra .babelrc file. But another research that needs to be done, is to know, if there are any downsides to doing it, and i think the answer is NO
In my project, i just run yarn add #babel/core and run
ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server
ESLint: Restart ESlint Server
it works, and npm run lint works fine too.
> Executing task: yarn run lint <
✔ No ESLint warnings or errors
In my case, the problem is that I added "eslint.packageManager": "yarn" to the setting.json of VSCode before, and I tried to use the same setup within a new project managed with pnpm. After adding "eslint.packageManager": "pnpm" for the new workspace, and reload window, than the issue's gone.
I've tried adding "extends": ["next/babel", "next/core-web-vitals", "prettier"] to .eslintrc.js, it will fix the error only within VSCode, but will cause the other error when building my Next.js app.
I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export".
But I get this Error:
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:
module.exports = {
images: {
loader: 'imgix',
path: '/images/',
},
}
I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.
I know this is probably a stupid question, but I'm stuck.
I hosted them on https://imgbb.com and wrote this in next.config.js
module.exports = {
images: {
domains: ['i.ibb.co'],
},
}
and it worked.
Usage:
<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg"
alt="ESMASA TRAVAUX"
width={1050}
height={500}
/>
I got this error when deploying Next.js to Netlify.
Error: Image Optimization using Next.js default loader is not compatible with `next export`.
Possible solutions:
6:47:15 AM: - Use `next start`, which starts the Image Optimization API.
6:47:15 AM: - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM: - Configure a third-party loader in `next.config.js`.
6:47:15 AM: - Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM: at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)
The problem does not occur when deploying to Vercel.
use akamai
setting images.loader to 'imgix' caused dev and build errors.
i used this instead:
// next.config.js
module.exports = {
images: {
loader: 'akamai',
path: '',
},
}
it just works for all i care about.
possible values for images.loader are: [ default, imgix, cloudinary, akamai, custom ]
reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders
From Next.js 12.3, you can completely disable next/image Image Optimization using the unoptimized configuration in next.config.js. This avoids having to use a third-party provider to optimize the image when using next/export.
From the next/image documentation:
unoptimized - When true, the source image will be served as-is
instead of changing quality, size, or format. Defaults to false.
module.exports = {
images: {
unoptimized: true
}
}
Before Next.js 12.3 and from 12.2, the unoptimized configuration was still experimental and could be enabled under the experimental flag.
module.exports = {
experimental: {
images: {
unoptimized: true
}
}
}
Seems you use next/images.
But next/images don't work with static pages (generated with next export)
For static pages use this image-optimizer : next-optimized-images instead
I faced the same problem when using next export command. I still receive this error:
Error: Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start to run a server, which includes the Image Optimization API.
Use any provider which supports Image Optimization (like Vercel).
Configure a third-party loader in next.config.js.
Use the loader prop for next/image.
So, to make my custom loader working correctly, I needed
to set a path to an empty string:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '',
},
}
BUT, when I open the resultant index.html file, none of the images or JS loaded.
So, for those who facing this also, please try to set the path to a / as such:
module.exports = {
// https://github.com/vercel/next.js/issues/21079
// Remove this workaround whenever the issue is fixed
images: {
loader: 'imgix',
path: '/',
},
}
This error is regarding Image/next, I was facing same error while "next build", than i use <img/> instead of <Image/> in the project and re-build it by npm run build and it resolves the error.
I am trying to deploy my app via MUP ,everything works fine except when I run command mup deploy. In browser website loads but it does not shows the latest changes I have made. Build files has all changes that I have made.I am using Amazon EC2 for server.
Edit:
In MUP logs it shows that server has started on port 80. I also checked the build file it has latest code but somehow server is not rendering in browser.I am not sure its issue of MUP Or meteor build or amazon EC2 server.
Since I'm having the exact same problem, I can clarify the question.
I'm using Mup build 1.2.8/latest on Windows 10, Meteor v1.4.4.2/latest, deploying to Ubuntu 14.04 on Digital Ocean.
Doing "mup.cmd deploy" builds the bundle, pushes it to the server, starts the app and verifies the deployment, all successfully. The meteor logs as shown by "mup.cmd logs" shows the app started successfully (other than the Kadira warning which should be fixed in the newly deployed version). Browsing to my app doesn't show any of my recent changes (they do show up when running locally). It seems as if the updated container isn't the one running. I've tried starting, stopping and removing the Docker container to no avail.
For reference, here is the mup.js file I'm using (with the names changed to protect the guilty). This file worked to deploy fine 6 weeks ago.
module.exports = {
servers: {
one: {
host: '1.2.3.4',
username: 'Ron',
pem: '/cygwin64/home/Ron/.ssh/id_rsa',
}
},
meteor: {
name: 'MyApp',
path: '../',
servers: {
one: {}
},
buildOptions: {
serverOnly: true,
debug: true,
cleanAfterBuild: true,
buildLocation: '../../output'
},
env: {
// TODO: Change to your app's url
// If you are using ssl, it needs to start with https://
ROOT_URL: 'https://MyApp.com',
MONGO_URL: 'mongodb://localhost/meteor'
},
docker: {
// change to 'kadirahq/meteord' if your app is not using Meteor 1.4
image: 'abernix/meteord:base'
},
// This is the maximum time in seconds it will wait
// for your app to start
// Add 30 seconds if the server has 512mb of ram
// And 30 more if you have binary npm dependencies.
deployCheckWaitTime: 60,
ssl: {
autogenerate: {
email: 'email#example.com',
domains: 'MyApp.com, www.MyApp.com'
}
},
// Show progress bar while uploading bundle to server
// You might need to disable it on CI servers
enableUploadProgressBar: true
},
mongo: {
port: 27017,
version: '3.4.1',
servers: {
one: {}
}
}
};
EDIT::
I deleted all of the containers and images except mongo, ran "mup setup" and "mup deploy" again with exactly the same results, old version is running. So the problem seems to be with the meteor build portion of mup.
EDIT 2::
I found at least 1 of the problems. I have the buildLocation set to a relative path. At some point Mup changes the current directory which causes multiple copies of the buildLocation to be used. In my case the output of the Meteor build command (the new files) were in one and Mup was deploying to the server from another one that happened to contain the old files. I changed buildLocation to an absolute path and the new version is being deployed. Yeah! But wait, even though Mup says the verification worked, my app never runs and the container keeps restarting. Looking out the logs I suspect that the problem is with the line below. Somehow the path has a backslash in it. I'm not sure where this is coming from.
[192.241.229.15]npm ERR! enoent ENOENT: no such file or directory,
chmod
'/bundle/bundle/programs/server/npm/node_modules/sshpk/bin\sshpk-conv'
SOLUTION:: Thanks to Parth Mahida I was inspired to remove the /opt/MyApp directory on the server, as well as removing and reinstalling the sshpk NPM package on my build machine then redid Mup setup and Mup deploy and everything worked again. No idea how the sshpk package became corrupt, but at this point I don't care.