I tried installing Twilio Client package for an integration in my project and I'm getting this error:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
When importing the Device object:
import { Device } from 'twilio-client';
I searched the error and tried a bunch of things but nothing works. Is this a Twilio bug or something I can fix?
EDIT: I tried using the new version because apparently this was deprecated, the new version is #twilio/voice-sdk but I'm getting the same error.
Idk if this will work for everyone but doing npm i util fixed it.
Related
I am trying to transition an electron application built with create-react-app to ViteJS. So far, I've managed to get a lot of things fixed, but I'am having an issue with one of our dependencies.
My project uses an internal library built in golang for performance reasons, and this library is called from the main process of the electron application. However, I get the following error when running vite build.
[commonjs--resolver] Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
This happens with the following line
module.exports = require('./build/Release/goapi.node');
goapi.node is the compiled library. This library is compiled using node-gyp, and I'm 100% sure that the compilation is right, because it is working with the current setup that uses create-react-app.
Is there a plugin to add in the vite config to support importing native modules? If not, how can I get around this problem?
I am getting the following errors on my browser concerning webpack5.
I have located answers in here but the authors are directing to a file called 'webpack.config.js' which apparently exists in the root folder of my app. The problem is, I cannot find such a file in the root folder of my app. Please can someone advise?
You likely can't see the config file because you built your app using create-react-app so configuration is managed for you. Try installing stream-browserify npm install stream-browserify
You could also use something like https://www.npmjs.com/package/#craco/craco which allows you to keep react bundled up but also gives you access to change webpack configuration.
The last option would be to downgrade.
TL:DR: replace jsonwebtoken with jwt-decode
I have had some trouble with upgrading my existing react app to the latest version. Every time I do I get the following errors
Can't resolve 'buffer' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'
Can't resolve 'stream' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'
Can't resolve 'util' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'
Can't resolve 'crypto' in '/home/user/projects/trash/tokentest/test/node_modules/buffer-equal-constant-time'
I can get rid of all these except crypto by installing the buffer stream and util packages.
I tried installing crypto, crypto-browserify and crypto-js.
I did figure out I could make it work by removing jsonwebtoken from the project. But its not fully functional anymore after that, since its needed for user authentication.
For testing I created a completely fresh create-react-app project. It works out of the box. But as soon as I install and import jsonwebtoken, I get the exact same errors again. Meaning even on a completely clean project, jsonwebtoken cannot be used.
Is there a way to fix this? Because I would like to upgrade my project and use jsonwebtoken.
jsonwebtoken is a Node.js module, your previous use of it in a react application relied upon a polyfill of the Node.js std modules. This most likely a) relied on slow js cryptography that isn't maintained anymore and lacks feature parity with Node's crypto and b) increased your js bundle size considerably. Updating react likely meant updating webpack which no longer defaults to using the questionable crypto polyfill.
It is better to rely on modules made for either browsers or "universal", you can discover such modules amongst the ones listed on jwt.io under "JavaScript". Out of the ones listed there, jose uses purely available Web APIs.
Yes. Latest React Version is not supporting jsonwebtoken library. Use react-jwt library in react side to decode token
Library Link: https://www.npmjs.com/package/react-jwt
I am working on a project originally created with Create React App (CRA), that I eventually switched over to using CRACO due to the need to handle some LESS files. I am now trying to integrate a separate WebAssembly project that exports a struct that I would like to use in the react project. I wrote bindings using wasm-bindgen, and published the result with wasp-pack as an npm module (bundler build). That produces an NPM package that I published.
Next I followed this tutorial that uses CRACO and imports the wasm code from a library. Essentially the code is the same on the react end, but I have a struct that should be wrapped instead of a function. However it doesn't work as expected. When running, I get an error below:
./node_modules/#my_scope/my_pkg/my_pkg_lib_bg.js
Attempted import error: '__wbg_jsmystruct_free' is not exported from './my_pkg_lib_bg.wasm' (imported as 'wasm').
I am not exactly sure what might be causing this specific error (whether that is some issue in webpack, craco, the wasm wrappers, or some combination of the above). If there would be any additional info that would be useful, I would be happy to provide it. Thanks for all the help!
I'm also trying to follow the Tutorial How To Use PouchDB + SQLite For Local Storage In Ionic 2, which seems a good entry point for using pouchdb with Angular 2 / Ionic 2. My OS is OSx
After getting able to install typings 'require' ionic serve throws:
TypeScript error: (...) Error TS2304: Cannot find name 'require'.
I followed the installing typings require failed in macOSX and Install Typings require for Ionic2 application threads but it didn't help me. (beside of a better understanding of 'TypeScript')
the require files are under:
/ionic2-tutorial-pouchdb/typings/globals/require
any Ideas? The tutorial about 'install require' doesn't work for me.
thx Pitt
I'm guessing that you have a line of code like:
let PouchDB = require('pouchdb');
You do not need to use require for importing into Angular2. Instead you should use import like this:
import PouchDB from 'pouchdb';
Reference from one of the GitHub issues on the PouchDB GitHub account
The link you provided also uses import rather than require. Also in newer versions of typescript, Typings have been replaced with #Types.