LiveSvelte Importing Modules when using typescript: Transition is not defined

Phoenix Forum Questions / Help
, ,
1

Hi guys,

I’ve been trying to use LiveSvelte but for some reason when I use lang=“ts” it says that Transition is not defined. But when I remove the lang=“ts”, it can find seem to find it and everything works fine. The weird thing is, it has no problem with svelte-headlessui. I used npm install --save-dev typescript inside the assets folder.

  import {createDisclosure} from 'svelte-headlessui'
  import {createMenu} from 'svelte-headlessui'
  import Transition from 'svelte-transition'

any pointers?

2

you need to add “verbatimModuleSyntax”: true in your tsconfig.json. That resolved it for me

{
    "compilerOptions": {
        "types": ["node"],
        "baseUrl": ".",
        "paths": {
            "$lib": ["svelte"],
            "$lib/*": ["svelte/*"]
        },
        "verbatimModuleSyntax": true
    }
}
1 Like