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
Related
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',
}
],
},
I'm trying to use twin.macro in a component library. It's a monorepo setup with Storybook at the root. I seem to be having issues accessing tailwind.config.js. Inside each of the packages I've got babel-plugin-macros.config.js. When the config is like this, Storybook doesn't pick up my custom colors. But I'm able to build the packages just fine with npm run build.
module.exports = {
twin: {
config: '../../tailwind.config.js',
preset: "emotion",
},
};
Minimal repro on GitHub: https://github.com/ashleynexvelsolutions/twin-macro-monorepo-with-storybook-broken
When the config file is like this, Storybook runs just fine. However, when I run npm run build, Rollup doesn't pick up the custom colors.
module.exports = {
twin: {
config: 'tailwind.config.js',
preset: "emotion",
},
};
Minimal repro on GitHub: https://github.com/ashleynexvelsolutions/twin-macro-monorepo-with-rollup-broken
In each scenario, I'm getting the same error.
MacroError: (path)/twin-macro-monorepo-with-storybook-broken/packages/Button/Button.js:
✕ text-test-one was not found
Try one of these classes:
Then it proceeds to list Tailwind defaults, like text-white, text-gray-300, etc.
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.