Uncaught TypeError: svmd_es.Button is not a constructor implementing a UI toolkit in svelte

Viewed 399

I'm new at Svelte and trying out a Material Design toolkit for my first experimentation. I found https://github.com/hkh12/svmd, which looked nice, and I added it to my Svelte project.

According to the docs there is no more to it than importing the components and using them. However, this gives me the following error in the browser:

Uncaught TypeError: svmd_es.Button is not a constructor
    create_fragment bundle.js:798
    init index.mjs:1451
    App bundle.js:873
    app main.js:4
    <anonymous> bundle.js:890

Looking inside the Node svmd module folder, I found that the components are just .svelte files themselves; as plain .svelte and also in compiled form. I can't figure out why simply importing them and using them wouldn't work.

The only thing that I could think of was that I might be missing something in my rollup file? Maybe something needs to be transpiled first, or .svelte files from the node_modules folder should be (and aren't) pre-processed or something?

To try and solve this I have tried:

  • adding svelte to the resolve config in rollup
  • adding the path to the svmd node folder to the svelte include config in rollup

Both didn't work. Here are the files as I use them right now:

main.js:

import App from './App.svelte';

const app = new App({
    target: document.body
});

export default app;

App.svelte:

<script>
    import { Button, Slider, Fab } from 'svmd';
    import 'svmd/dist/svmd.css';
</script>

<main>
    <Button>flat button</Button>
    Lets see a button.
</main>

<style>
</style>

Rollup.config.js:

import svelte from 'rollup-plugin-svelte';
import scss from 'rollup-plugin-scss';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;
    
    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: css => {
                css.write('public/build/bundle.css');
            }
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        scss(),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

package.json:

{
  "name": "svelteapp",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-scss": "^2.6.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svmd": "^0.3.1"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

Hopefully someone can help me out.

1 Answers

It seems the library you mentioned has some error in it's bundling for publishing. If you refer directly to the source components themselves you will have better luck

import { Button, Slider, Fab } from 'svmd/src';

That said, it doesn't seem actively developed anymore.

If you want material design you might want to have a look at https://sveltematerialui.com/

Related