<p dir="auto">In ErrorPage Component this error is coming at last statement of "export default connect(...) ".</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { Component } from 'react'
import { connect } from 'react-redux';

class ErrorPage extends Component {
    state = {}
    render() {
        return (
            &lt;div&gt;
                ErrorPage;
            &lt;/div&gt;
        );
    }
}
const mapStateToProps = (state) =&gt; {
    console.log('====================================');
    console.log(state);
    console.log('====================================');
}


export default connect(mapStateToProps, null)(ErrorPage);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">connect</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-redux'</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">ErrorPage</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
    <span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                ErrorPage;
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">const</span> <span class="pl-en">mapStateToProps</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">state</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'===================================='</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'===================================='</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>


<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-en">mapStateToProps</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">ErrorPage</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
no.<br>
<strong>What is the current behavior?</strong><br>
look this: <a href="https://www.npmjs.com/package/react-week-time-range-picker" rel="nofollow">react-week-time-range-picker</a>.</p>
<p dir="auto">This is a component written by react hooks. I run it normal when i develop it. However, when i <code class="notranslate">npm install react-week-time-range-picker</code> to test , the page report error <strong>Minified React error <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="19118479" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/321" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/321/hovercard" href="https://github.com/facebook/react/pull/321">#321</a>;visit </strong><strong><a href="https://reactjs.org/docs/error-decoder.html?invariant=321" rel="nofollow">https://reactjs.org/docs/error-decoder.html?invariant=321</a> for the full message or use the non-minified dev environment for full errors and additional helpful warnings.</strong></p>
<p dir="auto">I look for the solution almost two days, but i failed.</p>
<ol dir="auto">
<li>My version is no problem</li>
<li>I think the hooks call is correct</li>
<li>I doubt it may be the third cause in the official documents，but i test it with <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react" rel="nofollow">official documents code</a>, it print true。</li>
</ol>
<p dir="auto">Now, i am muddled.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I hope who can help me</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;react&quot;: &quot;^16.10.2&quot;,
  &quot;react-dom&quot;: &quot;^16.10.2&quot;
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"react"</span>: <span class="pl-s">"^16.10.2"</span><span class="pl-kos">,</span>
  <span class="pl-s">"react-dom"</span>: <span class="pl-s">"^16.10.2"</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">chrome 77.</p>
<p dir="auto">Thank you!</p>