Having an issue with initializing V5.3.2 FullCalendar in Salesforce Lightning Web Component:
JS:
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import fullCalendar from '#salesforce/resourceUrl/fullCalendar532';
// import fullCalendar from '#salesforce/resourceUrl/fullCalendar442';
export default class FullCalendarTestV5 extends LightningElement
{
async renderedCallback()
{
console.log(`## loading up calendar library...`);
await Promise.all([
loadScript(this, fullCalendar + '/lib/main.js'),
loadStyle(this, fullCalendar + '/lib/main.css')
// loadScript(this, fullCalendar + '/packages/core/main.js'),
// loadStyle(this, fullCalendar + '/packages/core/main.css')
]).catch(error => {
console.error(`## error: ${error}`);
});
console.log(`## loaded up calendar library...`);
this.initialiseFullCalendarJs();
}
initialiseFullCalendarJs()
{
console.log(`## initializing calendar...`);
const ele = this.template.querySelector("div.fullcalendarjs");
console.log(`## ele: ${ele}`);
let calendar = new FullCalendar.Calendar(ele, {});
// calendar.render();
}
}```
HMTL:
```<template>
Full Calendar
<lightning-card>
<div id="calendar" class="fullcalendarjs slds-p-horizontal_small"></div>
</lightning-card>
</template>
Error:
fullCalendarTestV5.js:4 Uncaught (in promise) ReferenceError: FullCalendar is not defined
at s.initialiseFullCalendarJs (fullCalendarTestV5.js:4)
at s.renderedCallback (fullCalendarTestV5.js:4)
Related
I'm getting this error
TypeError: window.OneSignal.push is not a function
in the latest SDK and Cordova plugin. But when I downgraded the onesignal-cordova-plugin to 2.11.3 I get a plugin_not_installed error.
import React from "react";
import { OneSignal } from "#awesome-cordova-plugins/onesignal";
React.useEffect(()=> {
OneSignalInit();
}, [])
const OneSignalInit = async () => {
OneSignal.startInit(import.meta.env.VITE_ONESIGNAL_APPID, import.meta.env.VITE_GOOGLE_PROJECT_ID); // Error: TypeError: window.OneSignal.push is not a function
};
Package JSON:
I'm using React [^17.0.1] and arcgis-js-api [^4.18.1] for the app,
After 'npm start' I'm receiving the below errors,
The console errors are below,
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution TypeError: t is not a constructor
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom TypeError: t is not a constructor
index.js:1 [esri.widgets.Widget] widget-intl:locale-error esri.widgets.Popup TypeError: t is not a constructor
[esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: 'gray-vector') TypeError: t is not a constructor
workerFactory.js:5 Uncaught (in promise) TypeError: e is not a function
Uncaught (in promise) TypeError: Cannot read property 'zoomIn' of null
The SalesChartCard.js
import React, { useRef, useEffect } from 'react';
import { Card, CardBody, CardTitle } from 'reactstrap';
import ArcGISMap from '#arcgis/core/Map';
import MapView from '#arcgis/core/views/MapView';
import esriConfig from '#arcgis/core/config';
import '../../assets/css/map.css';
const SalesChartCard = () => {
esriConfig.assetsPath = '/assets';
const mapDiv = useRef(null);
useEffect(() => {
if (mapDiv.current) {
/**
* Initialize application
*/
const map = new ArcGISMap({
basemap: 'gray-vector',
});
/* eslint-disable no-unused-vars */
const view = new MapView({
map,
container: mapDiv.current,
extent: {
spatialReference: {
wkid: 102100,
},
xmax: -13581772,
xmin: -13584170,
ymax: 4436367,
ymin: 4435053,
},
});
/* eslint-enable no-unused-vars */
}
}, []);
return (
<Card>
<CardBody>
<CardTitle>Map</CardTitle>
<div className="mapDiv" ref={mapDiv} />
</CardBody>
</Card>
);
};
export default SalesChartCard;
I followed below links for development,
jsapi-resources
build with ES modules
Link
Still I'm getting same console errors.
Kindly look into updated Git-repo and suggest solution.
Clone the repo and run the app then navigate to the url
http://localhost:3000/app/dashboards/default
then the application breaks and starts to give errors.
Try upgrading to 4.19. What you are seeing looks like a configuration issue that was changed at 4.19.
I have a react app running with webpack and I want to make an element draggable using jquery UI. I've added the library with
How can I import jquery ui into the component
Error:
(...).draggable is not a function
$(this.productElm).draggable({
//Install:
yarn add jquery-ui
// Component file:
import $ from "jquery";
import draggable from 'jquery-ui';
export class Item extends React.Component {
componentDidMount(){
this.setPlacement();
document.addEventListener('mousedown', this.handleOutsideClick, false)
this.initInterations()
}
initInterations(){
setTimeout(() => {
$(this.productElm).draggable({
addClasses: false,
stop: (e, ui) => {
if(this.props.onChange){
this.props.onChange({
name: 'move',
x: ui.position.left,
y: ui.position.top
}, this.props.item)
}
}
})
})
}
}
Seems like you can import the various jquery ui 'widgets' like this
import 'jquery-ui/ui/widgets/draggable';
import 'jquery-ui/ui/widgets/resizable';
To work out the path for the import, lookin the node modules folder for what you are importing.
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";
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;