How to resolve: "Uncaught ReferenceError: require$$0 is not defined" in svelte in vs code extension development

Question

I am creating vs code extension using svelte. I followed this to understand some basics of svelte. I am currently stuck with the error Uncaught ReferenceError: require$$0 is not defined. This error shows inside an automatically created file, named sidebar.js (created in "project"/out/compiled folder) when I import import * as fs from "fs"; and use this fs to read a file existing in the local machine. Below is the file structure of this project -

I am also getting a warning in my npm run watch when I try to import this fs in Sidebar.svelte (full code below) which is-

What I want to do here is- I want to load the file LoadedProjLocations.json into the file Sidebar.svelte. For that, I need fs and I am facing an error with importing this.

Below is the file Sidebar.svelte

<script type="text/javascript">
    import Folder from "./Folder.svelte";
    import * as fs from "fs";

    var dirStruct = fs.readFile(
        getCWD(__dirname) + path.join("/") + "LoadedProjLocations.json"
    );

    console.log(dirStruct)

    function getCWD(path) {
        var res = "";
        for (let i = path.length - 1; i >= 0; i--) {
            const ch = path[i];
            if (ch == "/" || ch == "\\") {
                res = path.slice(0, i);
                break;
            }
        }
        return res;
    }
</script>

<Folder name="Home" children={root} expanded />

Following is tsconfig.json file (from "project"/webviews/tsconfig.json):

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": [
        "./**/*",
        "../src/*"
    ],
    "exclude": [
        "../node_modules/*"
    ],
    "compilerOptions": {
        "strict": true,
        "types": [
            "node",
            "svelte",
        ],
    }
}

Below is tsconfig.json file (from "project"/tsconfig.json)

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "outDir": "out",
        "lib": [
            "es6"
        ],
        "sourceMap": true,
        "rootDir": "src",
        "strict": true  
    },
    "exclude": [
        "node_modules",
        ".vscode-test",
        "webviews"
    ]
}

Below is rollup.config.js file-

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import sveltePreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
import path from "path";
import fs from "fs";
import postcss from "rollup-plugin-postcss";

const production = !process.env.ROLLUP_WATCH;

export default fs
  .readdirSync(path.join(__dirname, "webviews", "pages"))
  .map((input) => {
    const name = input.split(".")[0];
    return {
      input: "webviews/pages/" + input,
      output: {
        sourcemap: true,
        format: "iife",
        name: "app",
        file: "out/compiled/" + name + ".js",
      },
      plugins: [
        svelte({
          // enable run-time checks when not in production
          dev: !production,
          // we'll extract any component CSS out into
          // a separate file - better for performance
          css: (css) => {
            css.write(name + ".css");
          },
          preprocess: sveltePreprocess(),
        }),

        postcss({
          extract: true,
          sourceMap: true,
          extract: path.resolve("out/compiled/" + name + ".css")
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
          browser: true,
          dedupe: ["svelte"],
        }),
        commonjs(),
        typescript({
          tsconfig: "webviews/tsconfig.json",
          sourceMap: !production,
          inlineSources: !production,
        }),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        // !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        // !production && livereload("public"),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser(),
      ],
      watch: {
        clearScreen: false,
      },
    };
  });

Below are the package.json dependencies-

"scripts": {
        "vscode:prepublish": "npm run package",
        "compile": "webpack",
        "watch": "concurrently \"rollup -c -w\" \"webpack --watch\"",
        "package": "webpack --mode production --devtool hidden-source-map",
        "test-compile": "tsc -p ./",
        "test-watch": "tsc -watch -p ./",
        "pretest": "npm run test-compile && npm run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@rollup/plugin-commonjs": "^19.0.2",
        "@rollup/plugin-node-resolve": "^13.0.4",
        "@rollup/plugin-typescript": "^8.2.3",
        "@tsconfig/svelte": "^2.0.1",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.2.2",
        "@types/node": "14.x",
        "@types/vscode": "^1.58.0",
        "@typescript-eslint/eslint-plugin": "^4.26.0",
        "@typescript-eslint/parser": "^4.26.0",
        "concurrently": "^6.2.0",
        "directory-tree": "^2.2.9",
        "eslint": "^7.27.0",
        "glob": "^7.1.7",
        "mocha": "^8.4.0",
        "postcss": "^8.3.6",
        "rollup": "^2.54.0",
        "rollup-plugin-postcss": "^4.0.0",
        "rollup-plugin-svelte": "^7.1.0",
        "rollup-plugin-terser": "^7.0.2",
        "svelte": "^3.40.3",
        "svelte-check": "^2.2.3",
        "svelte-preprocess": "^4.7.4",
        "ts-loader": "^9.2.2",
        "typescript": "^4.3.2",
        "vscode-test": "^1.5.2",
        "webpack": "^5.38.1",
        "webpack-cli": "^4.7.0"
    }

Answer 1

fs can only be used server side, not client side, so you cannot use it in svelte components.

If you want to load a json file, use rollup/plugin-json it allows you to simply do import data from './data.json';