<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When using <code class="notranslate">_app.js</code> page for common stuff (like creating redux store) - these libraries are duplicated between pages.</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Checkout  <a href="https://github.com/cherniavskii/nextjs-app-code-splitting-reproduction">https://github.com/cherniavskii/nextjs-app-code-splitting-reproduction</a> locally</li>
<li>Run <code class="notranslate">npm install</code></li>
<li>Run <code class="notranslate">npm run analyze</code></li>
<li>See bundle analyzer report</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto"><code class="notranslate">redux</code> and <code class="notranslate">react-redux</code> are bundled once.</p>
<h2 dir="auto">Actual behaviour:</h2>
<p dir="auto"><code class="notranslate">redux</code> and <code class="notranslate">react-redux</code> are bundled many times - once in <code class="notranslate">_app.js</code> and in every page which is connected with Redux (<code class="notranslate">index.js</code> and <code class="notranslate">home.js</code>)</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13808724/42033681-4af62666-7ae6-11e8-9fac-048a920c5819.png"><img src="https://user-images.githubusercontent.com/13808724/42033681-4af62666-7ae6-11e8-9fac-048a920c5819.png" alt="next-code-splitting" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows</li>
<li>Browser (if applies) N/A</li>
<li>Version of Next.js: 6.1.0</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">This app contains 6 pages:</p>
<ul dir="auto">
<li>
<p dir="auto"><code class="notranslate">_app.js</code> - initializes redux store</p>
</li>
<li>
<p dir="auto"><code class="notranslate">index.js</code> - connects with redux store</p>
</li>
<li>
<p dir="auto"><code class="notranslate">home.js</code> - connects with redux store</p>
</li>
<li>
<p dir="auto"><code class="notranslate">about.js</code> - renders single element, doesn't connect with redux</p>
</li>
<li>
<p dir="auto"><code class="notranslate">contacts.js</code> - renders single element, doesn't connect with redux</p>
</li>
<li>
<p dir="auto"><code class="notranslate">offer.js</code> - renders single element, doesn't connect with redux</p>
</li>
</ul>
<p dir="auto">This issue reproduces only when most of pages aren't connected with Redux (that's the way how code splitting works in Next.js).</p>
<p dir="auto">But IMHO <code class="notranslate">_app.js</code> bundle should be treated like the "second <code class="notranslate">main</code>" bundle - since every page is wrapped in <code class="notranslate">_app</code> page.<br>
There's no sense to duplicate libraries bundled in <code class="notranslate">_app</code>, since <code class="notranslate">_app</code> is always loaded</p>
<p dir="auto">When running next.js on top of Docker with express my app is not hot reloading. It hot reloads without Docker as expected.</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>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The app should hot reload.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The app is not hot reloading, nor does the page reflect changes after I manually refresh the page.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Command:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ docker run -p 3000:3000 betterpt/patientapp-dev-nextjs:latest"><pre class="notranslate"><code class="notranslate">$ docker run -p 3000:3000 betterpt/patientapp-dev-nextjs:latest
</code></pre></div>
<p dir="auto">Contents of my <code class="notranslate">Dockerfile</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="FROM node:alpine

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY . /usr/src/app
RUN npm install

EXPOSE 3000

CMD [ &quot;npm&quot;, &quot;run&quot;, &quot;dev&quot; ]"><pre class="notranslate"><code class="notranslate">FROM node:alpine

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY . /usr/src/app
RUN npm install

EXPOSE 3000

CMD [ "npm", "run", "dev" ]
</code></pre></div>
<p dir="auto">Contents of my <code class="notranslate">server.js</code> file:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const express = require('express');
const next = require('next');
const webpack = require('webpack');
// const remotedev = require('remotedev-server');
const routes = require('./dist/routes');
const { parse } = require('url');
const minifyJsPlugin = require('babel-minify-webpack-plugin');

const env = process.env.NODE_ENV || 'development';

const app = next({
  dev: env === 'development',
  dir: `${__dirname}/dist`,
  conf: {
    webpack: function(config) {
      return {
        ...config,
        externals: {
          'mapbox-gl': 'mapboxgl',
        },
      };
    },
    webpackDevMiddleware: (config) =&gt; {
      config.watchOptions = {
        poll: 1000,
        aggregateTimeout: 300,
      };
      return config
    }
  },
});

const handler = routes.getRequestHandler(app);

const PORT = 3000;
console.log(PORT);

app
  .prepare()
  .then(() =&gt; {
    express()
      .get('*', (req, res, next) =&gt; {
        if (req.url === '/robots.txt') {
          return res.sendFile(`${__dirname}/dist/static/robots.txt`);
        }
        if (req.url === '/video-sitemap.xml') {
          return res.sendFile(`${__dirname}/dist/static/video-sitemap.xml`);
        }
        if (req.url === '/sitemap.xml') {
          return res.sendFile(`${__dirname}/dist/static/sitemap.xml`);
        }
        next();
      })
      .use(handler)
      .listen(PORT);
  })
  .catch(ex =&gt; {
    console.error(ex.stack);
    process.exit(1);
  });"><pre class="notranslate"><code class="notranslate">const express = require('express');
const next = require('next');
const webpack = require('webpack');
// const remotedev = require('remotedev-server');
const routes = require('./dist/routes');
const { parse } = require('url');
const minifyJsPlugin = require('babel-minify-webpack-plugin');

const env = process.env.NODE_ENV || 'development';

const app = next({
  dev: env === 'development',
  dir: `${__dirname}/dist`,
  conf: {
    webpack: function(config) {
      return {
        ...config,
        externals: {
          'mapbox-gl': 'mapboxgl',
        },
      };
    },
    webpackDevMiddleware: (config) =&gt; {
      config.watchOptions = {
        poll: 1000,
        aggregateTimeout: 300,
      };
      return config
    }
  },
});

const handler = routes.getRequestHandler(app);

const PORT = 3000;
console.log(PORT);

app
  .prepare()
  .then(() =&gt; {
    express()
      .get('*', (req, res, next) =&gt; {
        if (req.url === '/robots.txt') {
          return res.sendFile(`${__dirname}/dist/static/robots.txt`);
        }
        if (req.url === '/video-sitemap.xml') {
          return res.sendFile(`${__dirname}/dist/static/video-sitemap.xml`);
        }
        if (req.url === '/sitemap.xml') {
          return res.sendFile(`${__dirname}/dist/static/sitemap.xml`);
        }
        next();
      })
      .use(handler)
      .listen(PORT);
  })
  .catch(ex =&gt; {
    console.error(ex.stack);
    process.exit(1);
  });
</code></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">I am unable to run a development environment with Docker.</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>4.0</td>
</tr>
<tr>
<td>node</td>
<td>8.40</td>
</tr>
<tr>
<td>OS</td>
<td>macOS High Sierra</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>