Svelte: How to include external dependencies?

[mmjmanders]

I followed the instructions on https://svelte.technology/guide#helpers. How do I make sure that the leftPad function is available in the component when accessing this through a browser? Or is this purely to use with e.g. webpack?

[Rich-Harris]

In the glorious future that's just around the corner, import will work natively in browsers and this will 'just work' (as long as the browser knows where to find left-pad – not entirely sure how that's going to work).

Sadly, in the meantime you will indeed have to use a bundler like Webpack. The compiler can output one of five different formats:

• amd – for RequireJS and equivalents
• cjs – CommonJS, for Browserify etc
• iife – for direct use as a <script> tag. Any dependencies must exist on the page already (see below)
• umd – all of the above
• es – the default. Preserves import and export on the expectation that you're using a bundler.

In the iife case, the expectation is that the dependency already exists on the page. left-pad is actually a bad example because it only works in CommonJS environments, but if we pretend that it works as a <script> tag then it'd look something like this:

<script src='https://unpkg.com/left-pad'></script>
<script src='MyComponent.js'></script>
<script>
  var app = new MyComponent({...});
</script>

The compiler would guess from your source code that the left-pad module ID corresponds to the leftPad global, but you can remove the ambiguity by configuring it:

var compiled = svelte.compile( input, {
  format: 'iife',
  globals: {
    'left-pad': 'leftPad'
  }
});

Of course, this is all rather cumbersome and frustrating – you're better off using a bundler which will take care of all the configuration nonsense, at least until modules are natively supported widely enough (hopefully in the next few months!).

[ianengelbrecht]

May I raise this again? How do we use leftPad in Svelte3 using import?

[antony]

@ianengelbrecht you don't need leftPad any more, see https://www.npmjs.com/package/left-pad

You can import any module into Svelte simply using a regular import variable from 'moduleName' as you would in regular es6.

Please direct further support questions to chat. Github issues is better suited for bug reports and feature requests.