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
resolveconfig in rollup - adding the path to the svmd node folder to the
svelteincludeconfig 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.