<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">I expect that in the handler for the <code class="notranslate">Router.onRouteChangeComplete</code> event, <code class="notranslate">document.title</code> would be the title of the new page that was navigated to.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto"><code class="notranslate">document.title</code> is still the title of the previous page <code class="notranslate">onRouteChangeComplete</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Example: <a href="https://create-next-example-app-qyxwpdeqzb.now.sh/" rel="nofollow">https://create-next-example-app-qyxwpdeqzb.now.sh/</a></p>
<p dir="auto">Please note that the pages here are wrapped with the following layout component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component } from &quot;react&quot;;
import Router from 'next/router';
import Head from &quot;../components/head&quot;;

class Page extends Component {
  constructor(props) {
    super(props);
    this.state = { title: null };
  }
  componentDidMount() {
    Router.onRouteChangeComplete = (data) =&gt; {
      this.setState({ title: document.title });
    };
  }
  render() {
    return &lt;div&gt;
      &lt;Head title={this.props.title} /&gt;
      &lt;div class=&quot;page-title&quot;&gt;&lt;strong&gt;Page title (this.props.title):&lt;/strong&gt; {this.props.title}&lt;/div&gt;
      &lt;div class=&quot;page-title&quot;&gt;&lt;strong&gt;Page title (onRouteChangeComplete):&lt;/strong&gt; {this.state.title}&lt;/div&gt;
      &lt;div class=&quot;content&quot;&gt;{this.props.children}&lt;/div&gt;
    &lt;/div&gt;
  }
}

export default Page;"><pre class="notranslate"><code class="notranslate">import React, { Component } from "react";
import Router from 'next/router';
import Head from "../components/head";

class Page extends Component {
  constructor(props) {
    super(props);
    this.state = { title: null };
  }
  componentDidMount() {
    Router.onRouteChangeComplete = (data) =&gt; {
      this.setState({ title: document.title });
    };
  }
  render() {
    return &lt;div&gt;
      &lt;Head title={this.props.title} /&gt;
      &lt;div class="page-title"&gt;&lt;strong&gt;Page title (this.props.title):&lt;/strong&gt; {this.props.title}&lt;/div&gt;
      &lt;div class="page-title"&gt;&lt;strong&gt;Page title (onRouteChangeComplete):&lt;/strong&gt; {this.state.title}&lt;/div&gt;
      &lt;div class="content"&gt;{this.props.children}&lt;/div&gt;
    &lt;/div&gt;
  }
}

export default Page;
</code></pre></div>
<h2 dir="auto">Context</h2>

<p dir="auto">I have been trying to add tracking analytics in <code class="notranslate">onRouteChangeComplete</code>, but because the title is inaccurate, my analytics are incorrect.</p>
<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>5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>8.2.1</td>
</tr>
<tr>
<td>OS</td>
<td>Mac OS X</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I am unable to import certain CSS files from node_modules.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto"><code class="notranslate">npm install slick-carousel</code> then try</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import 'slick-carousel/slick/slick-theme.css'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">'slick-carousel/slick/slick-theme.css'</span></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">It should work.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">It has throws syntax errors on the CSS file, like these:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" error  in ./node_modules/slick-carousel/slick/slick-theme.css

Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at doBuild (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/webpack/lib/NormalModule.js:303:19)
    at runLoaders (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/webpack/lib/NormalModule.js:209:11)
    at /Users/trusktr/src/Signafy+mapper-public-website/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at /Users/trusktr/src/Signafy+mapper-public-website/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at /Users/trusktr/src/Signafy+mapper-public-website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at process._tickCallback (internal/process/next_tick.js:61:11)`"><pre class="notranslate"><code class="notranslate"> error  in ./node_modules/slick-carousel/slick/slick-theme.css

Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at doBuild (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/webpack/lib/NormalModule.js:303:19)
    at runLoaders (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/webpack/lib/NormalModule.js:209:11)
    at /Users/trusktr/src/Signafy+mapper-public-website/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/Users/trusktr/src/Signafy+mapper-public-website/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at /Users/trusktr/src/Signafy+mapper-public-website/node_modules/loader-runner/lib/LoaderRunner.js:202:4
    at /Users/trusktr/src/Signafy+mapper-public-website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
    at process._tickCallback (internal/process/next_tick.js:61:11)`
</code></pre></div>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: 6.1.1</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">If you delete the first few blocks that have <code class="notranslate">'</code> characters (f.e. the UTF line and blocks containing <code class="notranslate">url('')</code>) then the error goes away.</p>