Cannot import UI frameworks like sveltestrap or svelte-material-UI

[ksallee]

I tried to add any kind of prebuilt components to test plenti (svelte material ui, sveltestrap, anything really). I tried their examples by putting their sample code from their docs in /layout/content/index.svelte, and since I was having errors, I tried a bunch of syntaxes for import statements like:

import {Foo} from 'bar';
import Foo from 'bar';
import Foo from 'bar/src';

I also tried to install as dependency and devDependency.

I keep getting errors, the most frequent being: SyntaxError: Cannot use import statement outside a module I also get: <SOME_COMPONENT_I_IMPORT> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

any idea what I'm doing wrong?

[jimafisk]

Thanks for identifying this, it's a shortcoming of how the project is currently set up. To make the build faster we're not bundling anything, but that means we have to manually run the svelte compiler on components in the layout/ directory. Currently the imported components from npm aren't getting included, but I'd like to fix this.

I think the easiest dev experience would be one you don't need to think about, so just adding something like svelte-material-ui via npm install svelte-material-ui should give you access to the components. I need to think through the best way to accomplish this (open to suggestions), but might require adding custom entry in plenti.json config file. Thanks for bringing it to my attention, hope to have more details soon!

[ksallee]

No problem! Digging your build speed by the way, I can see that you put a lot of effort into it. It got me really excited to prototype something quick and of course it'd be easier to have something nice fast if you're bringing stuff from outside and like you said, just install it with npm. If there was maybe an extra config step I think that would be fine. Awesome project, congrats! Because of you I'm learning go now :)

[jimafisk]

Thanks so much! I've been learning Go along the way too, and am really enjoying it. If you have any questions about anything I have set up, don't hesitate to ask :).

[ksallee]

Not sure if it's related, but if I try to add import {writable} from 'svelte/store'; In something like layout/content/index.svelte If I refresh the site, I can see the page is there but then it switches to the Not found page.

[jimafisk]

This is another good catch @ksallee! I've created a new issue with some details here: https://github.com/plentico/plenti/issues/43. The fix is to create something similar to the static import regex for export statements. I'm finishing up a big push at the moment to remove the NodeJS dependency, but once that's done I'll take a look. Thanks for testing and flagging these issues!