<p dir="auto">Have a look at the following two pages:</p>
<p dir="auto"><strong>pages/index.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import Counter from '../components/Counter'
import Link from 'next/link'

console.log(&quot;Home&quot;, Counter());

export default () =&gt; (
  &lt;div&gt;
    &lt;p&gt;Home&lt;/p&gt;
    &lt;Link href=&quot;/about&quot; /&gt;
  &lt;/div&gt;
)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">Counter</span> <span class="pl-k">from</span> <span class="pl-s">'../components/Counter'</span>
<span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">'next/link'</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">"Home"</span><span class="pl-kos">,</span> <span class="pl-v">Counter</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">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Home<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/about"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <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></pre></div>
<p dir="auto"><strong>pages/about.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import Counter from '../components/Counter'

console.log(&quot;About&quot;, Counter());

export default () =&gt; (
  &lt;div&gt;
    &lt;p&gt;About&lt;/p&gt;
  &lt;/div&gt;
)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">Counter</span> <span class="pl-k">from</span> <span class="pl-s">'../components/Counter'</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">"About"</span><span class="pl-kos">,</span> <span class="pl-v">Counter</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">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>About<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
  <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></pre></div>
<p dir="auto">And here's the Counter component</p>
<p dir="auto"><strong>components/Counter.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="console.log('Counter');

let counter = 0;

export default () =&gt; {
  return ++counter;
}"><pre class="notranslate"><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">'Counter'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">let</span> <span class="pl-s1">counter</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-c1">++</span><span class="pl-s1">counter</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Here's the situation:</p>
<ul dir="auto">
<li>Visit "/" - Then the <code class="notranslate">Counter</code> module gets loads for the first time</li>
<li>Then I visit "/about" by clicking the link on the home page - Then the <code class="notranslate">Counter</code> module loads again.</li>
</ul>
<p dir="auto">This gives us two issues:</p>
<ul dir="auto">
<li>Loading common code more than once.</li>
<li>Our app might not work properly. (Here our counter is not gonna work properly as there are two such modules)</li>
</ul>
<h3 dir="auto">Possible solution</h3>
<ol dir="auto">
<li>Allow the developer to define a set of modules as common modules.</li>
<li>Then bundle them into a separate output and load with every request.</li>
<li>We also need to add them to externals in the webpack config.</li>
</ol>
<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>


<p dir="auto">Can't seems to run the example, because react 16 is having an error with <code class="notranslate">react-no-ssr</code> package</p>
<h2 dir="auto">Current Behavior</h2>


<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[Error] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
	invariant (main.js:1172)
	createFiberFromElementType (commons.js:8191)
	createFiberFromElement (commons.js:8136)
	reconcileSingleElement (commons.js:9384)
	reconcileChildFibers (commons.js:9483)
	reconcileChildrenAtPriority (commons.js:10141)
	reconcileChildren (commons.js:10124)
	finishClassComponent (commons.js:10260)
	performUnitOfWork (commons.js:12579)
	workLoop (commons.js:12688)
	callCallback (commons.js:1305)
	dispatchEvent
	invokeGuardedCallbackDev (commons.js:1344)
	invokeGuardedCallback (commons.js:1201)
	performWork (commons.js:12806)
	scheduleUpdateImpl (commons.js:13191)
	scheduleTopLevelUpdate (commons.js:13401)
	updateContainer (commons.js:13431)
	(anonymous function) (commons.js:17111)
	unbatchedUpdates (commons.js:13262)
	renderSubtreeIntoContainer (commons.js:17110)
	renderReactElement (main.js:27301)
	_callee4$ (main.js:27072)
	tryCatch (main.js:9630)
	invoke (main.js:9864)
	step (main.js:3579)
	initializePromise
	Promise
	F (main.js:97)
	(anonymous function) (main.js:3576)
	tryCatch (main.js:9630)
	invoke (main.js:9864)
	step (main.js:3579)
	initializePromise
	Promise
	F (main.js:97)
	(anonymous function) (main.js:3576)
	_callee$ (main.js:27285)
	tryCatch (main.js:9630)
	invoke (main.js:9864)
	step (main.js:3579)
	(anonymous function) (main.js:3590)
	promiseReactionJob

The above error occurred in the &lt;NoSSR&gt; component:
    in NoSSR (at Modal.js:88)"><pre class="notranslate"><code class="notranslate">[Error] Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
	invariant (main.js:1172)
	createFiberFromElementType (commons.js:8191)
	createFiberFromElement (commons.js:8136)
	reconcileSingleElement (commons.js:9384)
	reconcileChildFibers (commons.js:9483)
	reconcileChildrenAtPriority (commons.js:10141)
	reconcileChildren (commons.js:10124)
	finishClassComponent (commons.js:10260)
	performUnitOfWork (commons.js:12579)
	workLoop (commons.js:12688)
	callCallback (commons.js:1305)
	dispatchEvent
	invokeGuardedCallbackDev (commons.js:1344)
	invokeGuardedCallback (commons.js:1201)
	performWork (commons.js:12806)
	scheduleUpdateImpl (commons.js:13191)
	scheduleTopLevelUpdate (commons.js:13401)
	updateContainer (commons.js:13431)
	(anonymous function) (commons.js:17111)
	unbatchedUpdates (commons.js:13262)
	renderSubtreeIntoContainer (commons.js:17110)
	renderReactElement (main.js:27301)
	_callee4$ (main.js:27072)
	tryCatch (main.js:9630)
	invoke (main.js:9864)
	step (main.js:3579)
	initializePromise
	Promise
	F (main.js:97)
	(anonymous function) (main.js:3576)
	tryCatch (main.js:9630)
	invoke (main.js:9864)
	step (main.js:3579)
	initializePromise
	Promise
	F (main.js:97)
	(anonymous function) (main.js:3576)
	_callee$ (main.js:27285)
	tryCatch (main.js:9630)
	invoke (main.js:9864)
	step (main.js:3579)
	(anonymous function) (main.js:3590)
	promiseReactionJob

The above error occurred in the &lt;NoSSR&gt; component:
    in NoSSR (at Modal.js:88)
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></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></td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>