Use gsap node module with Meteor - node.js

I'm trying to use the 'gsap' node module, explicitly the tool 'Draggable' of that package together with Meteor (a plain Meteor React app).
The installation via meteor npm install gsap works as expected.
However if i want to use the module in my code as suggested in the docs, the client crashes with multiple consecutive errors; the first is:
Uncaught SyntaxError: Unexpected identifier modules.js:132661
The suggested way to import gsap tools is shown here. The error appears when i try to import a sub-module like so:
import Draggable from 'gsap/Draggable';
I don't quite understand the problem here. With other modules a simple npm install and import x from y just works. With gsap modules that does not seem to be the case.
I'd be grateful for any advice.
Update:
It seems the import of 'gsap' node module is now working!
Thanks for your answers!
I had some issues with Draggable import, as gsap wasn't defined inside of its constructor ("_toArray is not a function"). To make it work you have to register the plugin to gsap (added lines in main.jsx):
import { gsap } from "gsap";
import { Draggable } from 'gsap/Draggable';
gsap.registerPlugin(Draggable);.

The gsap package contains ES6 code. ES6 in the node_modules folder is not compiled by Meteor. Usually when publishing to npm, packages are transpiled into ES5. The editor of gsap should do it.
Two options for you to make this work inside Meteor:
• Option 1: clone the source from github directly somewhere in your Meteor app, like /imports/lib/gsap. Then import as following import Draggable from '/impots/lib/gsap/Draggable';
• Option 2: clone the source from github directly somewhere outside your Meteor app and use npm install /path/to/the/cloned/folder inside your meteor app (see here for reference). Option 2 seems less robust to me when working as a team in the same project or when you will need to deploy your app

Related

Dynamic require not supported in React Native

I have just tried to use wasm bindings in a react-native project. But the wasm bindings require access to node modules like fs so I used rn-nodeify as a work-around to get the React Native representation of fs and to be able to use require. That worked fine but I think that the wasm bindings are incompatible with react native, because I get the error Dynamic require defined at line 10; not supported by Metro. The error is talking about the line below:
//line 10
const { TextDecoder, TextEncoder, inspect } = require(String.raw`util`);
The bindings I'm using are from this package #iota/identity-wasm
Steps to reproduce
If you want to reproduce this issue I have created a sample RN Project that throws the error by startup.
git clone https://github.com/JonasHiltl/DigitalIdentityNodeified.git
cd ./DigitalIdentityNodeified
npm install
npx react-native start
npx react-native run-android
I'm interested to know what exactly a dynamic require is and if it's possible to replace the dynamic require with a normal one.
Sadly you cannot use require dynamicly in react-native :/
You will have to make a require for every single thing you will need.
Check out this for example:
Dynamic require not supported in React Native

bootstrap and npm - How do I import only the "reboot.scss" file in my project?

I've started a simple playground project where I only have installed bootstrap (with npm install bootstrap), and the scss compiler package (with node install nose-sass).
I only need the reboot.scss code at the moment.
I would like to import it in my custom scss file and then start writing my bespoke scss code.
My scss file is in /src/scss/style.scss.
And I'm trying to import the bootstrap reboot file, which is /node_modules/bootstrap/scss/bootstrap-reboot.scss.
In my /src/scss/style.scss I wrote:
#import "../../node_modules/bootstrap/scss/bootstrap-reboot";
I need the reboot style from bootstrap. Is there a better way to do it?
Yep, you are correct.
Check this out: this is the documentation on how to do exactly what you mention.
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing

GSAP not working using NPM in node/express/ejs project

I have a node.js project. I'm building a website using EJS templates. I want to use GSAP for my animations. I created a /public/js/gsap-homepage.js file that I linked to my /views/homepage.ejs.
When I used the GSAP3 CDN everything works. But when I want to try it using NPM it doesn't work.
I installed gsap using npm install gsap. Then in gsap-homepage.js I imported gsap as per the GSAP docs import { gsap } from "gsap". I even tried import { gsap } from "gsap/dist/gsap" and const gsap = require("gsap/dist/gsap").gsap. But none of them work.
How to make GSAP work in npm. What am I doing wrong here?
I recently upgraded my server-side rendered React app from gsap#2.1.3 to gsap#3.6.0. I installed it with this command: npm install gsap#3.6.0
In the previous version was using their umd subdirectory. But I wanted to try to use their main build. I was able import the base library fine using import gsap from 'gsap'. However, when I tried to import the ScrollToPlugin I got an error.
I ended up having to go back to use the umd method. For the new version that meant importing like so:
import { gsap } from 'gsap/dist/gsap'
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'
https://github.com/greensock/GSAP
https://greensock.com/docs/v3/Installation#npm

NodeJS relative import using `#` - Module is not installed in WebStorm

I am working on a project created by others in Node.JS.
Noticed a pattern I've never used before.
All the inside imports are used with #.
ex: import Config from '#config/config';
Where config is a file inside /src/config/config.js.
Now, it's working flowlessly but WebStorm keeps complain about Module is not installed and suggest me to Install #config/config as dev dependency.
The real issue behind it is that WebStorm isn't able to autocomplete or help me in any other way regard those imports.
And how do I configure WebStorm to understand this?
Thanks!

How to include ts-topojson into Angular2 app?

How would I import ts-topojson into an Angular2 project so I get Typescript typings? I installed the module using npm and tried to include with a simple import statement but the linter said it couldn't find 'topojson'.
import { Topojson } from 'topojson';
This is my first Angular2 project so I'm very new at this so I could possibly be missing a crucial step.
You could install the package #types/topojson with npm install #types/topojson --save-dev.
Now you can use topojson the following way within a component:
import {topology, feature, ...} from 'topojson';
Or with:
import * as t from '#types/topojson';
Try the following:
Make sure the script is loaded into your scripts in .angular-cli.json.
At the top of a file you want to use the library, add declare let Topojson: any;.
Now you can use Topojson without the TS compiler yelling at you, because it will be implied that it's loaded as a script and made available to you during runtime.

Resources