I am doing SSG with SvelteKit, I am using CoffeeScript, and Pug.
For a MWE, I have the following content.yaml
- title: Home
link: /
- title: Services
link: /services
- title: Contact
link: /contact
I have a utils.coffee
file to read that file and put it into a variable.
import { load } from 'js-yaml'
import {readFileSync as readFile} from 'fs'
dotry = (function_, alternative) ->
try
do function_
catch error
console.error error
alternative
export contents = dotry (-> load readFile 'contents.yaml', 'utf-8'), []
Then I use it in the component Navigation.svelte
:
<script lang="coffee">
import { contents } from './utils.coffee'
</script>
<template>
+each('contents as {link, title}')
a(href="link") {title}
</template>
There is some styling, but that is an MWE.
For configuration, I have:
+layout.coffee
in the root folder. You may thing CoffeeScript is a problem, I get the same results converting this file to JavaScript.
export prerender = on
svelte.config.js
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';
const config = {
kit: { adapter: adapter() },
preprocess: [preprocess({ coffeescript: { bare: true }, markupTagName: "template" })]
};
export default config;
- And
vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import coffee from 'vite-plugin-coffee';
export default defineConfig({
plugins: [sveltekit(), coffee({ jsx: true })],
test: { include: ['src/**/*.{test,spec}.{js,ts}'] }
});
Miraculously, everything works. But when running it with yarn run dev
and opening the page, in the console I see several errors:
app.js:16 Error: Module "fs" has been externalized for browser compatibility. Cannot access "fs.readFileSync" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
at Object.get (__vite-browser-external:fs:3:11)
at utils.coffee?import:3:108
handleError @ app.js:16
handle_error @ client.js?v=bb9d47a9:1339
_hydrate @ client.js?v=bb9d47a9:1791
await in _hydrate (async)
start @ start.js:22
(anonymous) @ (index):35
Promise.then (async)
(anonymous) @ (index):34
__vite-browser-external:fs:3 Uncaught (in promise) Error: Module "fs" has been externalized for browser compatibility. Cannot access "fs.readFileSync" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
at Object.get (__vite-browser-external:fs:3:11)
at utils.coffee?import:3:108
get @ __vite-browser-external:fs:3
(anonymous) @ utils.coffee?import:3
start.js:28 Uncaught (in promise) Error: Module "fs" has been externalized for browser compatibility. Cannot access "fs.readFileSync" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
at Object.get (__vite-browser-external:fs:3:11)
at utils.coffee?import:3:108
(the line numbers may not represent exactly the lines here)
I have several questions:
- How do I get rid of the errors?
- I would expect some kind of optimization and hydration so that this JavaScript (reading the YAML file) does not even make it to the frontend. Is that kind of optimization only done for the build and not dev? May I test it in any way?