Window is not defined at production build #5835
Description
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
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import Link from 'gatsby-link'
import 'flexboxgrid/dist/flexboxgrid.min.css';
import { Footer, Header } from '../components/organisms'
import { Modal, Project } from '../components/molecules'
import '../scss/main.scss'
class Index extends Component {
constructor(props) {
super(props)
this.state = {
width: window.innerWidth,
};
}
componentDidMount() {
const width = typeof window !== 'undefined' && window
}
componentWillMount() {
window.addEventListener('resize', this.handleWindowSizeChange);
}
// 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 });
};
render(){
const { width } = this.state;
const isMobile = width <= 600;
console.log(width, ' px')
const {data} = this.props;
return(
<div className="wrapper">
<div className="wrapper__top">
<Helmet>
<html lang="fr" />
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE-edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/png" href="/favicon.png" />
</Helmet>
<Header />
<main>
{/* Affichage du Teaser pour les navigateurs qui ont une largeur supérieure ou égale à 600px */}
{
(isMobile && this.props.location.pathname === '/') ?
<div>
{data.allProjectsJson.edges.map(({ node }, i) =>
(<Project
key={i}
title={node.title}
category={node.category}
image={{
src: node.image.childImageSharp.original.src,
alt: node.title,
}}
logo={{
src: node.logo.childImageSharp.original.src,
alt: node.title,
}}
website={node.website}
>
<p dangerouslySetInnerHTML={{ __html: node.description }} />
</Project>),
)}
</div>
: this.props.children()
}
</main>
<Footer />
</div>
</div >
)
}
}
Index.propTypes = {
children: PropTypes.func.isRequired,
location: PropTypes.shape({
pathname: PropTypes.string,
}).isRequired,
data: PropTypes.object.isRequired
};
export default Index;
export const getSiteHeader = (siteTitle, description) =>
(<Helmet>
<title>{`${siteTitle} | Maral Sabbagh`}</title>
<meta name="description" content={description} />
</Helmet>);
//eslint-disable-next-line no-undef
export const pageQuery = graphql `
query LayoutQuery {
allProjectsJson {
edges {
node {
title
category
description
image {
childImageSharp {
original {
src
}
}
}
logo {
childImageSharp {
original {
src
}
}
}
website
}
}
}
allGeneralJson(filter: {url: {eq: "/projets"}}){
edges{
node{
url
pageTitle
metaDesc
metaTitle
}
}
}
}
`;
Environment
gatsby info --clipboard
module.js:549
throw err;
^
Error: Cannot find module 'regenerator-runtime/runtime'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\Maral Sabbagh\AppData\Roaming\npm\node_modules\gatsby-cli\lib\index.js:88:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
Thanks for your help