kit
kit copied to clipboard
`html-minifier` library causes adapter-node to break
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
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 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
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;
};