Unknown file extension ".svelte" error

[digitaldrreamer]

I keep getting this error:

All I did was use the example code on a test sveltekit route:

<script>
  import FormEditor from "@fouita/form-editor"
  // you can create a button to toggle the editable variable
  let editable = true
  // initial form schema needed
  let form =  {
    "name": "My Form",
    "version": "1",
    "steps": [{
        "index": 0,
        "props": {
            "previousBtn": "Back",
            "nextBtn": "Next"
        },
        "inputs": [    
        ]
    }]
  }
  const settings = {
	  textColor: "250 250 250",
	  bgColor: "0 0 0",
	  outlineColor: "165 180 252",
	  buttonBgColor: "79 70 229",
	  buttonTextColor: "255 255 255",
	  borderColor: "200 200 200",
	  form: form,
	  rounded: "rounded-none",
	  size: "full",
	  rtl: false,
	  transparent: false,
	  btnsPosition: "start", // start, end, center
  }
  // get updated data
  $: if(form) {
    // form is updated
  }
  function handleSubmit(evt) {
    // send data to your server
  }
</script>
<FormEditor bind:form {editable} {...settings} on:submit={handleSubmit} />

Help will be greatly appreciated.

Full error:

|- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for C:\Users\user\Documents\Github\SvelteKit\Goremote Africa\main\node_modules\@fouita\form-editor\src\App.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:403:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:45)
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for C:\Users\user\Documents\Github\SvelteKit\Goremote Africa\main\node_modules\@fouita\form-editor\src\App.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:403:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:45)