loader error message

[arkenidar]

"Error: Ractive.load() error: Could not find dependency "marked". It should be exposed as Ractive.load.modules.marked or window.marked"
I am unable to find what this means. I was never unable to get the loader working with the Comments example (out of the gist)

[Rich-Harris]

@arkenidar sorry for the slow response to this - what the error means is that the marked library needs to be available on the page, so that when the component calls require('marked'), ractive-load is able to find it. Using require() like this means that it's possible to use the same component with ractive-load, or in browserify, or a RequireJS project, or whatever.

So to set things up, you'd need to have a <script> tag pulling in moment:

<script src='ractive.js'></script>
<script src='ractive-load.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js'></script>

<script>
  Ractive.load( 'MyComponent.html' ).then( function ( MyComponent ) {
    /* MyComponent can now call require('moment') */
  }).catch( function ( err ) {
    /* ... */
  });
</script>

With moment it's easy, because the name of the package is the same as the name of the global object it creates (window.moment). With some other libraries that's not the case - e.g. you might have var Backbone = require('backbone'), in which case you need to tell ractive-load what require('backbone') actually means:

<script src='ractive.js'></script>
<script src='ractive-load.js'></script>
<script src='backbone.js'></script>

<script>
  Ractive.load.modules.backbone = Backbone;

  Ractive.load( 'MyComponent.html' ).then( function ( MyComponent ) {
    /* MyComponent can now call require('backbone') */
  }).catch( function ( err ) {
    /* ... */
  });
</script>

Hope this clarifies things.

[Rich-Harris]

Of course, I should add that if you're just using components internally, and they don't need to be used outside your app, there's no need to do the require() dance at all - you can just reference the global object as long as the <script> tag is on the page.

[arkenidar]

thanks

2015-04-27 17:04 GMT+02:00 Rich Harris notifications@github.com:

Of course, I should add that if you're just using components internally,
and they don't need to be used outside your app, there's no need to do the
require() dance at all - you can just reference the global object as long
as the <script> tag is on the page.

—
Reply to this email directly or view it on GitHub
#25 (comment)
.