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
Related
I'm trying to update the swiper.js library
I was using swiper version: 6.8.2,
Now I would like to upgrade it to a newer version 7.4.1
My App is written in React and Node js with SSR( I'm not using Next.js) and Node version: v14.11.0
Here is how my component code, looks like
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
const CustomView = () => {
return (
<Swiper>
</Swiper>
)
}
export default CustomView
When I run it I'm getting the following error in terminal
"message":"Must use import to load ES Module: /Users/Projects/ReactStarter/node_modules/swiper/react/swiper-react.js\nrequire() of ES modules is not supported.
Then I change Import to:
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js'
In Terminal error is printed:
"message":"Package subpath './react/swiper-react.js' is not defined by \"exports\"
Is there any way I can bypass this, since I'm using webpack so maybe I can somehow ignore it or something else
can u try in terminal
npm cache clean --force
npm rm -rf node_modules
and install again 3. npm i
Looks like a problem with next.js a temporary fix would be changing experimental.esmExternals to loose in your next.config.js and follow this thread for more updates regarding this issue.
module.exports = {
experimental: {
esmExternals: "loose",
}
};
Updating the library might not be a option.
Considering you are using React 18.
https://github.com/nolimits4web/swiper/issues/4871
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
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
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.
I am trying to use pouchdb with Typescript. I cannot link to the pouchdb module.
import { PouchDB } from "pouchdb"
reports that it cannot find module pouchdb, even though it is in node_modules.
I also cannot find the appropriate typings for pouchdb.
I'm doing this in Ionic, so I may be missing a step on getting the types file loaded properly.
Make sure your types are installed with:
npm install --save-dev #types/pouchdb
At the top of your data service import pouch like so:
import * as PouchDB from 'pouchdb';
* edit *
I don't have all the facts, but this is my current understanding.
Typings is no longer needed in Typescript >2.0
I believe typescript now works automatically with types files installed from DefinitelyTyped.
DefinitelyTyped is an official central repository that is kept current like npm.
And even if I'm dead wrong about all this, DefinitelyTyped is still better than typings and has a much bigger community.
Cause i just had this Problem, For Angular 2 + Typescript the correct way to use PouchDB (using angular-cli) is to:
ng new SOMENAME
npm install --save pouchdb
npm install --save-dev #types/pouchdb
In your app.component import PouchDB from 'pouchdb';
In your App Component Class public db: any; and to init this.db = new PouchDB('test'); // , {storage:'persistent'} not working in typescript without updating typings
see https://github.com/nolanlawson/pouchdb-find/issues/201.
If you have problems installing the packages on windows with an EPERM Error use (f.e.) npm install --save pouchdb --no-optional to disable the warning. The installation should still be ok. For more info see https://github.com/npm/npm/issues/17671
I had the same problem trying to import into Angular 6.
Your imports seem fine:
import PouchDB from 'pouchdb';
import PouchFind from 'pouchdb-find';
PouchDB.plugin(PouchFind);
What you may be missing is you need to add this to your polyfills.ts file:
(window as any).global = window;
(window as any).process = {};
(window as any).process.nextTick = setTimeout;
import PouchDB from 'pouchdb';
export abstract class PouchDBDatabase {
private _database: PouchDB.Database<Sheet>;
constructor(protected DATABASE_URL: string) {
this._database = new PouchDB(this.DATABASE_URL);
}
}
And you're good to go with typescript + pouchDB :)
I managed to get the module recognised by using
declare function require(a)
var PouchDB = require("pouchdb")
I have given up type checking, but at least I can make progress.