SnapSVGAnimator.js generates errors when loading in React web app - reactjs

SnapSVG extension for Adobe Animate.cc 2017 is able to create interactivity and animations for the web. I'm currently trying to use an exported SnapSVG Adobe Animate.cc project in my REACT JS WebApplication.
What I've done so far:
Imported snapsvg-cjs from npm( modified snapsvg to use succesfull in React)
Imported axios to load custom json file generated from SnapSVG extension in Animate.cc
Excluded minified code with eslintignore from SnapSVGAnimator. lib, generated while publishing SVG animation from Animate.cc to work properly without the ESlinting warnings.
Create a componentDidMount function
current code:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { SVGAnim } from './SnapSVGAnimator.js';
import snapsvg from 'snapsvg-cjs';
componentDidMount(){
axios.get(jsonfile)
.then(response => {
const json = response.request.responseText;
const comp = new SVGAnim(json);
console.log(comp)
});
}
Problem
Following error appears while I log const comp.
Uncaught (in promise) TypeError:
_SnapSVGAnimator.SVGAnim is not a constructor

During the publish render in Animate.cc there are two libs generated; snapsvg.js and SVGAnimator.js
You can import snapsvg-cjs from NPM but SVGAnimator.js isn't available. Importing SVGAnimator.js with the ES6 approach from a curtain directory in your ReactApp isn't possible, not even by excluding it from linting with /* eslint-disable */ 1000 warnings still appears.
Instead of that, add the code to your index.html file, located in the public folder this way
(I've used create-react-app to build this project):
<script type="text/javascript" src="%PUBLIC_URL%/libs/SnapSVGAnimator.min.js"></script>
This is the working code:
import React, { Component } from 'react';
//axios for asnyc usage*/
import axios from 'axios';
//Snapsvg-cjs works out of the box with webpack
import Snapsvg from 'snapsvg-cjs';
//snap.json is located in the public folder, dev-build folder(ugly approach).
let jsonfile = "snap.json";
class SVGAnimator extends Component {
constructor(props){
super(props);
this.state = {
data: ''
}
}
componentDidMount(){
axios.get(jsonfile)
.then(response => {
this.setState({ data: response.data })
});
}
getSVG(){
if(this.state.data){
const container = document.getElementById('container');
const SVG = new window.SVGAnim(this.state.data, 269, 163, 24)
container.appendChild(SVG.s.node);
}
}
render() {
return (
<div id="container">
{ this.getSVG()}
</div>
);
}
}
export default SVGAnimator;

Related

Retrieving data from a local json file in react

How can i retrieve some data from a local json file i created in my folder? i´m using the following code:
class Intro2 extends Component {
render() {
async function getData() {
const usersData = await fetch("../articles.json");
const users = await usersData.json();
return users;
}
}
This doesn't seem to work for my local json file but if i use a url from git hub users for example its working?
many thanks
The error: main.chunk.js:332 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
You shouldn't be using fetch.
Use import instead. This will ensure webpack doesn't bundle the json file.
But makes it available in the public directory.
const usersData = await import("../articles.json");
Fetch will never work because webpack won't serve your JSON file.
Not unless you put it in a the static or public folder.
I think if you're trying to read from your file system you won't be able to do it, because in at least some browsers, you will need to serve the file via a web server process.
But if you are trying to read from http://localhost:9000/articles.json the issue could be another thing.
Maybe you need the {mode:'no-cors'} param ?
fetch('../static/test.txt', {mode: 'no-cors'})
Else you could simply export it:
export const json = () => ({...})
and then import it to your file:
import {json} from '../json
Assuming the json is in the project's folder structure.
import React from "react";
import ReactDom from "react-dom";
import usersData from "../articles.json";
class Intro2 extends React.Component {
state = {
usersData: { ...usersData },
};
componentDidMount() {
// a place for promises
};
render() {
// where the jsx is rendered
return <div>Renders JSX with state {this.state.usersData.aKey}</div>;
}
};
or with react functional components
// Alternatively, use functional components:
import React from "react";
import usersData from "../articles.json";
function Intro2() {
const [usersData, setUsersData] = React.useState({ ...usersData });
return <div>Renders JSX with state {usersData.aKey}</div>;
}

React const is not defined no-undef error

I am following a tutorial to learn ReactJS, i am trying to create Spring Boot and React Java Full Stack Application with Maven.
Below are the files which i created:
App.js
import React, { Component } from "react";
import "./App.css";
import InstructorApp from "./component/InstructorApp";
class App extends Component {
render() {
return (
<div className="container">
<InstructorApp />
</div>
);
}
}
export default App;
ListCoursesComponent.jsx:
import React, { Component } from "react";
import CourseDataService from "../service/CourseDataService";
class ListCoursesComponent extends Component {
constructor(props) {
super(props);
this.refreshCourses = this.refreshCourses.bind(this);
}
componentDidMount() {
this.refreshCourses();
}
refreshCourses() {
CourseDataService.retrieveAllCourses(INSTRUCTOR) //HARDCODED
.then(response => {
console.log(response);
});
}
}
export default ListCoursesComponent;
InstructorApp.jsx:
import React, { Component } from "react";
import ListCoursesComponent from "../component/ListCoursesComponent";
class InstructorApp extends Component {
render() {
return (
<>
<h1>Instructor Application</h1>
<ListCoursesComponent />
</>
);
}
}
export default InstructorApp;
CourseDataService.js:
import axios from "axios";
const INSTRUCTOR = "in28minutes";
const COURSE_API_URL = "http://localhost:8080";
const INSTRUCTOR_API_URL = `${COURSE_API_URL}/instructors/${INSTRUCTOR}`;
class CourseDataService {
retrieveAllCourses(name) {
return axios.get(`${INSTRUCTOR_API_URL}/courses`);
}
}
export default new CourseDataService();
When i am lunching my application, in the tutorial i am supposed to get the below error:
[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load http://localhost:8080/instructors/in28minutes/courses due to access control checks.
[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (courses, line 0)
[Error] Unhandled Promise Rejection: Error: Network Error
(anonymous function) (0.chunk.js:1097)
promiseReactionJob
But when i am lunching my application i am getting this error:
./src/component/ListCoursesComponent.jsx
Line 15:42: 'INSTRUCTOR' is not defined no-undef
Search for the keywords to learn more about each error.
The unhandled promise rejection means that at some point the request was made to call your url, but it was denied, this is probably because you need to activate CORS into your project. You can read more about CORS and adding it to your project here.
You declared INSTRUCTOR in ListCoursesComponent.jsx but you are trying to use it in a different file. If you want to do this you need to export it where you define it and import it in the file you are using it.
Solution:
As mentioned by #emoore i have added the CORS in my springboot backed application by:
#CrossOrigin(origins = { "http://localhost:3000", "http://localhost:4200" })
#RestController
As mentioned by #trixn i imported INSTRUCTOR Const in the ListCoursesComponent file by:
import INSTRUCTOR from "../service/CourseDataService";

Install Overlapping Marker Spiderfier for Leaflet with React

I am new to React. I try to use the npm module overlapping-marker-spiderfier-leaflet in a react project.
I follow the instruction at https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet so I do npm install -S overlapping-marker-spiderfier-leaflet and then import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier-leaflet'; in my project.
I then do var oms = new OverlappingMarkerSpiderfier(this.map); but I get :
Unhandled Rejection (TypeError):
WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet.OverlappingMarkerSpiderfier is not a constructor
Do you know how I could solve this error. Do you think I could rather use the minified js to use this plugin? How so?
overlapping-marker-spiderfier-leaflet library doesn't export anything in an ES6 compatible way. But it could be directly imported as a file from the library's dist folder:
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;
Example
import React from "react";
import {
withLeaflet,
MapLayer
} from "react-leaflet";
import L from "leaflet";
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;
class Spiderfy extends Component {
componentDidMount(props) {
const { map } = props.leaflet;
const oms = new OverlappingMarkerSpiderfier(map);
//...
}
//...
}
This demo demonstrates how to integrate overlapping-marker-spiderfier-leaflet into react-leaflet.

error in displaying pdf in react-pdf

I am new new to react, I am trying to display a pdf file on browser. I am getting an error as failed to load PDF. I am trying to run the sample program given in https://www.npmjs.com/package/react-pdf.
App.js
import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
class MyApp extends Component {
state = {
numPages: null,
pageNumber: 1,
}
onDocumentLoad = ({ numPages }) => {
this.setState({ numPages });
}
render() {
const { pageNumber, numPages } = this.state;
return (
<div>
<Document
file="./1.pdf"
onLoadSuccess={this.onDocumentLoad}
>
<Page pageNumber={pageNumber} />
</Document>
</div>
);
}
}
export default MyApp;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Error screenshot
Question is old but hope this help someone. I faced this issue and found a solution here https://github.com/wojtekmaj/react-pdf/issues/321.
import { Document, Page, pdfjs } from 'react-pdf';
Add this to your constructor.
constructor(props){
super(props);
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
}
You load the file using file="./1.pdf" I believe that might be the problem.
If you have a file structure like:
src
App.js
components
ShowPdfComponent.js
1.pdf
public
bundle.js
Then you need to move the 1.pdf to public folder like this:
src
App.js
components
ShowPdfComponent.js
public
bundle.js
1.pdf
Because when your compiled javascript code is being executed from public/bundle.js and bundle.js does not know how to get to src/components/1.pdf in file system.
There might be also a difference between production/development environment if you are using webpack and webpack-dev-server.
Look at react-pdf example. It has flat file structure. That is the reason why it works.
if you are using create-react-app then you need to import differently like
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'
because it uses webpack under the hood.
You can import the pdf file using import samplePdf from './1.pdf' and can use directly like file={samplePdf} in your Document tag.
Here is the minimum setup you need to be able to display your pdf in react TypeScript:
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist#${pdfjs.version}/legacy/build/pdf.worker.min.js`;
const YourComponentReact = ({url}: {url: string}) => {
return (<Document file={url}>
<Page pageNumber={1} />
</Document>)
}
You can add a quick button if you want to be able to change pages
You only need to download react-pdf and #types/react-pdf if you use typescript.
adding pdfjs to import and using it like this hellped
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist#${pdfjs.version}/legacy/build/pdf.worker.min.js`;
in the same file i need to show my pdf

Need a workaround for Adobe SnapSVG-animator running in React.js

SnapSVG extension for Adobe Animate.cc 2017 is able to create interactivity and animations for the web. I'm currently trying to use an exported SnapSVG Adobe Animate.cc project in my REACT JS WebApplication.
What I did so far
Published html file from a SnapSVG project(Animate.cc 2017)
Copyed custom json file created from the SnapSVG project in animate.cc in my React app.
Installed SnapSVG from npm install in my React App.
Imported the js file copyed from the html publication created from animate.cc by importing the code. ( SnapSVG-animator isn't available in npm)
The custom json file from animate.cc/snap svg project is loaded async and will be added to the SVGAnim(SnapSVGAnimator.min.js) function object which will create the svg animation in de browser.
The code
import axios from 'axios';
import snapsvg from 'snapsvg';
import { SVGAnim } from './SnapSVGAnimator.min.js';
let jsonfile = "circle.json",
responseType: 'json';
componentDidMount(){
axios.get(jsonfile)
.then(response => {
const json = response.request.responseText;
const animatedSVG = new SVGAnim(json);
});
}
Problem
The SnapSVGAnimator.min.js creates warnings and errors when it's imported in the JSX file. Looks like something going wrong with compiling these code.
✖ 1557 problems (110 errors, 1447 warnings)
First, install the following libraries:
npm install --save snapsvg-animator snapsvg-cjs
given your json is at ../../public/myAnimation.json do the following:
import React, { useEffect } from 'react';
import SVGAnim from "snapsvg-animator";
import "snapsvg-cjs";
const myAnimation = require('../../public/myAnimation.json'); //import your json
function Home() {
const svg = new SVGAnim(
myAnimation,
200, //width
220, //height
40 //fps
);
useEffect(() => {
const container = document.getElementById('animation');
container.appendChild(svg.s.node);
});
return (
<div id="main">
<div id="animation"/>
</div>
)
};
export default Home;
I am using react hooks because it is all the rage ☺ but it's working with "render" and "componentDidMount" all the same.

Resources