How to use Scrollmagic and GSAP in REACT project - reactjs

I'm following using this codesandbox as a guide with my React project and receiving this error:
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Can't resolve 'TimelineMax'
Assuming I copied everything from that sandbox to my local files, why am I getting that error?
I'm using Create-react-app btw.

animation.gsap.js requires TimelineMax module so try importing 'TimelineMax' module
import { TimelineMax} from 'gsap/src/uncompressed/TweenMax.js';
also you can refer to github solution

Related

React + Webpack5 app experiencing a 'buffer not defined' error

I created a react app via npx create-react-app my-app and got several compile errors about module support.
I know webpack5 does not support some modules automatically, so I added them manually into the resolve.fallback in webpack.config.js.
While I don't get any more compile errors, I do get another error:
Buffer is not defined
on the browser.
I want to know how to fix it. InAngular, we can edit polyfills.ts like this:
global.Buffer = global.Buffer || require('buffer').Buffer;
But it is not working in React.
I had a similar and I solved it by adding the following to your index.js you will fix the buffer issue:
import * as buffer from 'buffer';
window.Buffer = buffer.Buffer;
This link references was where I found the solution.
https://github.com/isaacs/core-util-is/issues/27#issuecomment-878969583

Error: Module not found: Can't resolve 'nativescript-xmpp-client' in '/home/rakesh95/Projects/webapp/node_modules/quickblox/src/modules/chat'

I am trying to use QuickBlox JavaScript SDK for chat communication for react.js app. But while running the app i am getting this error. I have installed all the dependencies but still getting this error.
Try importing it like so:
import * as QB from 'quickblox/quickblox'

Using React Leaflet Draw in project - EditControl issues

I'm trying to use React-Leaflet-Draw to add polygons to a mapping project I'm working on. Coming unstuck on the use of EditControls.
I imported Edit control as per the example
import { EditControl } from '../src';
With an index.js file in src folder with:
export EditControl from './EditControl';
I added some code to do some different things to the example but it still ran fine (in the example version).
When I tried to run this on another project, using the same code I get the error:
Syntax error: Unexpected token, expected {
From the index.js file, using the same export command. Has anyone else encountered this problem? Any thoughts on why it might be happening?
Thanks
You need to install 'leaflet-draw'
npm install 'leaflet-draw'

Module not found: Can't resolve './AppRoutes'

I'm following this react workshop:
https://github.com/spietrek/workshop.reactjs.1/blob/master/presentation/Introduction%20to%20ReactJS%20Workshop.pdf
I'm following all the code but I'm getting an error:
Module not found: Can't resolve './AppRoutes'...
Here's the editable project url:
https://stackblitz.com/edit/react-project
I'm at pg 17/27
You have put a space before the name of the file AppRoutes.js like <space>AppRoutes.js.
You have to remove the space to fix that error.
After fixing this also in you project there are some errors due to Fragment. I fixed that by updating react and react-dom packages to version 16.2.0.
This is a working fork of you project.
If AppRoutes is a .jsx file you have to load it with the .jsx file extension. Like ./AppRoutes.jsx

How to use Google maps api with webpack and typescript

I'm trying to use google maps api in my react app using webpack and typescript.
i've tried installing this package:
npm install googlemaps
npm install #types/googlemaps
Then in my app
import * as GoogleMapsAPI from 'googlemaps';
I get the following error
[ts] File 'c:/MyAppFolder/node_modules/#types/GoogleMaps/index.d.ts' is not a module.
Not sure what I'm doing wrong
You don't need to import from "googlemaps". google.maps is a global variable declared in googlemaps/index.d.ts. So you can use google.maps in your code right away.
For example
const point = new google.maps.Point(0,0);
For more info about typescript module and namespace. You can follow this link

Resources