Hope all's well. Kindly request your help with this. We are executing a Cypress script that launches URL 1 - https://domain1.com. This website has an iFrame embedded that launches another site - https://domain2.com. Problem is, site 2 does not load within the iFrame and we keep getting the message - "domain2.com took a long time to respond". However, outside of Cypress if I launch https://domain1.com, the iFrame is opened and domain2 is launched and displayed successfully.
I have reviewed several posts and have performed the following,
cypress.json
"chromewebsecurity": false AND "modifyobstructivecode": false
index.js, followed by package.json
const path = require('path');
module.exports = (on, config) => {
on('before:browser:launch', (browser = {}, args) => {
console.log(config, browser, args);
if (browser.name === 'chrome') {
const ignoreXFrameHeadersExtension = path.join(__dirname, '../extensions/ignore-x-frame-headers');
args.push(args.push(`--load-extension=${ignoreXFrameHeadersExtension}`));
args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
}
return args;
});
};
{
"name": "coral",
"version": "1.0.0",
"description": "Coral testing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"cy:run": "C:\\Testing\\Cypress\\Coral\\node_modules\\.bin\\cypress run",
"download-extension": "ced gleekbfjekiniecknbkamfmkohkpodhe extensions/ignore-x-frame-headers"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^4.1.0",
"mochawesome": "^5.0.0",
"mochawesome-merge": "^4.0.2"
},
"reporterEnabled": "mochawesome",
"dependencies": {
"file-system": "^2.2.2",
"nodemailer": "^6.4.6",
"chrome-ext-downloader": "^1.0.4"
}
}
I have downloaded the .crx file for this extension and renamed it to ignore-x-frame-headers under the extensions dir.
However, every time I run the test, the page for domain2.com does not load inside the iFrame.
Can someone please explain what are the steps I'm missing/executing wrong? Really appreciate your prompt and positive response.
Thanks in advance,
Karthik.
Related
Is there anyone else who faced the issues just like me? I try to make a GET request to my API endpoint it keeps on returning 404 when the application is deployed on Vercel - it works perfectly fine on locally.
Even it is a simple api that are provided by the Next.JS by default.
default api location: pages/api/hello
export default async function handler(req, res) {
res.status(200).json({
name: 'John Doe',
})
}
My package.json
{
"name": "my-next-js-sample"
"version": "0.1.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"axios": "^1.1.3",
"cheerio": "^1.0.0-rc.12",
"dayjs": "^1.11.6",
"firebase": "^9.13.0",
"next": "13.0.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.26.0",
"eslint-config-next": "13.0.0"
}
}
This is how I'd structured my folders.
This is how'd called the api routes.
http://localhost:3000/api/hello
http://localhost:3000/api/v2/live
Perfectly can call any api routes just like this example in local development.
Vercel Project Settings
After I'd created a new vercel account and deployed this project into that new one, then the problem has solved without knowing the actual issues.
For anyone crossing with this problem, this issue might be your guy
In a nutshell: Standalone configuration is not yet supported.
I'm updating my project to use turborepo and I'm encountering a strange behavior with turbo/no-undeclared-env-vars.
In the starter project I added a hello constant from the environment variables:
export default function Web() {
const hello = process.env.HELLO;
return (
<div>
<h1>{hello}</h1>
<Button />
</div>
);
}
And when running npm run lint I get the expected error:
web:lint: ./pages/index.tsx
web:lint: 4:17 Error: $HELLO is not listed as a dependency in turbo.json turbo/no-undeclared-env-vars
But when I add it to turbo.json and re-run npm run lint it still shows the error.
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build", "$HELLO"],
"outputs": ["dist/**", ".next/**"]
},
"lint": {
"outputs": []
},
"dev": {
"cache": false
}
}
}
It seems to be using the cache because if I remove the cache from apps/web/.next/.cache/.eslint and run it again it shows no error anymore.
It also works the other way.
If I now remove the $HELLO from turbo.json and run npm run lint again it says there are not errors, while it should say that it is unlisted. Here as well, removing the cache manually shows it again but it seems to me that it should detect it automatically, no?
I also tried updating turbo.json not to use the cache during lint but that is also not helping:
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build", "$HELLO"],
"outputs": ["dist/**", ".next/**"]
},
"lint": {
"outputs": [],
"cache": false
},
"dev": {
"cache": false
}
}
}
Any suggestions?
In case you still need and answer or if anybody is like me and ended up here googling the issue, the solution was to add a new prop in the build object called env so your turbo.json would become
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"],
"env": [
"HELLO"
]
},
"lint": {
"outputs": [],
"cache": false
},
"dev": {
"cache": false
}
}
}
note: no $ prefix needed.
When running turborepo on Vercel you also get some extra useful info like a codemod to fix your turbo.json file in your case by running
npx #turbo/codemod migrate-env-var-dependencies
in the root folder you'd get the right props in the json file.
One last thing, if you're using next and turborepo, your ENV vars, if they are needed in the frontend like your example, should be prefixed with NEXT_PUBLIC_ so in your case
const hello = process.env.NEXT_PUBLIC_HELLO;
with that change, turborepo will know that you're using that env var as part of a next project and the caching algorithm will behave accordingly
I am using NextJS (https://nextjs.org/) Version 9.0.6.
My next.config.js looks like this:
/* eslint-disable */
const withLess = require("#zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables // make your antd custom effective
},
webpack: (config, {
isServer,
defaultLoaders
}) => {
const originalEntry = config.entry;
config.entry = async() => {
const entries = await originalEntry();
if (
entries["main.js"] &&
!entries["main.js"].includes("./polyfills.js")
) {
entries["main.js"].unshift("./polyfills.js");
}
return entries;
};
config.module.rules.push({
test: /\.scss$/,
use: [
defaultLoaders.babel,
{
loader: require("styled-jsx/webpack").loader,
options: {
type: "scoped",
javascriptEnabled: true
}
},
"sass-loader"
]
});
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === "function") {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === "function" ? [] : origExternals)
];
config.module.rules.unshift({
test: antStyles,
use: "null-loader"
});
}
return config;
}
});
My package.json looks like this:
{
"name": "test",
"version": "0.0.1beta",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export"
},
"dependencies": {
"#material/react-chips": "^0.15.0",
"#zeit/next-less": "^1.0.1",
"antd": "^3.24.3",
"babel-plugin-import": "^1.12.2",
"less": "3.10.3",
"less-vars-to-js": "1.3.0",
"next": "9.0.6",
"null-loader": "3.0.0",
"react": "^16.11.0",
"react-country-flag": "^1.1.0",
"react-device-detect": "^1.9.10",
"react-dom": "^16.11.0",
"react-proptypes": "^1.0.0",
"react-redux": "^7.1.1",
"react-string-replace": "^0.4.4",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"node-sass": "^4.13.0",
"prettier": "^1.18.2",
"prettier-eslint": "^9.0.0",
"sass-loader": "8.0.0"
},
"license": "ISC"
}
What I did:
-Deleted the out and the .next folder.
Then:
yarn build
yarn export
The pages will be generated, but they are broken (CSS not loaded, no Javascript).
This worked at the beginning of the project, but no it does not.
Is here someone who has an idea why it could be broken ?
I just came across the same issue and landed on this question.
I think Taha explained the problem correctly, but for me a small adaption in the next.config.js did the trick:
module.exports = {
assetPrefix: './'
}
The topic is also described in the NextJS docs.
I came across this question when I had the same problem, I've figured it out.
Inside your index.html file (in the out directory), find the link tag at the beginning of the file:
<link
rel="preload"
href="/_next/static/css/d849fb1b42015bc13208.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/d849fb1b42015bc13208.css"
data-n-g=""
/>
Just add a dot "." at the beginning of href attribute, like this:
<link
rel="preload"
href="./_next/static/css/d849fb1b42015bc13208.css"
as="style"
/>
<link
rel="stylesheet"
href="./_next/static/css/d849fb1b42015bc13208.css"
data-n-g=""
/>
This fixed it for me.
I do not know why the "." is not included by default.
I had the same issue recently while trying to export a static version of my app, and was surprised to see no recent issue about that on Next.js repository.
Actually when run through a web server, the use of absolute path for CSS/Js files works correctly. When run as local files in the browser, you have to change them to relative paths yourself.
As for why Next.js team do not provide an option to export with local path, Tim Neutkens (the lead maintainer) states in this issue that "it would involve a lot of work for very minimal gains".
Apart from #Philipp Schemels answer if anyone is using custom fonts via FontSource with StyledComponents, The built CSS file will not point to the correct font files, You will have to manually change those URLs,
The browser console should print a descriptive error which you can use to identify the CSS files that are causing the issue. Custom fonts are usually put in out/_next/static/media
if you are using VS Code and liveserver the problem is that liveserver is defaulting to the root of the project when it needs to set the root to the out folder or wherever you have the rendered files.
This is a setting which you can set per workspace.
Live Server › Settings: Root
Set Custom root of Live Server.
To change root the the server to sub folder of workspace, use '/' and relative path from workspace.
Example: /subfolder1/subfolder2
Then in the workspace settings.json I have:
{
"liveServer.settings.root": "/out"
}
I have a developed a sample application in nextjs and deployed this sample application using npm run build command.
I am following this (https://nextjs.org/docs/advanced-features/custom-server) article for a custom server deployment.
I have created a server.js file for custom server at the root level of build directory.
and modified the following in package.json:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
and next.config.js
module.exports = {
reactStrictMode: true,
};
const path = require("path");
module.exports = {
distDir: "build",
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
env: {
DOM: process.env.DOM,
SERDOM: process.env.SERDOM,
PAPI: process.env.PAPI,
UAPI: process.env.UAPI,
PAEXIST: process.env.PAEXIST,
USEREXIST: process.env.USEREXIST
},
};
Now after that , I am a bit confused. Should I give the path of server.js using pm2 ?
server.js is using port 3000 and nextjs frontend app is using 3001.
Initially my deployment was not working and throwing 404 error but now it is working but here is some issue in it.
When I run the npm run build command to generate a new build/release and try to deploy again then my nextjs deployed app is not displaying the new changes.
Why ?
Does it get from somewhere else or from cached objects ?
How can I enable/display the updated deployment to my end user ?
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
================================package.json================================
{
"name": "New demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"bootstrap": "^5.0.2",
"next": "11.0.1",
"node-sass": "^4.14.1",
"react": "17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "17.0.2",
"react-icons": "^4.2.0"
},
"devDependencies": {
"eslint": "7.29.0",
"eslint-config-next": "11.0.1"
},
"proxy": "http://localhost:3008"
}
Try like this
"scripts": {
"web:local": "env-cmd -f environments/.env.local node server.js",
"dev": "next dev",
"build": "next build",
"start": "next start"
},
where environments/.env.local is your local settins and some private info (you need to create environments folder and .env.local file). Server.js is your file, code example below
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
// these are keys to run your localhost with https protocol, you can // if you dont need it
const httpsOptions = {
key: fs.readFileSync('./environments/key.pem'),
cert: fs.readFileSync('./environments/cert.pem')
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on https://localhost:3000');
});
});
Then you run your application with npm run web:local
Why ?
Because you did a build, it's not dynamically updated
Does it get from somewhere else or from cached objects ?
No, its a "built" of your project
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
You upload your code to git, you link git to Vercel. In vercel you need to also add environment variables. Don't forget also, you need to.gitignore /environments folder!
i'm new to web development and i've created an application that i would like to deploy to firebase. i referred to the online resources and carried out the necessary steps (as shown below) to get my application online. now when i got to my site i don't see the data loading. I recieve the foll error. Now even if i remove the 'scroll to top' script referenced in the error, there is no data loading.
GET https://arrow.scrolltotop.com/arrow88.js net::ERR_INSECURE_RESPONSE
I am walking you through my workflow if that's all right. Any help would be appreciated.
The foll is my package.json:
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"angular-animate": "^1.5.0",
"angular": "^1.5.0",
"angular-aria": "^1.5.0",
"angular-ui-router": "^0.2.18",
"mdi": "^1.4.57",
"angular-material": "^1.0.5"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
the foll is my firebase.json
{
"firebase": "xxx",
"public": ".",
"ignore": [
"firebase.json",
"**/.*"
]
}
It think it may be worthwhile to mention that i don't recieve a blank page When i run the application on a local http-server. the application loads and i get all the data from firebase without any errors.
Thanks