Hey folks I inherited a project built with nextjs and running on Netlify. I am trying to load a component when a user is using IE. Locally I am am able to render the component view without any issues. But when a build gets ran (code pushed to a specific branch) the build fails on Netlify. Netlify does not seem to like the following.
const userAgent = props ? props.req.headers['user-agent'] : navigator.userAgent
Open to any suggestions. I am new to Netlify and simply trying to display a component that lets users know that their browser is not supported. Below is the code I have in _document.js
_document.js
class MyDocument extends Document {
static async getInitialProps(props) {
const page = props.renderPage()
const userAgent = props ? props.req.headers['user-agent'] : navigator.userAgent
return {
...page,
userAgent
}
}
renderBrowserSupport() {
let msie = this.props.userAgent.indexOf('MSIE ');
let ie11 = this.props.userAgent.indexOf('Trident/');
if(msie > 0 || ie11 > 0) {
return (
<BrowserSupport/>
)
}
else return false;
}
render() {
<html lang="en">
<body>
{this.renderBrowserSupport()}
</body>
</html>
}
}
export default MyDocument
Error when running npm run build
Cannot read property 'user-agent' of undefined
Yu Zhou
13.1k1 gold badge14 silver badges27 bronze badges
asked Oct 31, 2019 at 0:16
1 Answer 1
I ran into several issues with adding code to _document.js so I went with a different approach which is as follows:
- created a route update-browser
- added a component with messaging and alternative browsers to IE
- added script to check if browser is IE 11 or IE and redirected to update-browser page if so
answered Oct 31, 2019 at 22:46
Sign up to request clarification or add additional context in comments.
Comments
lang-js
const userAgent = props.req ? props.req.headers['user-agent'] : navigator.userAgentprops.req.headers ?instead ofprops.req ?