Getting errors while loading a browersify coverted npm package and using it in a script tag?

Question

I am using a npm module called lottie-web which basically gives you a svg animation ,if you give it a json data file which i get from the adobe after effects(to keep things short all it does is takes a html element by its id and in the path it takes a json data file and loads the svg in the given element).I am using a node application with express and using handlebars(hbs) to render the frontend to the browser, So in this case we need to attach a script tag of the lottie-web cdn link or the other way is we can use browserify to convert the given file below and run browserify myfilename -o bundle.js command and then use the bundle.js in the script tag to load the js in the client side

const bodymovin = require('bodymovin')

var animation = bodymovin.loadAnimation({
  container: document.getElementById('loader'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '../../public/js/loader.json'
})

If i go with the first approach (i.e using a cdn link) i am getting a the following error lottie.js:4406 Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json'). at formatResponse (https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.js:4406:17) at XMLHttpRequest.xhr.onreadystatechange (https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.js:4424:26)

and if i go with the second approach (i.e using a browserify bundled js file) i am getting the following error VM2609:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at XMLHttpRequest.xhr.onreadystatechange (bundle.js:8583)

but if i try it using a cdn link in a normal html file and adding a js file to run the code given above (i.e outside my folder structure in a normal html css js structure it works fine). Can someone point me out where i am going wrong,thanks in advance.

You can clone the git repo given below to check the actual code link — user7544737
the files which are dependent to this question are 1. loader.js(client side js file ) loader.json(the json file which gives you the animation) bundle.js(which is the bundle from browserify) in the public/js folder 2.lottie.js(the js file which is bundled by browserify ) in the src/utils folder 3. forecast.hbs(the handlebar which is using the script tags) and loader.hbs(which contains the element where animation is to be rendered ) in the templates/views and template/partials files respectively . Hope this info helps — user7544737

p1100i p1100i · Accepted Answer · 2020-06-27T04:12:06

Those errors make me think that your webservers answer is incorrect, when the underlying asset (../../public/js/loader.json) is loaded with the XMLHttpRequest.

Try opening up the browsers console and check the Network tab, see whats happening for that request. The Response should be a proper JSON. Also check the Headers of that request, you might notice something there too.

After checking out your git repo, the thing I've noticed, that you have an express route: app.get('*' ,(req,res) => {, that answers w/ an HTM text generated by 404.hbs.

I think when you want to load that JSON this rule gets executed, which then renders HTML back for the caller, which raises the error you see.

Another weird thing is that I don't see those lines bodymovin.loadAnimation in your git repo...

Update 1:

This line should be path: './js/loader.json' since you are serving the public directory w/ express as asset root, and your json file lives under public/js/loader.json.

Also after fixing that another issue popped up, probably your JSON is misconfigured, but I'm not gonna fix that also for u. Take care.

Getting errors while loading a browersify coverted npm package and using it in a script tag?

1 Answers

Update 1: