<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="WARNING  Compiled with 1 warnings                                      20:40:39

warning  in ./node_modules/try-prop-types/index.js

4:11-24 Critical dependency: the request of a dependency is an expression"><pre class="notranslate"><code class="notranslate">WARNING  Compiled with 1 warnings                                      20:40:39

warning  in ./node_modules/try-prop-types/index.js

4:11-24 Critical dependency: the request of a dependency is an expression
</code></pre></div>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<h2 dir="auto">Current Behavior</h2>


<p dir="auto">error is referencing this line in the <a href="https://github.com/algesten/refnux/blob/8f992e77674ff346dab3a9779322e7d4a53ee2a1/src/refnux.coffee#L2">refnux package</a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>npm install</li>
<li>npm run dev</li>
<li>open <a href="http://localhost:3000/page1" rel="nofollow">http://localhost:3000/page1</a></li>
</ol>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>"next": "latest",</td>
</tr>
<tr>
<td>node</td>
<td>v8.9.1</td>
</tr>
<tr>
<td>OS</td>
<td>macOS, sierra</td>
</tr>
<tr>
<td>browser</td>
<td>firefox</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">In my project using next.js, I was trying to make carousel for mobile.</p>
<p dir="auto">But for some reason, setTimeout / setInterval in event handler doesn't work correctly.<br>
Timer takes few seconds even if set 100ms.<br>
This is affect ONLY for <strong>Android Chrome</strong>. iOS Safari and Chrome work fine.</p>
<p dir="auto">Here is my sample component code.<br>
<code class="notranslate">handler</code> is called right after <code class="notranslate">touchend</code>, but the code inside <code class="notranslate">setTimeout</code> run after few seconds.</p>
<p dir="auto">This component works fine in the project by using create-react-app .</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';

class Scroller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      scrolled: [],
    };
    this.handler = this.handler.bind(this);
  }
  handler(e) {
    setTimeout(() =&gt; {
      this.setState({
        scrolled: [...this.state.scrolled, 'yes'],
      });
    }, 100);
  }
  render() {
    return (&lt;div&gt;
      &lt;style jsx&gt;{`
        .scroller {
          width: 300px;
          overflow-x: auto;
          white-space: nowrap;
        }
        .box {
          display: inline-block;
          margin: 0 15px;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          border: 1px solid #ccc;
        }
      `}&lt;/style&gt;
      &lt;div
        className=&quot;scroller&quot;
        onTouchEnd={this.handler}
      &gt;
        {[1,2,3,4,5,6,7,8,9,10].map(key =&gt; (
          &lt;div className=&quot;box&quot; key={key}&gt;{key}&lt;/div&gt;
        ))}
      &lt;/div&gt;
      &lt;ul&gt;
        {this.state.scrolled.map((str, i) =&gt; (
          &lt;li key={i}&gt;{str}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;)
  }
}
export default Scroller;"><pre class="notranslate"><code class="notranslate">import React from 'react';

class Scroller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      scrolled: [],
    };
    this.handler = this.handler.bind(this);
  }
  handler(e) {
    setTimeout(() =&gt; {
      this.setState({
        scrolled: [...this.state.scrolled, 'yes'],
      });
    }, 100);
  }
  render() {
    return (&lt;div&gt;
      &lt;style jsx&gt;{`
        .scroller {
          width: 300px;
          overflow-x: auto;
          white-space: nowrap;
        }
        .box {
          display: inline-block;
          margin: 0 15px;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          border: 1px solid #ccc;
        }
      `}&lt;/style&gt;
      &lt;div
        className="scroller"
        onTouchEnd={this.handler}
      &gt;
        {[1,2,3,4,5,6,7,8,9,10].map(key =&gt; (
          &lt;div className="box" key={key}&gt;{key}&lt;/div&gt;
        ))}
      &lt;/div&gt;
      &lt;ul&gt;
        {this.state.scrolled.map((str, i) =&gt; (
          &lt;li key={i}&gt;{str}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;)
  }
}
export default Scroller;
</code></pre></div>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS 10.12.6</td>
</tr>
<tr>
<td>browser</td>
<td>Android Chrome</td>
</tr>
</tbody>
</table>