How to import Ammo.js into react-babylonjs - reactjs

I'm trying to import Ammo physics engine into react-babylon project, build with CRA. I keep getting polyfill error:
Compiled with problems:X
ERROR in ./node_modules/ammo.js/builds/ammo.js 207:22-45
Module not found: Error: Can't resolve 'path' in 'C:\...\node_modules\ammo.js\builds'
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 }
ERROR in ./node_modules/ammo.js/builds/ammo.js 210:18-31
Module not found: Error: Can't resolve 'fs' in 'C:\...\node_modules\ammo.js\builds'
Component using import looks like this:
//#ts-ignore
import { default as Ammo } from 'ammo.js/builds/ammo';
Ammo();
...
<Scene enablePhysics={[gravity, new AmmoJSPlugin(false, Ammo())]}>
I assume the problem comes from WASM compilation but I have absolutely no idea how to tackle it. If possible I would prefer not to eject CRA.

you have to use #craco/craco to override webpack config

Related

Cant't Resolve URL Azure Keyvault in React

I am working on adding a secret key to my react app. When I import the dependencies I get this error
ERROR in ./node_modules/#azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27
Module not found: Error: Can't resolve 'url'
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: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
ERROR in ./node_modules/#azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27 Module not found: Error: Can't resolve 'url'
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: { "url": require.resolve("url/") }' - install 'url'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false }
Webpack 5 is the main source of the issue. It doesn't preload the Node.js polyfill.
To resolve this issue, try install npm install url, and add it into webpack.config.js:
module.exports = {
// ...
resolve: {
fallback: {
url: require.resolve("url/")
}
}
// ...
};
For reference : Resolve | webpack
Alternatively, Try to remove complete dependency tree and rebuild it using npm and react-scripts in a package. At least until I find a suitable solution, everything runs smoothly with json version 4.0.3.
And u can also fix this issue through
npm audit fix --force
For reference :
reactjs - Can't resolve 'url' in node_modules error when trying to access Azure Key Vault with React

React acting weird (compiled with problems 9 errors)

I've been working with react using mern stack. Everything was fine until I used JSON.parse in a function when getting data out of the mongo database. I clicked save and I got 9 errors. I removed all the code, everything relating to it as if I never attempted it and I'm still getting these 9 errors shown below:
Any pointers?
Compiled with problems:X
ERROR in ./node_modules/cookie-signature/index.js 4:13-30
Module not found: Error: Can't resolve 'crypto' in '/Users/sebastianrichards/ReactProject/client/node_modules/cookie-signature'
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 }
ERROR in ./node_modules/destroy/index.js 15:17-41
Module not found: Error: Can't resolve 'fs' in '/Users/sebastianrichards/ReactProject/client/node_modules/destroy'
ERROR in ./node_modules/destroy/index.js 19:11-26
Module not found: Error: Can't resolve 'zlib' in '/Users/sebastianrichards/ReactProject/client/node_modules/destroy'
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 }
ERROR in ./node_modules/etag/index.js 18:13-30
Module not found: Error: Can't resolve 'crypto' in '/Users/sebastianrichards/ReactProject/client/node_modules/etag'
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 }
ERROR in ./node_modules/etag/index.js 20:12-31
Module not found: Error: Can't resolve 'fs' in '/Users/sebastianrichards/ReactProject/client/node_modules/etag'
ERROR in ./node_modules/express/lib/response.js 25:11-26
Module not found: Error: Can't resolve 'http' in '/Users/sebastianrichards/ReactProject/client/node_modules/express/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: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
ERROR in ./node_modules/express/lib/utils.js 31:18-40
Module not found: Error: Can't resolve 'querystring' in '/Users/sebastianrichards/ReactProject/client/node_modules/express/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: { "querystring": require.resolve("querystring-es3") }'
- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "querystring": false }
ERROR in ./node_modules/mime/mime.js 3:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/sebastianrichards/ReactProject/client/node_modules/mime'
ERROR in ./node_modules/send/index.js 29:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/sebastianrichards/ReactProject/client/node_modules/send'
Try doing a clean install of npm by deleting /node_modules and running npm install. Also check that the package in the error exists within your package.json.
I solved it, I removed import { json } from 'express/lib/response'; from the imports on one of the react files and it worked

Webpack not compiling with React and React Router Dom

I am trying to use react and react router dom and all of a sudden I got like 75 errors all saying similar thing to this
Module not found: Error: Can't resolve 'assert' in 'C:\Users\nlowi\Desktop\onlyhands\node_modules\#google-cloud\firestore\build\src'
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: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }

webpack < 5 used to include polyfills for node.js core modules by default

I am beginner to react js. Please someone provide input for below issue.
In local system react js application is working fine but when i am generating build from Jenkins compilation is failing and its throwing below error.
Module not found: Error: Can't resolve 'timers' in '/usr/src/app/src/component'
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 }

I am having issues importing react instagram in my project

I installed it using npm i react-instagram-embed. It however gave me an error when i tried importing it in my project using the command:
import InstagramEmbed from 'react-instagram-embed.
It return the error below
Module not found: Error: Can't resolve 'querystring' in '/home/marcos/Desktop/REACT/Instagram-clone/instagram/node_modules/react-instagram-embed/es'
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: { "querystring": require.resolve("querystring-es3") }'
- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "querystring": false }

Resources