On my production build (npm run build && npm run start) of my NextJS app I noticed elements firing a css transition on page load (links flashing blue, svg flashing color).
Noticed in Chrome only, Firefox and Safari didn't have this problem.
Found the answer in this stackoverflow question. Appearantly it is due to a chrome bug (https://crbug.com/332189 and https://crbug.com/167083).
Fix is to put a script tag with one space at the end of the body. In NextJS you can do this by adding a pages/_document.js file (more info).
Mine looks like this now:
import Document, { Html, Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
render () {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
<body>
<Main />
<NextScript />
{/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
<script> </script>
</body>
</Html>
)
}
}
Edit: This bug might be fixed since June 1st 2021 in Chrome Canary v93.0.4529.0 after 7.5 years!
Related
The meta link icon doesn't show in production nextjs but shows in localhost.
code:
const Home: NextPage<HomeProps> = () => {
return (
<div>
<Head>
<title>The Stobook</title>
<meta
name="description"
content="The Stobook is an open library where you can read any book for free. It features a customizable auto function that suggests depending on user preferences."
/>
<link rel="icon" href="/book.ico" />
</Head>
<div className={styles.index__container}>
//SomeCode
</div>
</div>
);
};
book.ico is in public folder.
It works in localhost, but doesn't show after I deployed it into vercel.
I also tried import the book.ico and href={icon.src} but thats causes error.
Issue could be related to two reasons
If you have a basePath defined in your next.config.js then your path becomes - /basepath/book.ico
NextJS vercel hosting issue - Try adding it to a images folder inside root - i.e
i.e
<link rel="icon" type="image/x-icon" href="/images/book.ico" />
I am getting tagName of null error on razorpay integration. This error is related to head manager.
Link of github repository https://github.com/rajatgalav/razorpay-demo
I tried to debug it. And if i remove head component from index.js file, problem does not occur. But i want head component also in my project.
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<button onClick={displayRazorpay}>pay</button>
</main>
Head is imported from next/head package of NextJs
Nextjs adds default viewport meta tag <meta name="viewport" content="width=device-width">.
But razorpay script removes viewport meta tag and adds it's own version. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
And also adds theme-color meta tag <meta name="theme-color" content="#ff7400">.
Nextjs fails to detect these changes and tries to update the header. That's why you see this error when you go to success page.
So I am redirecting the user to success page by window.location = '/success' instead of using router.push('/success')
I am still investigating how to avoid the error when using router.
You could try this:
"modal": { "ondismiss": function(){ console.log('Checkout form closed'); const _window = window as any; _window.location = '/checkout'; }}
Also, add window.location in the handler function to navigate to another URL. Then you won't get that error.
I found a hack for this issue. Just add the razorpay script in the _document.js file. You can do it like this:
<Html lang="en">
<Head>
<script src="https://checkout.razorpay.com/v1/checkout.js" async></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
This fixed the issue for me.
Could you sort this issue ? The handler function in the Razorpay is causing this issue, though it is required. If that is removed this error is not appearing on navigation
here is the problem:
when i open the page or hard refresh it loads all the components correctly except for some buttons and form controls from bootstrap 4 and it results in a quirky styled form and icons
I'm using Bootstrap 4 through a CDN link tag in _app.js instead of installing it from npm.
here is the undesired result
but when i resize the window in any way (maximizing or dragging) or when i do something results in a recompilation the correct styles suddenly gets loaded and everything is fine but any hard refresh will result in the same wrong styles again!
here is the correct styles after resizing the window
I've tried three popular browsers and i keep getting the same result.
does any one have any idea what is causing this and how to solve it? or is this behaviour persist in production!?
Could you try overriding pages/_document.js?
import Document, {Head, Main, NextScript} from 'next/document';
import React from 'react';
class MyDocument extends Document {
render() {
return (
<html lang="en">
<Head>
<meta charSet="UTF-8" />
<meta content="IE=edge" httpEquiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
export default MyDocument;
This will include the Bootstrap CSS file from the CDN with the initial request from the server.
I'm starting to learn reactjs at the moment. I'm wondering how to add normal HTML-Tags in a react-app. Is i just possible to add them by using the render function or can I also just write normal HTML-Tags in my index.html file?
Cause when I'm doing so they're not displayed.
Just like:
const myelement = (<h1>some element</h1>);
ReactDOM.render(myelement, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div>
<div id="root"></div>
<div>just normal html</div>
</div>
Well, it works just fine here.. so there must be something wrong with my build..
If you're starting out, I recommend you bootstrap your apps using npx create-react-app. It'll give you a good sense of what a React app could look like, and some pointers for file structure.
Most React apps have an index.html file, which you can use like any normal HTML file. But, for the majority of your app, it's recommended to write your content in JSX (otherwise, you aren't getting the benefits of using React in the first place).
JSX
JSX looks very similar to regular HTML, with a handful of key differences:
Tag attributes tend to be in lowerCamelCase (onChange rather than onchange)
Instead of class (which is a reserved keyword in JavaScript), you need to use className
An Example Component
I've borrowed this sample code from React's official tutorial, which you should definitely check out if you haven't already.
This is a class Component, and your JSX goes inside of the render method:
import React from 'react';
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
What goes in index.html?
The only essential part of index.html is a <div id="root"></div>, which React will use to append the rest of the JSX.
This is also the place to add the usual metadata and icons.
As an example, here's the index.html file that comes with create-react-app. For most of my projects, I leave this pretty-much as-is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
In any given React component, there can only be one parent/top layer html element. You can get around this by using <React.Fragment> ...the rest of your html ... </React.Fragment> (or <>...</> depending on your version) or simply add a wrapping <div> around everything. JSX doesn't distinguish between "normal" html and "React" html, it just turns the React stuff into normal html (over simplification, but close enough for this question). Try it again and let me know if you encounter any problems.
const reactElement = (
<div>
React stuff
</div>
);
ReactDOM.render(
reactElement,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div>
<div id="root">
</div>
<div>
just normal html
</div>
</div>
I am working very hard to get audio to play on my mobile phone with react 360. Through reading various documentation, I've learned that in order to play audio on mobile, I need to enact an html entity to create a user interaction. Once a user interacts by clicking the button, audio should be able to play on mobile. This does not seem to be the case.
In my index.html file I have the following code:
<html>
<head>
<title>ExampleVR</title>
<style>body { margin: 0; }</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<!-- Attachment point for your app -->
<div id="container">
<button id="enter" onclick="enterApp();">
Click to Enter VR
</button>
</div>
<script src="./client.bundle?platform=vr"></script>
<script>
// Initialize the React 360 application
function enterApp() {
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container'),
{
assetRoot: 'static_assets/',
}
);
}
</script>
</body>
</html>
As you can see, I have created am html button that when clicked, loads my React 360 code . However, when I click a VrButton in mobile, it still does not play. I've followed the recommendations as documented and it works on all browsers on desktop with the exception of mobile. Does anyone know how to fix this problem?
This was the solution to fix the audio issue:
https://github.com/facebook/react-360/issues/652