<p dir="auto">I build some simple dashboard layout with nextjs and material ui next, but I face with strange problem that only happened in production.<br>
The problem is regarding miss class name placement to the component wherever I click some link that navigate to the current route. I'm not quite sure if it nextjs problem or material ui problem.<br>
live example: <a href="https://vanilla-nextjs-dashboard.herokuapp.com/" rel="nofollow">https://vanilla-nextjs-dashboard.herokuapp.com/</a></p>


<ul dir="auto">
<li>[x ] 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">All style and class name placed at the right component</p>


<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Normal scenario the component will get this classname<br>
<code class="notranslate">&lt;div class="c280 c281" aria-hidden="true" style="opacity: 1; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"&gt;&lt;/div&gt;</code><br>
After I click navigation to the current route (current route dashboard, I click dashboard). The class name will change to the wrong one.<br>
<code class="notranslate">&lt;div class="c1 c2" aria-hidden="true" style="opacity: 1; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"&gt;&lt;/div&gt;</code></p>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Clone <a href="https://github.com/tenosiswono/vanilla-nextjs-dashboard">https://github.com/tenosiswono/vanilla-nextjs-dashboard</a></li>
<li>Run production</li>
<li>Login, Navigate to current route</li>
<li>Click on the notification button</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>latest</td>
</tr>
<tr>
<td>node</td>
<td>6.11.2</td>
</tr>
<tr>
<td>OS</td>
<td>heroku</td>
</tr>
<tr>
<td>browser</td>
<td>chorme</td>
</tr>
<tr>
<td>etc</td>
<td>-</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">.babelrc.js file compilation failed with next.prepare() and custom . Working with configuration inside of package.json and .babelrc file without .js extension.</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Use Custom Server next.js - <a href="https://github.com/zeit/next.js/tree/canary/examples/custom-server">https://github.com/zeit/next.js/tree/canary/examples/custom-server</a></li>
<li>npm install babel-plugin-transform-define --save</li>
<li>create .babelrc.js with this content:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.export = {
    &quot;presets&quot;: [
      &quot;next/babel&quot;
    ],
    &quot;plugins&quot;: [
      [
        &quot;transform-define&quot;,
        {
          &quot;process.env.REACT_APP_SENTRY_DSN_ADDR&quot;: &quot;TEST_URL&quot;
        }
      ]
    ]
};"><pre class="notranslate"><code class="notranslate">module.export = {
    "presets": [
      "next/babel"
    ],
    "plugins": [
      [
        "transform-define",
        {
          "process.env.REACT_APP_SENTRY_DSN_ADDR": "TEST_URL"
        }
      ]
    ]
};
</code></pre></div>
<ol start="4" dir="auto">
<li>Override global  component by creating _app.js page inside of pages directory with basic config:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'
import App, { Container } from 'next/app'

export default class MyApp extends App {
    static async getInitialProps({ Component, router, ctx }) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx)
        }

        return { pageProps }
    }

    render () {
        const { Component, pageProps } = this.props;

        return (
            &lt;Container&gt;
                &lt;Component {...pageProps} /&gt;
            &lt;/Container&gt;
        )
    }
}"><pre class="notranslate"><code class="notranslate">import React from 'react'
import App, { Container } from 'next/app'

export default class MyApp extends App {
    static async getInitialProps({ Component, router, ctx }) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx)
        }

        return { pageProps }
    }

    render () {
        const { Component, pageProps } = this.props;

        return (
            &lt;Container&gt;
                &lt;Component {...pageProps} /&gt;
            &lt;/Container&gt;
        )
    }
}
</code></pre></div>
<p dir="auto">Project structure looks like:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7398214/47289013-0d35c200-d5f9-11e8-9944-77284e57c049.png"><img src="https://user-images.githubusercontent.com/7398214/47289013-0d35c200-d5f9-11e8-9944-77284e57c049.png" alt="image" style="max-width: 100%;"></a></p>
<ol start="5" dir="auto">
<li>npm run dev - shows errors with _app.js file compilation.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7398214/47288980-e7102200-d5f8-11e8-9671-acf9d30f5974.png"><img src="https://user-images.githubusercontent.com/7398214/47288980-e7102200-d5f8-11e8-9671-acf9d30f5974.png" alt="image" style="max-width: 100%;"></a></li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Compile _app.js file with .babelrc.js configuration</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows</li>
</ul>
<blockquote>
</blockquote>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;babel-plugin-transform-define&quot;: &quot;^1.3.0&quot;,
&quot;next&quot;: &quot;^7.0.2&quot;,
&quot;react&quot;: &quot;^16.5.2&quot;,
&quot;react-dom&quot;: &quot;^16.5.2&quot;"><pre class="notranslate"><code class="notranslate">"babel-plugin-transform-define": "^1.3.0",
"next": "^7.0.2",
"react": "^16.5.2",
"react-dom": "^16.5.2"
</code></pre></div>
<h2 dir="auto">Additionally</h2>
<p dir="auto">Fun fact is everything works correctly when I change .babelrc.js file to .babelrc without js inside, with pure json. Imposibru!</p>