ueno-llc / gsap-tools

A simple tool to debug GSAP animations
https://ueno-llc.github.io/gsap-tools
MIT License
301 stars 18 forks source link

Unexpected token u in JSON #15

Closed kisin closed 4 years ago

kisin commented 5 years ago

after adding the gsaptools to page i get error: SyntaxError: Unexpected token u in JSON

import React, { Component } from 'react';
import GsapTools from 'gsap-tools';

export default class App extends Component {
  render () {
    return (
      <div>
        <GsapTools />
     </div>
    )
  }
}
jeremybarbet commented 5 years ago

Hi,

What do you use to run react? create-react-app?

steoo commented 5 years ago

Same error here using create-react-app

jeremybarbet commented 5 years ago

Could you provide a repo with the issue?

I tried on my side and did:

npx create-react-app my-app
cd my-app
yarn add gsap-tools
yarn start

then I added gsap-tools on App.js and it worked, and the tools is displayed.

To continue, I also added a simple GSAP timeline and it worked fine, http://b.ueno.is/c053a4e6ec42:

import React from 'react';
import GsapTools, { add } from 'gsap-tools';
import { TimelineLite } from 'gsap';
import logo from './logo.svg';
import './App.css';

function App() {
  const myDiv = React.createRef(null);

  const onAnimate = () => {
    const timeline = new TimelineLite();

    timeline.to(
      myDiv.current,
      0.6,
      {
        x: 200,
        rotation: 5,
      },
    );

    add(timeline);
  };

  React.useEffect(() => {
    onAnimate();
  });

  return (
    <div className="App">
      <GsapTools />

      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

        <div ref={myDiv} className="App-div" />

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
ismamz commented 4 years ago

Hi @jeremybarbet, it seems that when you load for first time, IS_VISIBLE is undefined on localStorage and then JSON.parse fails here: https://github.com/ueno-llc/gsap-tools/blob/master/src/app/GsapTools.js#L271

jeremybarbet commented 4 years ago

@ismamz Thank you for pointing me the issue, I forgot about local storage. Fix landed here: https://github.com/ueno-llc/gsap-tools/commit/f8bafe46d4eb2659f2bd342da6701751e30990c8 and version 1.0.11 published.

steoo commented 4 years ago

I'll try it ASAP and inform you if some other bug is showing up :)