Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Import javascript file in svelte

So today I discovered Svelte and I absolutley love the concept. I only got one problem I wrote a small helper.js file and can't seem to import it. Every time I try to reference the class I get

ReferenceError: Helper is not defined


main.js file:

import App from './App.svelte';
import './helper.js';

var app = new App({
    target: document.body
});
export default app;


App.svelte file:

<script>
    let helper = new Helper();
</script>

<h1>Hello</h1>


helper.js file:

class Helper {
  constructor() {
    console.log("working");
  }
}
like image 385
Dynamicnotion Avatar asked Jul 01 '19 16:07

Dynamicnotion


People also ask

How to upload in file in svelte using JavaScript?

In order to upload in file in Svelte, we can use javascript FormData () api. First we will create a form with file input field and append the value to the formdata variable. Along with file, we can also append any other data which we want to send as POST variable. Then we can make a fetch request to upload file.

How to import a CSS file from node_modules in a svelte component?

Here’s how you import a CSS file from node_modules in a Svelte component. This post assumes you’re bundling your app with Rollup. Install the rollup plugin to process CSS files. Configure the plugin in rollup.config.js. This will tell rollup to read the CSS imports and write them in a file called vendor.css.

How to import a button into another svelte component?

You can now import it into any other Svelte component using the import ComponentName from 'componentPath' syntax: < script > import Button from './Button.svelte' ; </ script > And now you can use the newly imported component in the markup, like an HTML tag:


1 Answers

You need to import it into the file that uses it:

<script>
  import Helper from './helper.js';
  let helper = new Helper();
</script>

<h1>Hello</h1>
like image 152
Rich Harris Avatar answered Sep 16 '22 14:09

Rich Harris