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
Related
I'm very confused.
I just saved my code to github from windows, where the vue.js app compiles successfully. But when opening exactly the same code in ubuntu, with the same versions of vite and vue, the app does not compile
I receive multiple errors when trying to apply destructuring.
In auth.js i have:
const test = new Test(); export default {test}
And, in another file I call this
import {test} from '/auth.js'
I received this:
No matching export in "src/auth.js" for import "test"
On windows everything works perfect. but when running "npm run dev" on Ubuntu I get this error.
I already tried:
-remove node_modules
-regenerate package-lock.json files
-update versions
the versions of vite, vue, node and npm are exactly the same on windows and ubuntu.
Some help?
You are exporting an object and attempting to destructure it when importing. However, this is the syntax for importing named exports and since you don't have a named export the error is occurring.
You should either do
export default test
import test from './auth.js'
Or
export { test }
import { test } from './auth.js'
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
Im writting a web with Angular 6. I need to hash a string client-side, so i'm using createHash("sha256") from 'crypto'.
actually, I just wrote createHash and vscode suggest me the import, which looks like this:
import { createHash } from "crypto";
(this way of importing seems to be fine, and it's used in some typescript tutorial, here) and then:
var hashed = createHash("sha256").update(data).digest()
all syntax is being suggested by vscode, with docstrings and everything. But at the moment of compile with npm start I get:
ERROR in src/domain/User.ts(2,28): error TS2307: Cannot find module 'crypto'.
as far as I could understand, crypto is now built-in into node, and I shouldn't have any problem importing it.
also notice that if I run node in terminal to open a REPL, entering 'crypto' gives me an output that suggest that everything works well.
Here are the versions of everything I think that cares:
node --version: v10.15.1
ng --version:
Angular CLI: 6.2.9
Node: 10.15.1
OS: linux x64
Angular: 6.1.10
typescript 2.9.2
webpack 4.16.4
Any help will be appreciated.
For Typescript 2.* and Angular 2+ -
Install and add this package to the devDependencies.
npm install #types/node --save-dev
In tsconfig.app.json under the compilerOptions, add this -
"types": [ "node" ],
You need to install the dependency. There was the same question, try to do the same, it must help How to use 'crypto' module in Angular2?
I had the same issue. The first solution I found was to add the following to packages.json
"browser": {
"crypto": false
}
Since all I wanted was to generate a sha256 digest to use a an index I removed crypto-js and #types/crypto=js and replaced it with jshashed.
yarn add jshashes
I then modified my digest service to reflect the new library:
import { Injectable } from '#angular/core';
import * as JsHashes from 'jshashes';
#Injectable({
providedIn: 'root'
})
export class CryptoService {
getSha256HEX(value: string): string {
const hash = new JsHashes.SHA256;
return hash.hex(value);
}
}
Simply add CryptoService to your module file apps.module.ts
import { CryptoService } from '#services/crypto.service';
Note: The #services path defined in tsconfig.json
All that is left is to declaref CryptoService in the constructor were needed:
constructor( private _crypto: CryptoService; ) {}
and use it by passing a string, or if compound data (like and HTTP query string to build a cache key) stringify it.
myHash = this._crypto.getSha256HEX(JSON.stringify(_compoundDataStruccture));
Note: jshashes supports
Digests:
MD5
SHA1
SHA256
SHA512
HMAC
RIPEND-160
Also:
Base64 encoding/decoding
CRC-32 calculation
UTF-8 encoding/decoding
If you are making a server side application for NodeJs using typescript then you simply need to install #types/node using npm i #types/node -D and then you should be able to import it using import * as crypto from "crypto"
I'm trying to prototype an Electron app using Angular 2 (configured with the latest webpack-based angular cli) for the gui, but I'm stuck since I don't get how to import Electron api in my angular2 components. Specifically I want to be able to open a new BrowserWindow at the click on a button in the ui... so:
<button type="button" (click)="openNewWindow()">
open
</button>
and in my component:
openNewWindow() {
let appWindow = new BrowserWindow({width: 800, height: 600});
appWindow.loadUrl('http://www.google.com');
}
but... how can I import BrowserWindow?!
By using:
import { BrowserWindow } from 'electron';
I get a "no module error" and by following the answer to this question: Webpack cannot find module 'electron' I get:
syntax error near unexpected token ( var electron = require('./')
What should I do?
ps. by running "electron ." without the BrowserWindow import the app is working properly
Run the command npm install electron #types/electron
Then import it normally using
import { ipcRenderer } from 'electron'.
If you run into any problems, try to run npm eject, a webpack.config.js will be generated, add "target": "electron-renderer" at the top of module.exports
Set this in index.html
<script>
var electron=require("electron");
</script>
Add this line in typings.d.ts file
declare var electron: any;
Use inside the component like this example:
const {ipcRenderer, clipboard} = electron;
clipboard.writeText('Electron is ready!!');
I tried to work with angular-cli and Electron and was not able to make them to work together. It's the reason why I started the following project: https://github.com/osechet/angular-tour-of-heroes-webpack
It integrates Angular 2 with webpack and Electron. It's based on the Angular 2 tutorial (with unit tests). When running Electron in dev mode (npm run start.desktop), it livereloads the sources.
To complete the answer given by chaouechi souhail.
As I understand his answer aims to solve the situation where the angular app is directly embedded in the electron app.
If for some reason you are using two separate projects whereof one is the electron app which embeds the other as a web app using one of electron's webview components you might find the following approach helpful aswell.
In your electron app you'll have something like
<webview id="webview" src="http://localhost:4200/" nodeintegration></webview>
In your angular project you
install the electron nodejs module, ie npm install electron . The types module mentioned by chaouechi might suffice, I do not know.
you eject the webpack config through ng eject
in webpack's config (webpack.config.js) you define electron as an external module such that webpack does not attempt to build it into the ng app, extend the exports as below
module.exports = {
//...
externals: {
electron: "require('electron')", // tell's webpack how to import the electron module within your angular app after being packed
//...
},
//...
}
Now, in your ng components, it should be possible to include electron classes as follows: import { remote } from "electron";
Update as of 3/20/2021
Angular CLI v11
This information was pretty hard to find so I'm answering in as many places as I can that has outdated info.
There are a few simple steps.
Add #angular-builders/custom-webpack (this saves you from ejecting angular's current webpack file which we don't really want to touch).
npm i -D #angular-builders/custom-webpack
Modify your angular.json to use the package you installed and a custom webpack file that you create (more detailed instructions on the package's readme)
Make your custom webpack file look like this:
module.exports = {
target: "electron-renderer",
};
literally that's it. You don't need anything else in your webpack file and you should be all set to use electron as you expect. No need to create your own typings file or anything.
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.