0

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:

  1. How do I get rid of the errors?
  2. 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?
Trylks
  • 1,458
  • 2
  • 18
  • 31
  • Also curious: Am I doing something fundamentally wrong? (other than the choice of languages, I know they are not popular). – Trylks Apr 20 '23 at 13:48

0 Answers0