kit icon indicating copy to clipboard operation
kit copied to clipboard

`html-minifier` library causes adapter-node to break

Open lubiah opened this issue 3 years ago • 3 comments

Describe the bug

The docs provide a way which you can use to minify the HTML that is rendered. However, if you use that method, it breaks adapter-node.

This is the error output

    require.resolve("../lib/utils.js"),
            ^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Projects\kudadam\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///C:/Projects/kudadam/build/server/chunks/server-b56e4b54.js:24606:6
    at file:///C:/Projects/kudadam/build/server/chunks/server-b56e4b54.js:24713:3
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async Server.init (file:///C:/Projects/kudadam/build/server/index.js:3183:22)
    at async file:///C:/Projects/kudadam/build/handler.js:18886:1

Reproduction

I have made a repo with the bug: Repo Link

Logs

require.resolve("../lib/utils.js"),
            ^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Projects\kudadam\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///C:/Projects/kudadam/build/server/chunks/server-b56e4b54.js:24606:6
    at file:///C:/Projects/kudadam/build/server/chunks/server-b56e4b54.js:24713:3
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async Server.init (file:///C:/Projects/kudadam/build/server/index.js:3183:22)
    at async file:///C:/Projects/kudadam/build/handler.js:18886:1

System Info

$ pnpx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"
.../Local/pnpm/store/v3/tmp/dlx-3476     |   +1 +
.../Local/pnpm/store/v3/tmp/dlx-3476     | Progress: resolved 1, reused 1, downloaded 0, added 1, done

  System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz
    Memory: 860.15 MB / 7.91 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.42)
  npmPackages:
    @sveltejs/adapter-node: 1.0.0-next.104 => 1.0.0-next.104
    @sveltejs/kit: next => 1.0.0-next.581
    svelte: ^3.54.0 => 3.54.0
    vite: ^4.0.0 => 4.0.0

Severity

blocking an upgrade

Additional Information

No response

lubiah avatar Dec 10 '22 00:12 lubiah

Does it work if you make html-minifier a prod dependency so the build doesn't try to bundle it? If it does, we should probably add that to the docs, because it's likely to be a pain to get whatever this is doing to bundle correctly.

Conduitry avatar Dec 10 '22 00:12 Conduitry

@Conduitry The error doesn't occur if html-minifier is added as a dependency. It needs to be clearly stated in the docs as it really took long before I found the source

lubiah avatar Dec 10 '22 18:12 lubiah

I have found a solution. html-minifier can be installed as a dev dependency too.

This is how the code should be.

import { building } from "$app/environment";


const minification_options = {
	collapseBooleanAttributes: true,
	collapseWhitespace: true,
	conservativeCollapse: true,
	decodeEntities: true,
	html5: true,
	ignoreCustomComments: [/^#/],
	minifyCSS: true,
	minifyJS: false,
	removeAttributeQuotes: true,
	removeComments: false, // some hydration code needs comments, so leave them in
	removeOptionalTags: true,
	removeRedundantAttributes: true,
	removeScriptTypeAttributes: true,
	removeStyleLinkTypeAttributes: true,
	sortAttributes: true,
	sortClassName: true
};

/**@type {import("@sveltejs/kit").Handle} */
export const handle = async ({ resolve, event }) => {
	const response = await resolve(event);

	if (response.headers.get("Content-Type") === "text/html" && building) {
		let minify =  (await import("html-minifier")).minify
		return new Response(minify(await response.text(), minification_options), {
			status: response.status,
			headers: response.headers
		});
	}

	return response;
};

lubiah avatar Dec 23 '22 08:12 lubiah