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

Questions
1

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!

2

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

3

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

4

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.

5

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.

6

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…

7

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)

9

Do you have a small example with full source code of a running sapper-app? I am a bit confused which files and components I have to use.

10

Has anybody succeeded tu use Svelte-Sapper with framework7 ?
I am also blocked with the error “Cannot read property ‘once’ of null” which affects this line inside /dev/server/server.js :
f7.events.once(‘ready’, callback)
Any small github example of any working Sapper-framework7 app would be welcome