Sapper framework7-svelte Error - Cannot use import statement outside a module

Hello Everyone,

I am trying to use Framework7 in a basic Svelte app which is using the default Sapper router, and can’t seem to get Framework7 set up properly.

Any time I try to use a Framework7 component from the framework7-svelte npm package, and I restart the server, I get the error below:

\code\framework7-sapper\node_modules\framework7-svelte\framework7-svelte.esm.js:13
import AccordionContent from ‘./components/accordion-content.svelte’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1072:16)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module.load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object. (C:\Users\Jogun\Documents\code\framework7-sapper_sapper
\dev\server\server.js:10:24)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1178:10)

Server crashed

I am using the basic framework7 {App, View} components from framework7-svelte in the root index.svelte file of Sapper, and it throws the error above.

<App { params }>

Any help with this will be appreciated!

Not sure it is compatible with Sapper, but according to error you need to configure your build to transpire framework7-svelte and framework7 node modules

Thanks for the response. What is the best way to do this?

I copied the framework7 and framework7-svelte packages into the Sapper components folder and was able to import components from these packages by bypassing the node_modules, and it works. However, there may be some interference between the sapper route and the f7 route {App, View}, as you have to manually reload to see the f7 imported components on the page.

Try install framework7 & framwork7-svelte as devDependency (–savedev). Also don’t use App component because server will try to run it and cause window is undefined, other components like View, Page are fine.

Thanks very much for your response. I installed framework7 and framework7-svelte as decDependency and it throws a different error.

f7.js:35 Uncaught (in promise) TypeError: Cannot read property ‘once’ of null

Although the error persists, the component runs at build time…

That error is from server side? I think maybe due to you use App f7params=… component? The problem with it is the component will be parsed at server side too and has errors. I can avoid it by remove the App component and only call f7.init in client.js.

You can review how I made it works from this sample: https://github.com/framework7io/framework7/issues/3442 (it is for f7-react with nextjs, but the code flow is the same for f7-svelte with sapper)