<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">Currently it is not possible to display two separate Next.js-based applications on the same page, if one attemps to do so, he gets an error. It is caused by the fact that Next.js-based application mounts on DOM elements with fixed IDs: <code class="notranslate">__next</code> and <code class="notranslate">__NEXT_DATA__</code>.</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">We'd like IDs of elements on which Next.js-based application mounts to be parameterized, possibly provided in application build script. We've forked Next.js and implemented this change in our fork: <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/Raudos/next.js/commit/a4da2b6c2dbbec2f3f5d5b3e1c9cf24273d79dde/hovercard" href="https://github.com/Raudos/next.js/commit/a4da2b6c2dbbec2f3f5d5b3e1c9cf24273d79dde">Raudos@<tt>a4da2b6</tt></a>. This PoC was created during workshop at meet.js in Katowice, Poland on 29.09.2019 (<a href="https://summit.meetjs.pl/2019/zeit-workshop" rel="nofollow">https://summit.meetjs.pl/2019/zeit-workshop</a>).</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">We've considered not having multiple separate Next.js-based applications on one page, but we're building our application in microfrontend architecture, hence in many cases we want to avoid having whole page as a single application.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">More information on our approach to microfrontend architecture can be found here: <a href="https://medium.com/stepstone-tech/microfrontends-extending-service-oriented-architecture-to-frontend-development-part-1-120b71c87b68" rel="nofollow">https://medium.com/stepstone-tech/microfrontends-extending-service-oriented-architecture-to-frontend-development-part-1-120b71c87b68</a> (we've not considered Next.js at the time of writing this article).</p>
<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">I notice that next.js ignores the node_modules directory from being compiled by babel. It will cause some errors in old version browsers.</p>
<p dir="auto">For example, after <code class="notranslate">npm run dev</code> in example of <a href="https://github.com/zeit/next.js/tree/canary/examples/data-fetch">data-fetch</a>, it would generate the following code in .next/main.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* 347 */
/***/ (function(module, exports, __webpack_require__) {

&quot;use strict&quot;;

const ansiRegex = __webpack_require__(348);

module.exports = input =&gt; typeof input === 'string' ? input.replace(ansiRegex(), '') : input;


/***/ }),
/* 348 */
/***/ (function(module, exports, __webpack_require__) {

&quot;use strict&quot;;


module.exports = () =&gt; {
	const pattern = [
		'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)',
		'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=&gt;&lt;~]))'
	].join('|');

	return new RegExp(pattern, 'g');
};"><pre class="notranslate"><span class="pl-c">/* 347 */</span>
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

<span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">ansiRegex</span> <span class="pl-c1">=</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">348</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">input</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">typeof</span> <span class="pl-s1">input</span> <span class="pl-c1">===</span> <span class="pl-s">'string'</span> ? <span class="pl-s1">input</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s1">ansiRegex</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">)</span> : <span class="pl-s1">input</span><span class="pl-kos">;</span>


<span class="pl-c">/***/</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-c">/* 348 */</span>
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">module</span><span class="pl-kos">,</span> <span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

<span class="pl-s">"use strict"</span><span class="pl-kos">;</span>


<span class="pl-s1">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</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">const</span> <span class="pl-s1">pattern</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
		<span class="pl-s">'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)'</span><span class="pl-kos">,</span>
		<span class="pl-s">'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=&gt;&lt;~]))'</span>
	<span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">'|'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

	<span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-v">RegExp</span><span class="pl-kos">(</span><span class="pl-s1">pattern</span><span class="pl-kos">,</span> <span class="pl-s">'g'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">These code is generated from <code class="notranslate">strip-ansi</code>, which is one of the dependencies of next.js.<br>
However, Chrome browsers whose version &lt; 41 would throw error of "SyntaxError: Use of const in strict mode" according to <a href="https://caniuse.com/#search=const" rel="nofollow">caniuse</a>. In addition, a few old browsers don't recogize <code class="notranslate">arrow functions</code>.</p>
<p dir="auto">How can I make babel compile node_modules so that my project can run on these old version browsers?</p>