Storybook Svelte Framework7

Did anyone get Storybook to work with Svelte and Framewok7?

Been trying for a couple of days and still lost

The other threads on similar topics seem outdated for Storybook version and possibly f7, and are for other JS flavors, and maybe cause it’s all still kinda new to me I couldn’t figure it out (linked in the end)

My status is rendering something basic on 2nd render only (which is still totally broken once adding the styles, it has display:none)
1st run error

TypeError: Cannot read property 'create' of undefined
    at EventsClass.<anonymous> (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:101644:66)
    at EventsClass.onceHandler (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125513:15)
    at http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125575:24
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125574:18
    at Array.forEach (<anonymous>)
    at EventsClass.emit (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125568:17)
    at Framework7.<anonymous> (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:112593:16)
    at http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:125575:24
    at Array.forEach (<anonymous>)

3rd and further runs

TypeError: Cannot read property 'removeChild' of null
    at detach (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:208477:21)
    at Object.d (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:63516:81)
    at destroy_component (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:209712:36)
    at Object.d (http://localhost:6006/main.fb780c0aa7bef50dedef.bundle.js:3322:77)
    at destroy_component (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:209712:36)
    at F7wrapper.$destroy (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:209836:9)
    at cleanUpPreviousStory (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:34827:21)
    at StoryRenderer.render (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:34918:3)
    at StoryRenderer._callee3$ (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:30191:29)
    at tryCatch (http://localhost:6006/vendors~main.fb780c0aa7bef50dedef.bundle.js:200502:40)

styles are broken, if I add them it has display:none

I’ve made my wrapper f7wrapper.svelte

<App { ...f7params } >
  <View>
    <svelte:component this={child} {...props}/>
  </View>
</App>

<script lang="ts">
  export let child, props

  // Framework7 Parameters
  let f7params = {
    id: 'io.framework7.something', // App bundle ID
    name: 'something', // App name
    theme: 'auto', // Automatic theme detection

    // App routes
    routes: {},

    // Register service worker
    serviceWorker: {
      path: '/service-worker.js',
    },
  } 
  
  import App from './f7app'
  import { View, Panel, Navbar, Block } from 'framework7-svelte'
</script>

and f7app.ts

let app = App

export default app
Framework7.use(Framework7Svelte)

import Framework7 from 'framework7';
import Framework7Svelte, { App } from 'framework7-svelte'
import f7 from 'framework7-svelte/cjs/shared/utils'

// Import Framework7 Styles
//import 'framework7/framework7-bundle.css'

// Import Icons and App Custom Styles
import '../../css/icons.css'
import '../../css/app.css'

p.s. my .storybook/webpack.config.js

const autoPreprocess = require('svelte-preprocess');

module.exports = ({ config, mode }) => {
    const svelteLoader = config.module.rules.find(
        r => r.loader && r.loader.includes('svelte-loader'),
    );
    svelteLoader.options.preprocess = autoPreprocess({
        less: { includePaths: ['src', 'node_modules'] },
        css: { includePaths: ['src', 'node_modules'] },
        typescript: {
            tsconfigFile: './tsconfig.json',
            transpileOnly: true,
        },
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

Related posts I mentioned


TIA for any help/direction