Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

The closest issue that I can find was #2371 but unable to work from there

Expected Behavior

using const loadImage = await import('blueimp-load-image') should fetch the webpack chunk in production build

Current Behavior

The call to fetch the chunk in production deployment returns 404 while local deployment works fine

https://domain/_next/48d02763-8622-4655-ae45-226f36715589/chunks/blueimp_load_image_3860c75d466ce5695b350eef852ffc5a.js results in 404

Steps to Reproduce (for bugs)

The next.config.js setup is

// @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;
}
};

When using an import statement in the client side like

const loadImage = await import('blueimp-load-image');

The chunk is not picked up correctly in production builds

Tried to fix the problem by using dynamic modules of nextjs to go around the issue.Tried wrapping dynamic around the import

const loadImage = dynamic(import('blueimp-load-image'));

but on using the loadImage function it says

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 (<anonymous>)
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)

Am i possibly not using it right for loading pure libraries and not React.Components like in the examples

Context

I am trying to load the blueimp-load-image (https://github.com/blueimp/JavaScript-Load-Image) 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.

Your Environment

Tech
Version

next
^3.0.6

node
v7.10.0

OS
Linux 4.4.64+ x86_64 GNU/Linux

browser
Chrome

etc
using yarn as the build tool and webpack for bundling

Issue 2:
It turns out apollo integration is much easier when using apollo-client directly instead of react-apollo.

Here's the code: https://github.com/nmaro/apollo-next-example

And here's a running version (at least for as long as I keep the graphql server online): https://apollo-next-example-oslkzaynhp.now.sh

The relevant details are here:

apollo.js

import ApolloClient, {createNetworkInterface} from 'apollo-client'

export default new ApolloClient({
networkInterface: createNetworkInterface({
uri: GRAPHQL_URL
})
})

then in a page

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() {
...
}
}