Window is not defined at production build #5835
Comments
|
|
constructor(props) {
super(props)
this.state = {
width: window.innerWidth, // this line is the culprit
};
}I strongly suggest you use react-media for this case. But if you don’t want to, changing to this should fix it: class Index extends Component {
constructor(props) {
super(props)
this.state = {
width: 0, // or your default width here
}
}
componentDidMount() {
this.handleWindowSizeChange() // Set width
window.addEventListener('resize', this.handleWindowSizeChange)
}
componentWillMount() {
// Don’t use this as the API is deprecated
}
// make sure to remove the listener
// when the component is not mounted anymore
componentWillUnmount() {
window.removeEventListener('resize', this.handleWindowSizeChange)
}
handleWindowSizeChange = () => {
this.setState({ width: window.innerWidth })
}
// rest of code
}Also note that there will be small hit to performance, unless you debounce the resize eventListener. Let me know if you need more help! |
|
@ryanditjia thanks I'll check, I didn't know that I had to set the inner width to 0. For this project I won't use this module but for the next It could be more simpler. It could be great if this issue could be be fixed in the next version of Gatsby @KyleAMathews |
|
This isn’t issue with Gatsby. Just one of the gotchas of server-side rendering with React. When Node tries to build, it instantiates the class, and in the constructor finds EDIT: it doesn’t have to be zero. Just as long as you don’t mention |
|
@ryanditjia thanks for the explanation :) |
|
I'm actually having a similar issue. I have this search page and I allow the user to press enter to fire off a redux action. When an action is dispatch, props changes forcing a rerender. When the user then goes to another page, i get window.removeEventListener is not defined. Here's my code.
constructor(props){
super(props);
this.enterToSearch = this.enterToSearch.bind(this);
this.state = {
searchTerm: ""
}
}
enterToSearch = (event) => {
if (event.keyCode == 13) { //enter key
this.props.Actions.searchZA(this.state.searchTerm);
this.setState({searchTerm: ""})
}
}
componentDidMount(props){
window.addEventListener("keydown", this.enterToSearch)
if (this.props.ZA == []){
this.setState({ZA: "Nothing here"});
} else {
this.setState({ZA: this.props.ZA});
}
}
componentWillUnmount() {
window.removeEventListner("keydown", this.enterToSearch)
} |
|
@daxaxelrod i had a similar issue with that a while ago while trying to get a resize event to work. a good workaround that did the trick for me was: componentDidMount() {
if (typeof window !== 'undefined') {
window.addEventListener('resize', this.setChartDimensions)
}
------
}
componentWillUnmount() {
if (typeof window !== 'undefined') {
window.removeEventListener('resize', this.setChartDimensions)
}
} |
|
Anybody have a sense of how to fix this error for |
|
@daxaxelrod you have a typo, that's why. |
|
@antoinerousseau wow I need to start using a linter. Thanks 😊 |
|
Posting this here since I spent a good chunk of my Friday on this last week.
|
|
I had this issue and I did this. It solved my issue 😁 |
|
Hello, Got the same issue. Any idea how to tackle this problem ? |
|
@pmarxbraun it seems it's related to the muuri-react package, as that package is trying to write access the window api that is not acessible during the build process with Gatsby. You have options here, you can try and see if this helps with your case or try "offloading" the component where that package is used with loadable-components like mentioned here. Otherwise feel free to provide a minimal reproduction following these steps with that package and the code you're using so that it can be better looked at. |
|
@jonniebigodes Thanks for your advice. I finnaly used "@loadable/component" to fix the problem. My scenario: try to use "swagger-ui-react" in Gatsby, but receive Firstly, I tried adding some code to gatsby-browser.js, but it didn't work as below: Next, I tried your advice "load-component", and it worked for my case. |
|
@beckzayi no need to thank, just glad that you managed to solve your issue aswell. |
|
using globalThis works just fine. It wont work in old browsers though i.e nothing but i.e. :) |
|
this navigate function of gatsby is causing issues for me.
(indicates at |
Description
I want to trigger window width to change the content of my website. But I don't know how to fix my issue.
Webpack error : window is not defined at production build
Expected result
Production build successful.
Actual result
Environment
Thanks for your help
The text was updated successfully, but these errors were encountered: