<h2 dir="auto">Window is not defined every time npm install reactjs modules</h2>
<p dir="auto">window is not defined after install react-chat-widget or any others reactjs modules</p>
<h2 dir="auto">Error of  Window is not defined when import react modules</h2>
<p dir="auto">when i import the module as picture below:</p>
<ol dir="auto">
<li>
<p dir="auto">import module<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24861458/51331277-58eeef00-1ab4-11e9-9fda-1fc74b4e4381.PNG"><img src="https://user-images.githubusercontent.com/24861458/51331277-58eeef00-1ab4-11e9-9fda-1fc74b4e4381.PNG" alt="import-widget" style="max-width: 100%;"></a></p>
</li>
<li>
<p dir="auto">use module into render function<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24861458/51331288-5ee4d000-1ab4-11e9-92d1-17a07e276f94.PNG"><img src="https://user-images.githubusercontent.com/24861458/51331288-5ee4d000-1ab4-11e9-92d1-17a07e276f94.PNG" alt="insert-render" style="max-width: 100%;"></a></p>
</li>
<li>
<p dir="auto">next.config.js with zeit/<a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-css">next-css</a> npm package<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24861458/51331356-850a7000-1ab4-11e9-984c-90b401e97052.PNG"><img src="https://user-images.githubusercontent.com/24861458/51331356-850a7000-1ab4-11e9-984c-90b401e97052.PNG" alt="capture" style="max-width: 100%;"></a></p>
</li>
<li>
<p dir="auto">package.json<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24861458/51330339-4a9fd380-1ab2-11e9-892c-b981bc89ff49.PNG"><img src="https://user-images.githubusercontent.com/24861458/51330339-4a9fd380-1ab2-11e9-892c-b981bc89ff49.PNG" alt="package-json" style="max-width: 100%;"></a></p>
</li>
</ol>
<h2 dir="auto">Step to get error</h2>
<p dir="auto">Steps to produce the error after install react modules:</p>
<ol dir="auto">
<li>Open cmd as administration</li>
<li>run "yarn run dev"</li>
<li>localhost:3000 started</li>
<li>open chrome browser, refresh</li>
<li>Unhandled Rejection (ReferenceError): window is not defined</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">I expect react-chat-widget it can do like this as picture below after installed module:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24861458/51330541-b6823c00-1ab2-11e9-87a7-403ba2c641ac.PNG"><img src="https://user-images.githubusercontent.com/24861458/51330541-b6823c00-1ab2-11e9-87a7-403ba2c641ac.PNG" alt="react-chat-widget-snap" style="max-width: 100%;"></a></p>
<h2 dir="auto">Screenshots of Error shows in browser after run it</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24861458/51330597-cbf76600-1ab2-11e9-8e70-1143c1a7cf61.PNG"><img src="https://user-images.githubusercontent.com/24861458/51330597-cbf76600-1ab2-11e9-8e70-1143c1a7cf61.PNG" alt="capture" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows</li>
<li>chrome</li>
<li>Version of Next.js: [e.g. 7.0.2]</li>
</ul>
<p dir="auto">Now some of us ships NPM packages (specially components) written in ES2015 without transpiling them.</p>
<p dir="auto">That's a pretty good thing specially if they are gonna used in a project like Next.js or CRA (which does transpiling). They offer benefits like:</p>
<ul dir="auto">
<li>No need to transpile before shipping to NPM</li>
<li>Get the benefit of Webpack 2's tree-shaking</li>
</ul>
<p dir="auto">But we can't do this now we <a href="https://github.com/zeit/next.js/blob/master/server/build/webpack.js#L166">exclude</a> everything inside node_modules from babel transpiling.</p>
<p dir="auto">So, here's the proposed solution.</p>
<p dir="auto">We have an entry in <code class="notranslate">next.config.js</code> to include modules which needs to go through babel. See:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
   transpileModules: [
     &quot;my-component&quot;,
     &quot;redux/src&quot;
   ]
}"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
   <span class="pl-c1">transpileModules</span>: <span class="pl-kos">[</span>
     <span class="pl-s">"my-component"</span><span class="pl-kos">,</span>
     <span class="pl-s">"redux/src"</span>
   <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>