After checking the documentation it says that .env or [..nextAuth.js] file you should set a secret property in the configuration.
Error documentation to nextAuth
.env
NEXTAUTH_URL = "http://localhost:3000"
NEXTAUTH_SECRET_KEY="test"
[...nextAuth.js]
secret: "test",
jwt: {
secret: "test",
encryption: true,
maxAge: 5 * 60,
},
pages: {
signIn: "/auth/login",
},
However, this is a requirement only if you are in production, but I am not.
How to fix this error and set it on development, not in production?
Yeah the new environment variable is called simply NEXTAUTH_SECRET.
Also when this is set, you can avoid setting the secret and jwt.secret values separately in the configuration.
Related
Im trying to add logo of coloplast in my project URL(https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png).
**And i always got this error **
Server Error
Error: Invalid src prop (https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png) on next/image, hostname "www.coloplast.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
I tryed diferents website such as google images, and stil doesn't work...
protocol: 'https',
hostname: 'www.coloplast.com',
port: '',
pathname: '/account123/**',
images: {
domains: ["www.coloplast.com"] and ["coloplast.com"]
}
And after each method i restarted my project from console.
Based on NextJS official docs about next/image remote pattern, "To protect your application from malicious users, configuration is required in order to use external images. This ensures that only external images from your account can be served from the Next.js Image Optimization API."
So in your case, you have to add this code between curly braces of your nextConfig variable in next.config.js file:
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'www.coloplast.com',
},
],
},
I have integrated Jetsi directly in my React app using the API (Without a self-hosted server).
I have been trying to find a way to change the default avatar when the user camera is off.
According to the documentation, I can override this parameter:
gravatar: {
baseUrl: 'https://www.gravatar.com/avatar/',
disabled: false
}
baseUrl 🚫 - Base URL for a Gravatar-compatible service. Defaults to
Gravatar. disabled - True if Gravatar should be disabled.
I tried overriding it in both configOverwrite and interfaceConfigOverwrite:
<Jutsu
roomName={room_name}
configOverwrite={{
gravatar: {
baseUrl:
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg",
disabled: false,
},
}}
interfaceConfigOverwrite={{
gravatar: {
baseUrl:
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg",
disabled: false,
},
}}
/>
But, it had no effect.
I don't even understand what they mean by
Gravatar-compatible service
Can't I just use an image url?
According to a note at the beginning of the docs, the gravatar.baseUrl option can't be overwritten
NOTE
Options marked with 🚫 are not overwritable through configOverwrite
You'll need to set it in the config.js file of your jitsi installation.
And the baseUrl should be a service that works the same as gravatar: receiving a hashed email and returning an image; no other option is supported. You can check how the URL is built here https://github.com/jitsi/js-utils/blob/master/avatar/index.js#L10
You could use an out of the box alternative as https://wiki.libravatar.org/ or build your own https://cloudinary.com/blog/how_to_build_an_enhanced_gravatar_service_part_1
I am using the Image component from Next.js (it's a new feature of Next.js). I've tried to give the source URL:
{`${API}/user/photo/${blog.postedBy.username}`}
But it shows me this error. I also make changes in my next.config.js as
module.exports = {
images: {
domains: ['localhost'],
},
}
but nothing works for me. Please help if you know anything about this.
const src = `${API}/user/photo/${blog.postedBy.username}`;
<Image loader={() => src} src={src} width={500} height={500}/>
Here, loader is a function that generates the URLs for your image. It appends a root domain to your provided src, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic srcset generation, so that visitors to your site will be served an image that is the right size for their viewport.
Edit next.config.js :
module.exports = {
reactStrictMode: true,
images: {
domains: ['example.com'],
},
}
Yes, I finally got the answer. Make loader function to load it from the destination of the image.
const myLoader=({src})=>{
return `${API}/user/photo/${blog.postedBy.username}`;
}
Use this loader function the loader attribute of an Image tag.
<Image loader={myLoader} src={`${API}/user/photo/${blog.postedBy.username}`} width={500}
height={500}/>
This works for me perfectly
I had the same issue, You need to restart your dev server, you need to do that each time you make changes on your next.config.js file.
The API string should include the port. e.g. localhost:3001
There are a whole bunch of out-of-date answers here that suggest setting the domains key in next.config.js. As of Next 12.3.0 this is no longer correct; see: https://nextjs.org/docs/messages/next-image-unconfigured-host
Instead, one should use a remotePatterns property, which is a little more complicated than the old domains:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/account123/**',
},
],
},
}
Inside next.config.js file.
Add Image src domain name:
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['sangw.in', 'localhost', 'picsum.photos'] // <== Domain name
}
}
module.exports = nextConfig
Adding 'localhost' in the domains array will fix the issue,
Unfortunately nextJS didn't refresh the server automatically after configuration file(next.config.js) change.
You have to restart the server manually to reflect the changes.
You can also try by set reactStrictMode value reactStrictMode: true,
here is the full export object
module.exports = {
reactStrictMode: true,
images: {
domains: [
"localhost",
process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
"2.gravatar.com",
"0.gravatar.com",
"secure.gravatar.com",
],
},
};
First of all add and restart the dev server.
domains: ['localhost']
And be sure to return the image link with http(s) protocole
image link with localhost:port/... is wrong , return as http://localhost/... ( or with https )
I've faced the same issue, and my domains were correct. Deleting .next and node_modules folders, and running yarn/npm install fixed the issue.
For me, in next.config.js,
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: [ "abc.def.org", ]
},
}
module.exports = nextConfig
and then in my Image tag
<Image
unoptimized // for image caching, else error
src={profile.picture}
alt={profile.picture || "IMG"}
width={60}
height={60}
/>
I added two npm "#lhci/cli" and puppeteer.After that I added two config file
lighthouserc.js : config details are:
module.exports = {
ci: {
upload: {
target: 'temporary-public-storage'
},
collect: {
puppeteerScript: 'puppeteer-script.js',
chromePath: puppeteer.executablePath(),
url: ["https://myWebsite.com/abc"],
headful: true,
numberOfRuns: 1,
disableStorageReset: true,
setting: {
disableStorageReset: true
},
puppeteerLaunchOptions: {
slowMo: 20,
headless: false,
disableStorageReset: true
}
},
assert: {
assertions: {
'categories:performance': ['warn', { minScore: 1 }],
'categories:accessibility': ['error', { minScore: 0.5 }]
}
}
}
};
puppeteer-script.js
module.exports = async (browser, context) => {
await page.setDefaultNavigationTimeout(90000);
await page.goto(context.url);
await page.type('input[type=text]', 'abc');
await page.type('input[type=email]', 'abc#abc.com');
await page.type('input[type=password]', 'abc#100');
await page.click('[type="button"]');
await page.waitForNavigation({ waitUntil: "networkidle2" })
await page.close();
};
and in package.json I added script command as :
"test:lighthouse": "lhci autorun --collect.settings.chromeFlags='--no-sandbox'"
Now Login is working fine but I want to run the lighthouse for the url that I specified in lighthouserc.js (https://myWebsite.com/abc).
But after login it is trying to access the url and again login screen is coming and the lighthouse is measuring performance for the login page.
Is it possible to run lighthouse on url I specified in the config.Please assist me.
https://myWebsite.com/abc is my reactjs application
I do not have complete information on the workflow of your site but as mentioned in the configuration guide puppeteer script is run for each url mentioned in the lhci config file.
And after puppeteer script is ran, lighthouse will open URL. Now if your site is opening login page again, that its an issue with your app or configuration most likely. Either your app is not setting cookie correctly or login process is failing somehow, you will need to check that.
Also, as puppeteer script will be running for every url in the config, its good idea to not re-login if you already logged in once, check out this issue on Github.
Sometimes I refresh, and it works. Sometimes it just doesn't work.
I tried changing ganache GUI settings to use port 8545 which I read is the WebSockets port but it still won't connect. ws:127.0.0.1 won't work and neither will http://
This is my truffle config file. The rest of the code is large and won't help much.
// See <http://truffleframework.com/docs/advanced/configuration>
// #truffle/hdwallet-provider
// var HDWalletProvider = require("truffle-hdwallet-provider");
const path = require("path");
var HDWalletProvider = require("#truffle/hdwallet-provider");
module.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// to customize your Truffle configuration!
// contracts_directory: "./allMyStuff/someStuff/theContractFolder",
contracts_build_directory: path.join(__dirname, "/_truffle/build/contracts"),
// migrations_directory: "./allMyStuff/someStuff/theMigrationsFolder",
networks: {
ganache: {
host: "127.0.0.1",
port: 7545,
//port: 8545,
network_id: 5777,
//network_id: "*", // Match any network id,
websockets: false, // websockets true breaks TODO: connection not open on send()
// wss
},
},
};
This is some of my code on the actual screen in question.
const options = {
web3: {
block: false,
fallback: {
type: 'ws',
//url: 'ws://127.0.0.1:8546',
url: 'http://127.0.0.1:7545',
},
},
contracts: [MyStringStore],
// polls: {
// accounts: IntervalInMilliseconds,
// },
events: {},
};
I don't understand why sometimes it works and I can see drizzle state and sometimes I can't. React native and web3 is very new to me.
I get errors like this:
00:06 Contract MyStringStore not found on network ID: undefined
Error fetching accounts:
00:06 connection not open
I am having real difficulty setting up drizzle as well. One thing I see is that your
url: 'http://127.0.0.1:7545',
For some reason Drizzle only works with 'ws' as the prefix for such a URL. I am trying to follow this guide by people who got it working.
I think websocket is only available in the command line version.
Try install and use ganache-cli instead of the gui version.