I'm trying to use an NPM package called "libsodium-wrappers" inside a browser with React using Create React App, but getting the following error:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
After searching the web about this, I found that I may downgrade the "react-scripts" to version 4, but I really don't want to do this, as I will need to reinstall everything and this may break things.
Are there any working solutions to this besides the above one?
Thanks
It may be related to a component library you may be using. I came across you question while attempting to address this very same issue. I'm using react-bootstrap-table2 in a project that is causing this issue for me. I believe I may have resolved it by installing the events package (specifically for react-bootstrap-table2's needs. In this case maybe try this:
yarn add path -D
Hopefully in this case that may "bump" the needle in a positive direction for you.
Do yarn add util (alternatively, npm install util). It worked for me.
Related
I am working on a React app that focuses on getting an mp3 file from a server but I am getting a CORS error. While trying to follow a tip to enable CORS I started off by installing express and cors via npm ('npm install express' and 'npm install cors'). However I am now getting 30 compile errors. Here is one such error message:
ERROR in ./node_modules/body-parser/lib/read.js 24:11-26
Module not found: Error: Can't resolve 'zlib' in '/home/brian/Projects/music-player/node_modules/body-parser/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
How do I solve this issue and what are these webpacks and polyfills? Thanks in advance for helping.
Unfortunately, that's not a lot of information on how your app is set up. I guess you are trying to install express (to set up your server) inside your frontend app. If that is the case I would suggest you uninstall it from react app and install it in another directory.
However if the issue still persists this is what works for me. On my side, there was an issue with npm cache.
try to clean your npm cache: npm cache clean --force
If that does not work:
delete your node modules
delete package-lock.json file
use npm install to get the updated node modules and new package-lock.json file
Polyfill is used to implement features on old browsers that do not support a specific feature (for example array.includes() is not supported by Internet Explorer 11)
Webpacks is a module bundler. Its purpose is to compile JavaScript modules and it basically takes your project dependencies (package.json) and generates a dependency graph.
Now regarding the CORS issue. Do you own the server you are trying to retrieve mp3 data? Then you should allow cross origin from that server, setting appropriate headers in the server response: Access-Control-Allow-Origin: *
If you do not own, or you do not have access to the server, you can set up your own server to handle api calls and retrieve data from another server without any CORS issue. You can do it with Express and then request the resource via your server, and send the response back to your frontend.
Just note that you cannot fix the CORS issue directly from the frontend!
I'm using wallet connect, but when I try to do the connect it gives me this error:
Module not found: Error: Can't resolve 'crypto'
And then it gives me this suggestions:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js
core modules by default. This is no longer the case. Verify if you
need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: {
"crypto": false }
I tryed but didn't work, somebody can help me?
The code of the connection is the same as how the website explain.
(I'm using React)
here more: https://docs.walletconnect.com/quick-start/dapps/node
I have encountered this issue multiple times. This is because of webpack version 5 which introduces breaking changes. There are 2 solutions to this:-
Either follow what is written in this article (make sure to install and add a fallback for crypto in the same manner as mentioned for others in this article).
Downgrade react-scripts from 5 to 4.0.3 and use with an LTS version of NodeJS.
Option 2 is easier and I would prefer it. In case you do too, follow these steps:
Run npm uninstall react-scripts.
Run npm install react-scripts#4.0.3.
Run npm run start to check if this works. If there is any error, delete the node_modules and then reinstall using npm install that should sort things out.
I'm trying to get i18n message extracted (defined by react-intl's defineMessages) to work properly in a CRA using TypeScript.
I've got an existing react app bootstrapped by CRA with a couple of hundrets of lines of code. So rewriting the application w/o TypeScript isn't an option.
Here's what i've tried so far:
First Attempt
Following this guide in order to get it to work.
When closely following the guide (although react-intl-cra is deprecated) the language files will generate properly.
However if you create the app using create-react-app react-intl-example --typescript and change the script to
"extract:messages": "react-intl-cra 'src/**/*.{js,jsx,ts,tsx}' -o 'src/i18n/messages/messages.json'"
it will break with a compiler error.
Second Attempt
Since react-intl-cra was refering to a react-app-rewired solution, I've tried adding it alongside customize-cra and babel-plugin-react-intl to a freshly generated CRA (using TS). However no luck there as well and after some short period of research I found that it's officially not supported.
Third attempt:
Adding extract-react-intl-messages to my project and running:
$ npx extract-messages -l=en,ja -o app/translations -d en --flat false 'src/**/!(*.test).tsx'
failed with an error as well.
I ran out of ideas, hence I came here to ask. From what I've seen TypeScript has been well advertised in the last couple of years and I don't think I have to justify that React is still pretty hyped. Moreover I can't imagine, that i18n is an uncommon concern in application development.
However I wasn't able to find any up-to-date guide or anything useful on npmjs.com.
TL;DR;
What I need:
Extract messages from defineMessages from react-intl into json files
Must work in a CRA using --typescript
Should not utilize npm run eject
What I've tried:
react-intl-cra
react-app-rewired + customize-cra + babel-plugin-react-intl
extract-react-intl-messages
It's explained here: https://github.com/akameco/extract-react-intl-messages#typescript
Basically you need to
npm install --save-dev #babel/core #babel/preset-typescript #babel/preset-react
and add
#babel/preset-typescript
to your .babelrc:
{
"presets": [
"#babel/preset-react",
"#babel/preset-typescript"
],
}
Then you can run
npm run extract-messages 'src/**/*.[jt]sx'
I have a React App using Create-React-App. I've used the Map() datastructure included in ES6 in my app. However, in IE11 it does not work. Shouldn't Babel (under the hood of Create-React-App - I did not eject) take care of this?
If not, is there there any solution for that?
As others already mentioned, you are going to need a polyfill to add the functionality when it's not natively supported by the browser in question. Since you're already using Babel, the easiest way to do this is by using a Babel polyfill.
If you don't want to add another dependency, you can use the Map polyfill found here.
No.
Use babel-polyfill for cross-browser babel support:
npm install --save babel-polyfill
If you're using webpack/browserify then here's how you should incorporate the polyfill:
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
If you're still unclear, read the documentation here.
I installed messageformat from npm for use in my angular-boostrap project in conjunction with angular-translate.
If I simply add messageformat v0.3.1 via CDN, everything works as expected. But I would like to use messageformat installed from npm. The trouble is, I have no idea how. None of the scripts in the messageformat npm package looks anything like the one on CDN. I am wondering if I need to build it or something? But then again, the documentation on npm for messageformat does not mention anything apart from "npm install...".
What am I missing?
[Edit]
There is both a bin and a lib folder in the project. Both contain messageformat.js, but none of them are working, and they look nothing like the one from CDN. If I include node_modules/messageformat/lib/messageformat.js I get a "module is not defined" error. If I include node_modules/messageformat/bin/messageformat.js I get "invalid or unexpected token" ... Therefore I suspect there is a step missing to get a script like the one from CDN
you need to add the files instead of cdn :
<script src="path/to/node_module/messageformat/messageformat.js"></script>
It turns out that version 0.3.1 of the npm package did not include a UMD version of the script, but since then version 1.0.0 is out, and a script ready for use in browsers now ships with the npm package.
https://github.com/messageformat/messageformat.js/issues/157