ESM support: allow usage in "type": "module" packages (#1800)

Author: benmccann

package-lock.json

@@ -36,7 +36,7 @@
     "@types/mocha": "^8.0.0",
     "@types/node": "^10.0.0",
     "@types/node-fetch": "^2.5.7",
-    "@types/puppeteer": "^3.0.1",
+    "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
     "cheap-watch": "^1.0.4",
@@ -55,7 +55,7 @@
     "polka": "^0.5.2",
     "port-authority": "^1.0.5",
     "pretty-bytes": "^5.3.0",
-    "puppeteer": "^5.0.0",
+    "puppeteer": "^10.4.0",
     "require-relative": "^0.8.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.29.0",

package.json

@@ -5,6 +5,7 @@ import colors from 'kleur';
 import * as pkg from '../package.json';
 import { elapsed, repeat, left_pad, format_milliseconds } from './utils';
 import { InvalidEvent, ErrorEvent, FatalEvent, BuildEvent, ReadyEvent } from './interfaces';
+import { module } from './config/env';
 
 const prog = sade('sapper').version(pkg.version);
 
@@ -172,14 +173,17 @@ prog.command('build [dest]')
 			await _build(opts.bundler, opts.legacy, opts.cwd, opts.src, opts.routes, opts.output, dest, opts.ext);
 
 			const launcher = path.resolve(dest, 'index.js');
+			const import_statement = module
+				? "import './server/server.js';"
+				: "require('./server/server.js');";
 
 			fs.writeFileSync(launcher, `
 				// generated by sapper build at ${new Date().toISOString()}
 				process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 				process.env.PORT = process.env.PORT || ${opts.port || 3000};
 
 				console.log('Starting server on port ' + process.env.PORT);
-				require('./server/server.js');
+				${import_statement}
 			`.replace(/^\t+/gm, '').trim());
 
 			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold().cyan(`node ${dest}`)} to run the app.`);

src/cli.ts

@@ -1,7 +1,9 @@
 export let dev: boolean;
 export let src: string;
 export let dest: string;
+export let module: boolean;
 
 export const set_dev = (_: boolean) => dev = _;
 export const set_src = (_: string) => src = _;
 export const set_dest = (_: string) => dest = _;
+export const set_module = (_: boolean) => module = _;

src/config/env.ts

@@ -1,4 +1,4 @@
-import { dev, src, dest } from './env';
+import { dev, src, dest, module } from './env';
 import { InputOption, OutputOptions } from 'rollup';
 
 const sourcemap = dev ? 'inline' : false;
@@ -35,7 +35,7 @@ export default {
 		output: (): OutputOptions => {
 			return {
 				dir: `${dest}/server`,
-				format: 'cjs',
+				format: module ? 'esm' : 'cjs',
 				sourcemap
 			};
 		}

src/config/rollup.ts

@@ -1,7 +1,8 @@
+import * as fs from 'fs';
 import * as path from 'path';
 import RollupCompiler from './RollupCompiler';
 import { WebpackCompiler } from './WebpackCompiler';
-import { set_dev, set_src, set_dest } from '../../config/env';
+import { set_dev, set_src, set_dest, set_module } from '../../config/env';
 
 export type Compiler = RollupCompiler | WebpackCompiler;
 
@@ -22,6 +23,11 @@ export default async function create_compilers(
 	set_dev(dev);
 	set_src(src);
 	set_dest(dest);
+	try {
+		set_module(JSON.parse(fs.readFileSync(path.resolve(cwd, 'package.json'), 'utf-8')).type === 'module');
+	} catch (err) {
+		set_module(false);
+	}
 
 	if (bundler === 'rollup') {
 		const config = await RollupCompiler.load_config(cwd);

src/core/create_compilers/index.ts

@@ -109,13 +109,13 @@ export class AppRunner {
 			const pending: Set<string> = new Set();
 			let done = false;
 
-			function handle_request(request: puppeteer.Request) {
+			function handle_request(request: puppeteer.HTTPRequest) {
 				const url = request.url();
 				requests.push(url);
 				pending.add(url);
 			}
 
-			function handle_requestfinished(request: puppeteer.Request) {
+			function handle_requestfinished(request: puppeteer.HTTPRequest) {
 				const url = request.url();
 				pending.delete(url);
 
@@ -125,7 +125,7 @@ export class AppRunner {
 				}
 			}
 
-			function handle_requestfailed(request: puppeteer.Request) {
+			function handle_requestfailed(request: puppeteer.HTTPRequest) {
 				cleanup();
 				reject(new Error(`failed to fetch ${request.url()}`));
 			}
@@ -151,7 +151,7 @@ export class AppRunner {
 		});
 	}
 
-	async intercept_requests(interceptor: (request: puppeteer.Request) => void, fn: () => any): Promise<void> {
+	async intercept_requests(interceptor: (request: puppeteer.HTTPRequest) => void, fn: () => any): Promise<void> {
 		const unique_interceptor = request => interceptor(request);
 
 		this.page.on('request', unique_interceptor);

test/apps/AppRunner.ts

@@ -83,7 +83,7 @@ describe('redirects', function() {
 		);
 	});
 
-	const interceptor = (request: puppeteer.Request) => {
+	const interceptor = (request: puppeteer.HTTPRequest) => {
 		if (/example\.com/.test(request.url())) {
 			request.respond({
 				status: 200,