<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.<br>
The closest issue that I can find was <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="238680362" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2371" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2371/hovercard" href="https://github.com/vercel/next.js/issues/2371">#2371</a> but unable to work from there</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">using <code class="notranslate">const loadImage = await import('blueimp-load-image')</code> should fetch the webpack chunk in production build</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The call to fetch the chunk in production deployment returns 404 while local deployment works fine<br>
<code class="notranslate">https://domain/_next/48d02763-8622-4655-ae45-226f36715589/chunks/blueimp_load_image_3860c75d466ce5695b350eef852ffc5a.js</code> results in 404</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>The next.config.js setup is</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// @flow
const {ANALYZE} = process.env;
const {BUILD} = process.env;

const cssLoader = BUILD ? './scripts/empty-string-loader.js' : 'raw-loader';

module.exports = {
  poweredByHeader: false,
  webpack: function(config /* : any */) {
    const oldEntry = config.entry;
    config.entry = function() {
      return oldEntry().then(function(entries) {
        entries['main.js'].unshift('./src/browser/framework/polyfills');
        return entries;
      });
    };

    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      },
      {
        test: /\.css$/,
        use: ['babel-loader', cssLoader, 'postcss-loader']
      }
    );

    if (ANALYZE) {
      const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'server',
          analyzerPort: 8888,
          openAnalyzer: true
        })
      );
    }

    return config;
  }
};
"><pre class="notranslate"><code class="notranslate">// @flow
const {ANALYZE} = process.env;
const {BUILD} = process.env;

const cssLoader = BUILD ? './scripts/empty-string-loader.js' : 'raw-loader';

module.exports = {
  poweredByHeader: false,
  webpack: function(config /* : any */) {
    const oldEntry = config.entry;
    config.entry = function() {
      return oldEntry().then(function(entries) {
        entries['main.js'].unshift('./src/browser/framework/polyfills');
        return entries;
      });
    };

    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      },
      {
        test: /\.css$/,
        use: ['babel-loader', cssLoader, 'postcss-loader']
      }
    );

    if (ANALYZE) {
      const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'server',
          analyzerPort: 8888,
          openAnalyzer: true
        })
      );
    }

    return config;
  }
};

</code></pre></div>
<ol start="2" dir="auto">
<li>When using an import statement in the client side like<br>
<code class="notranslate">const loadImage = await import('blueimp-load-image');</code><br>
The chunk is not picked up correctly in production builds</li>
<li>Tried to fix the problem by using dynamic modules of nextjs to go around the issue.Tried wrapping dynamic around the import<br>
<code class="notranslate">const loadImage = dynamic(import('blueimp-load-image'));</code><br>
but on using the loadImage function it says</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Cannot call a class as a function
    at module.exports.exports.default (http://localhost:3000/_next/1512521002870/main.js:1548:11)
    at DynamicComponent (http://localhost:3000/_next/1512521002870/page/home:19263:36)
    at http://localhost:3000/_next/1512521002870/page/home:54452:15
    at new Promise (&lt;anonymous&gt;)
    at new F (http://localhost:3000/_next/1512521002870/main.js:252:28)
    at _callee$ (http://localhost:3000/_next/1512521002870/page/home:54451:46)
    at tryCatch (http://localhost:3000/_next/1512521002870/main.js:12367:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/_next/1512521002870/main.js:12605:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/_next/1512521002870/main.js:12419:21)
    at step (http://localhost:3000/_next/1512521002870/main.js:9162:30)"><pre class="notranslate"><code class="notranslate">TypeError: Cannot call a class as a function
    at module.exports.exports.default (http://localhost:3000/_next/1512521002870/main.js:1548:11)
    at DynamicComponent (http://localhost:3000/_next/1512521002870/page/home:19263:36)
    at http://localhost:3000/_next/1512521002870/page/home:54452:15
    at new Promise (&lt;anonymous&gt;)
    at new F (http://localhost:3000/_next/1512521002870/main.js:252:28)
    at _callee$ (http://localhost:3000/_next/1512521002870/page/home:54451:46)
    at tryCatch (http://localhost:3000/_next/1512521002870/main.js:12367:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/_next/1512521002870/main.js:12605:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/_next/1512521002870/main.js:12419:21)
    at step (http://localhost:3000/_next/1512521002870/main.js:9162:30)
</code></pre></div>
<p dir="auto">Am i possibly not using it right for loading pure libraries and not React.Components like in the examples</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to load the blueimp-load-image (<a href="https://github.com/blueimp/JavaScript-Load-Image">https://github.com/blueimp/JavaScript-Load-Image</a>) module in the browser only when its needed to avoid sending down the library during every page load. Performance is a big concern and causes about a 10% increase in first data sent to render.</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>^3.0.6</td>
</tr>
<tr>
<td>node</td>
<td>v7.10.0</td>
</tr>
<tr>
<td>OS</td>
<td>Linux 4.4.64+ x86_64 GNU/Linux</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td>using yarn as the build tool and webpack for bundling</td>
</tr>
</tbody>
</table>
<p dir="auto">It turns out apollo integration is much easier when using apollo-client directly instead of react-apollo.</p>
<p dir="auto">Here's the code: <a href="https://github.com/nmaro/apollo-next-example">https://github.com/nmaro/apollo-next-example</a><br>
And here's a running version (at least for as long as I keep the graphql server online): <a href="https://apollo-next-example-oslkzaynhp.now.sh" rel="nofollow">https://apollo-next-example-oslkzaynhp.now.sh</a></p>
<p dir="auto">The relevant details are here:</p>
<p dir="auto">apollo.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import ApolloClient, {createNetworkInterface} from 'apollo-client'

export default new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: GRAPHQL_URL
  })
})"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">ApolloClient</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-s1">createNetworkInterface</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'apollo-client'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">new</span> <span class="pl-v">ApolloClient</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">networkInterface</span>: <span class="pl-en">createNetworkInterface</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">uri</span>: <span class="pl-c1">GRAPHQL_URL</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">then in a page</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import gql from 'graphql-tag'
import 'isomorphic-fetch'
import apollo from '../apollo'
import Link from 'next/link'

const query = gql`query {
  posts {
    _id
  	title
  }
}`
export default class extends React.Component {
  static async getInitialProps({req}) {
    return await apollo.query({
      query,
    })
  }
  render() {
	...
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-s1">gql</span> <span class="pl-k">from</span> <span class="pl-s">'graphql-tag'</span>
<span class="pl-k">import</span> <span class="pl-s">'isomorphic-fetch'</span>
<span class="pl-k">import</span> <span class="pl-s1">apollo</span> <span class="pl-k">from</span> <span class="pl-s">'../apollo'</span>
<span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">'next/link'</span>

<span class="pl-k">const</span> <span class="pl-s1">query</span> <span class="pl-c1">=</span> <span class="pl-en">gql</span><span class="pl-s">`query {</span>
<span class="pl-s">  posts {</span>
<span class="pl-s">    _id</span>
<span class="pl-s">  	title</span>
<span class="pl-s">  }</span>
<span class="pl-s">}`</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-k">async</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">{</span>req<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-k">await</span> <span class="pl-s1">apollo</span><span class="pl-kos">.</span><span class="pl-en">query</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      query<span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	...
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>