Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

Question

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

I have been trying to troubleshoot this issue, but I am having trouble understanding how to resolve it.

Currently, I am using lottie-web in a project and need to set the animation parameters on an object in order to pass them as a parameter later.

This is part of my component:

import Lottie from './../../node_modules/lottie-web/build/player/lottie';

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      path: '/src/data/animation.json',
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

However, when I run this line:

    Lottie.loadAnimation(this.animationParams);

I encounter the following error:

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.xhr.onreadystatechange

Based on other responses on Stack Overflow, it seems that I should not need to parse the JSON file since it is already parsed. However, I am unsure how to handle it without parsing.

The content of the JSON file can be found here: .

How can I load this JSON file without parsing it?

javascript json parsing vue.js lottie

Answer 1

Answer №1

It seems like your server may not be serving the /src/data/animation.json file as expected. A better approach would be to use animationData instead of path, and directly set the animation object without relying on a server call.

To achieve this, you can create a regular ES6 module named /src/data/animation.js that exports an object containing your animation data:

export default {
  // your animation data
}

Remember that this is a JavaScript file, not a JSON file. Then, in your component, simply import this object:

import Lottie from './../../node_modules/lottie-web/build/player/lottie';
import animationData from "/src/data/animation"

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      animationData,
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

You can find more documentation on this process here.

This method may increase the size of your initial bundle, but it eliminates the need for an extra server call to fetch the animation data.

If this solution doesn't work, consider moving the animation.json file to a path accessible by your server and adjust the path accordingly to reflect the correct URL relative to your current page.

Answer 2

It seems like your server may not be serving the /src/data/animation.json file as expected. A better approach would be to use animationData instead of path, and directly set the animation object without relying on a server call.

To achieve this, you can create a regular ES6 module named /src/data/animation.js that exports an object containing your animation data:

export default {
  // your animation data
}

Remember that this is a JavaScript file, not a JSON file. Then, in your component, simply import this object:

import Lottie from './../../node_modules/lottie-web/build/player/lottie';
import animationData from "/src/data/animation"

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      animationData,
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

You can find more documentation on this process here.

This method may increase the size of your initial bundle, but it eliminates the need for an extra server call to fetch the animation data.

If this solution doesn't work, consider moving the animation.json file to a path accessible by your server and adjust the path accordingly to reflect the correct URL relative to your current page.

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

Answer №1

Similar questions

toggle switch for numerical input

Split and show various JSON values in distinct <span> elements using ReactJS

Instructions for sending an array of integers as an argument from JavaScript to Python

Angular 2 Error: Unresolved Promise rejection - Unable to assign value to reference or variable

Storing the Token from the AJAX Login API Call in JavaScript: Best Practices for Keeping Credentials Secure

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

jQuery form validation issue, unresponsive behavior

The onclick attribute on a button in HTML is not functioning properly following the inclusion of an Ajax load

When trying to deploy to Heroku, node-gyp encounters an issue installing [email protected] and ultimately fails to rebuild

Enhancing the session helper in Silex with additional values

Are there any drawbacks to converting all instance methods into arrow functions in order to prevent binding loss?

Property that is dynamically populated based on data retrieved from an external API

Guide for redirecting puppeteers' attention to a new pop-up interface

Creating a nuxt.js application from scratch without using create-nuxt-app

What is the process for executing JavaScript code that is stored as a string?

Trouble reading property 'map' in a react-redux todo application

How to keep Vuetify component at the top of the v-layout?

Twilio Group MMS feature experiencing technical difficulties

Tips for creating a scrolling animation effect with images

Is it possible to include an if or else condition in jQuery JSON response?