<p dir="auto">I realize this error could be specific to my application but it happens only after upgrading from Next version 2.4.0 to the latest version.</p>
<p dir="auto">I have a dependency which has a dependency to react-addons-css-transition-group. When upgrading the latest 'next' version I get he error below when building the application. Moving back to the old version fixes the problem.</p>
<p dir="auto">Could it be caused by the new webpack version used in the newer versions?</p>
<p dir="auto"><strong>Stacktrace</strong><code class="notranslate">Failed to build on /var/folders/jr/dttm62vx7ss636n38lbv632h0000gn/T/362dd530-0e85-42d9-af04-7288fe481a7e { Error: ./~/react-addons-css-transition-group/index.js Module not found: Error: Can't resolve 'react/lib/ReactCSSTransitionGroup' in '/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group' resolve 'react/lib/ReactCSSTransitionGroup' in '/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group' Parsed request is a module using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group/package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration aliased with mapping 'react': '/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js' to '/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup' using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group/package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group/package.json (relative path: .) using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/package.json (relative path: ./dist/react.min.js/lib/ReactCSSTransitionGroup) as directory /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup doesn't exist no extension Field 'browser' doesn't contain a valid alias configuration /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.json doesn't exist [/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup] [/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup] [/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.js] [/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.json] @ ./~/react-addons-css-transition-group/index.js 1:17-61 @ ./~/auth0-lock/lib/ui/box/chrome.js @ ./~/auth0-lock/lib/ui/box/container.js @ ./~/auth0-lock/lib/core/actions.js @ ./~/auth0-lock/lib/core.js @ ./~/auth0-lock/lib/index.js @ ./utils/auth.js @ ./store.js @ ./pages/contact.js?entry @ multi ./pages/contact.js?entry at /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/dist/server/build/index.js:181:21 at /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/node_modules/webpack/lib/Compiler.js:272:15 at Compiler.emitRecords (/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/node_modules/webpack/lib/Compiler.js:367:37) at /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/node_modules/webpack/lib/Compiler.js:265:12 at /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/node_modules/webpack/lib/Compiler.js:360:11 at next (/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/tapable/lib/Tapable.js:154:11) at Compiler.compiler.plugin (/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4) at Compiler.applyPluginsAsyncSeries1 (/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/tapable/lib/Tapable.js:158:13) at Compiler.afterEmit (/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/node_modules/webpack/lib/Compiler.js:357:8) at Compiler.&lt;anonymous&gt; (/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/next/node_modules/webpack/lib/Compiler.js:352:14) errors: [ './~/react-addons-css-transition-group/index.js\nModule not found: Error: Can\'t resolve \'react/lib/ReactCSSTransitionGroup\' in \'/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group\'\nresolve \'react/lib/ReactCSSTransitionGroup\' in \'/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group\'\n  Parsed request is a module\n  using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group/package.json (relative path: .)\n    Field \'browser\' doesn\'t contain a valid alias configuration\n    aliased with mapping \'react\': \'/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js\' to \'/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup\'\n      using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group/package.json (relative path: .)\n        Field \'browser\' doesn\'t contain a valid alias configuration\n      after using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react-addons-css-transition-group/package.json (relative path: .)\n        using description file: /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/package.json (relative path: ./dist/react.min.js/lib/ReactCSSTransitionGroup)\n          as directory\n            /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup doesn\'t exist\n          no extension\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup doesn\'t exist\n          .js\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.js doesn\'t exist\n          .json\n            Field \'browser\' doesn\'t contain a valid alias configuration\n            /Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.json doesn\'t exist\n[/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup]\n[/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup]\n[/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.js]\n[/Users/Filip/Documents/javascript/RestoBonsApp/RestoBonsWeb/src/node_modules/react/dist/react.min.js/lib/ReactCSSTransitionGroup.json]\n @ ./~/react-addons-css-transition-group/index.js 1:17-61\n @ ./~/auth0-lock/lib/ui/box/chrome.js\n @ ./~/auth0-lock/lib/ui/box/container.js\n @ ./~/auth0-lock/lib/core/actions.js\n @ ./~/auth0-lock/lib/core.js\n @ ./~/auth0-lock/lib/index.js\n @ ./utils/auth.js\n @ ./store.js\n @ ./pages/contact.js?entry\n @ multi ./pages/contact.js?entry' ], warnings: [] }</code></p>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Bug <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="378734048" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/5635" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/5635/hovercard" href="https://github.com/vercel/next.js/issues/5635">#5635</a> was closed as a duplicate of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="378517302" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/5628" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/5628/hovercard" href="https://github.com/vercel/next.js/issues/5628">#5628</a>, but I don't think it actually was a duplicate. I can see why you'd think so at first glance though. Both seem to be related to the Fragment tag's usage, but at least for the case of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="378734048" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/5635" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/5635/hovercard" href="https://github.com/vercel/next.js/issues/5635">#5635</a>, I think that was a coincidence because the problem described there is something I'm also seeing.</p>
<p dir="auto">A clear and concise description of what the bug is.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li>Run <code class="notranslate">git clone https://github.com/geirman/nextjs-title-bug</code></li>
<li>Run <code class="notranslate">cd nextjs-title-bug</code></li>
<li>Run <code class="notranslate">Yarn</code> (duh!)</li>
<li>Run <code class="notranslate">npm run dev</code></li>
<li><code class="notranslate">Note</code> that the expected title flashes briefly, then becomes empty.</li>
<li>Now disable javascript and reload the page</li>
<li><code class="notranslate">Note</code> the server rendered title persists as expected</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The server rendered title should persist even after the client script is run</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1640318/49264434-0d4c8d00-f403-11e8-946f-a3392436a7b7.gif"><img src="https://user-images.githubusercontent.com/1640318/49264434-0d4c8d00-f403-11e8-946f-a3392436a7b7.gif" alt="kapture 2018-11-29 at 18 16 59" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser (if applies) Firefox</li>
<li>Version of Next.js: 7.0.2</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">So you don't have to go through the repo code...here's a copy/paste of the relevant pages.</p>
<p dir="auto"><strong>Page.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Head from 'next/head'
import Title from './Title'

const Page = props =&gt; (
  &lt;div&gt;
    &lt;Head&gt;
      &lt;Title title={props.title} /&gt;
    &lt;/Head&gt;
    {props.children}
  &lt;/div&gt;
)

export default Page"><pre class="notranslate"><code class="notranslate">import Head from 'next/head'
import Title from './Title'

const Page = props =&gt; (
  &lt;div&gt;
    &lt;Head&gt;
      &lt;Title title={props.title} /&gt;
    &lt;/Head&gt;
    {props.children}
  &lt;/div&gt;
)

export default Page
</code></pre></div>
<p dir="auto"><strong>Title.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default ({ title }) =&gt; (
  &lt;title&gt;
    {`${title} | My Awesome Website`}
  &lt;/title&gt;
)"><pre class="notranslate"><code class="notranslate">export default ({ title }) =&gt; (
  &lt;title&gt;
    {`${title} | My Awesome Website`}
  &lt;/title&gt;
)
</code></pre></div>
<p dir="auto"><strong>/pages/index.js</strong> used like so...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Page from '../layout/Page'

const Home = props =&gt; (
  &lt;Page title=&quot;Home&quot;&gt;
    &lt;h1&gt;Home&lt;/h1&gt;
    &lt;p&gt;Hey home!&lt;/p&gt;
  &lt;/Page&gt;
)

export default Home"><pre class="notranslate"><code class="notranslate">import Page from '../layout/Page'

const Home = props =&gt; (
  &lt;Page title="Home"&gt;
    &lt;h1&gt;Home&lt;/h1&gt;
    &lt;p&gt;Hey home!&lt;/p&gt;
  &lt;/Page&gt;
)

export default Home
</code></pre></div>