Next.js: Bundling Next.JS into a single file for Cloudflare Workers

[stefanfransen]

Hi for my use-case I'm trying to run Next.JS on Cloudflare's serverless platform, Cloudflare Workers.

Pros of this platform:
Cheap (5$ monthly)
Distributes code to all Cloudflare pop's.
No boot time like Lambda

Cons
Cloudflare Workers only supports single JS files.

An interesting blog post about using Webpack to produce a single JS file:
https://blog.cloudflare.com/using-webpack-to-bundle-workers/

I tried the following Webpack config

const path = require('path')

module.exports = {
  webpack: (config, {}) => {
    config.output = {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist'),
    }

    return config
  }
}

But this produces the following error

> Failed to build
{ Error: (client) chunk static/runtime/main.js [initial]
bundle.js
Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 2)
    at /Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/next/dist/build/index.js:144:31
    at finalCallback (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/MultiCompiler.js:247:12)
    at runWithDependencies.err (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/MultiCompiler.js:270:6)
    at done (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/neo-async/async.js:2928:13)
    at runCompilers (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/MultiCompiler.js:174:48)
    at err (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/MultiCompiler.js:181:7)
    at compiler.run (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/MultiCompiler.js:263:7)
    at finalCallback (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/Compiler.js:204:39)
    at hooks.done.callAsync.err (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/Compiler.js:220:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:33:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/Compiler.js:218:21)
    at hooks.afterCompile.callAsync.err (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/Compiler.js:547:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/Users/stefanfransen/Documents/Development/Node/custom-server-express-app/node_modules/webpack/lib/Compiler.js:544:30)
  errors:
   [ '(client) chunk static/runtime/main.js [initial]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 2)',
     '(client) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/a.js [initial]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 9)',
     '(client) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/b.js [initial]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 10)',
     '(client) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/index.js [initial]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 11)',
     '(client) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/posts.js [initial]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 12)',
     '(client) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/_app.js [initial]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 13)',
     '(client) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/_error.js [initial]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 1 and 14)',
     '(server) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/b.js [entry]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 7 and 8)',
     '(server) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/index.js [entry]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 7 and 9)',
     '(server) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/posts.js [entry]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 7 and 10)',
     '(server) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/_app.js [entry]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 7 and 11)',
     '(server) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/_error.js [entry]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 7 and 12)',
     '(server) chunk static/YMQ6eziLKZxn8FCRKb9Z_/pages/_document.js [entry]\nbundle.js\nConflict: Multiple chunks emit assets to the same filename bundle.js (chunks 7 and 13)' ],

Would it be possible to make Next.JS/Webpack produce a single JS file?

Thanks.
Stefan Fransen

[timneutkens]

Please follow the issue template for any issues created.

[timneutkens]

config.output = {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist'),
    }

Overriding the config like this is not going to work because of the way Next.js is architectured.

We're planning to output serverless functions very soon.

[timneutkens]

Solved in #5927

[terribleplan]

This is not currently solved well for CloudFlare Workers specifically, see #6282