React v18 crypto module not found Breaking Change: webpack < 5 - reactjs

I've looked at about a dozen supposed solutions that didn't work for this problem.
My react application was working fine a couple of hours ago, and now this error keeps appearing, even when I make another react app.
I've looked at going to the webpack.config.js that's located in node_modules > react-scripts > config, but really baffled by where to add this supposed line of code:
resolve: {
fallback: { crypto: false },
},
I personally think React version 18 is broken.
Anyone know how I can resolve this? Thanks in advance.
Compiled with problems:
ERROR in ../node_modules/cookie-signature/index.js 4:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Micha\OneDrive\Desktop\APPS\REACT\HOLISTIC\DEVELOPER\v2\api\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 }
PS. I've done npm i crypto crypto-browserify cookie-signature
Tried modifying the webpack.config.js. No luck, hence I'm stuck.
I created a new webpack.config.js in the client folder.
The client folder was created using the terminal command npx create-react-app client.
In the file, I added.
module.exports = {
resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify")
}
}
};
Also, did npm i crypto-browserify, and restarted my react app. Still have the same error.
package.json file
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"cookie-signature": "^1.2.0",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"crypto-js": "^4.1.1",
"firebase": "^9.9.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-persist": "^1.0.2",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Related

Module not found Error when uploading code to server (React Js, Tailwind CSS, render.com)

When I run my program in local host, I get no errors, and it works perfectly. As soon as I uploaded to render.com server following adding Tailwind css to my project, It fails to build because
Module not found: Error: Can't resolve '../components/Navbar.js' in '/opt/render/project/src/src/pages'
I have checked my import statements and they all seem to be correct. I have also tried checking everything related to Tailwind that I added, and they all make sense. I have a suspicion the problem may be with the tailwind config file because maybe it is ignoring my component on the build?
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
}
Here is a page that imports Navbar (maybe the issue?)
import Navbar from "../components/Navbar.js";
function Home() {
return (
<div className="App">
<Navbar/>
</div>
);
}
I have tried all the other stack overflow similar questions but none of them worked, I have tried changing my imports to .js, checking my imports for invisible spaces, upper and lower case, I have also tried changing my tailwind css file.
this is my package.json file
{
"name": "ratemyjudge.com",
"version": "0.1.0",
"private": false,
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#mui/joy": "^5.0.0-alpha.63",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"firebase": "^9.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.2.0",
"react-rangeslider": "^2.2.0",
"react-router-dom": "^6.7.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^5.0.0",
"tailwindcss": "^3.2.6"
}
}
This is my entire repo: https://github.com/shreybirmiwal/ratemyjudge
Thank you so much for your help
This is a pretty weird issue that I have encountered previously in some of my projects!
I believe you renamed your "components" folder to "Components" or vice versa. Git has trouble recognising this rename and does not track it well!
I'd suggest you manually rename the imports and try!

Why is react-admin ignoring my proxy configuration?

I am in the middle of upgrading my project from react-admin v3 to v4. I am currently stuck because the proxy configuration line in my package.json file is not working. It was working fine in v3.
Here is my package.json file:
{
"name": "my-admin",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:80",
"dependencies": {
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.10.8",
"#mui/styles": "^5.10.8",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^13.0.0",
"#testing-library/user-event": "^13.2.1",
"gojs": "^2.2.16",
"gojs-react": "^1.1.1",
"http-proxy-middleware": "^2.0.6",
"jwt-decode": "^3.1.2",
"prop-types": "^15.8.1",
"query-string": "^7.1.1",
"ra-compact-ui": "^1.1.5",
"ra-data-json-server": "^4.4.1",
"react": "^18.2.0",
"react-admin": "^4.4.1",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "set PORT=3006 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
and my setupProxy.js file:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:80',
changeOrigin: true,
})
);
};
I have also tried using http-proxy-middleware as described in this article:
https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347
My app starts and runs fine, but all of the backend calls are being made to the same port that the app is running on (3006).
I have deleted the node_modules folder and the yarn.lock file, then re-ran yarn install and finally yarn start but nothing I do seems to make any difference.
Turns out the problem was only in my head.
I have not finished rewriting my dataProvider, so all of the ajax calls were failing. I saw the port 3006 on the calls and assumed the problem was due to the proxy. After I cleared my head, I realized that's not how proxies work. They do not rewrite the port in the URL. The proxy intercepts the call on the development server and proxies it over to port 80. That means the developer console in my browser will always show port 3006.
Anyway, once I get my dataProvider straightened out everything should be ok.

Chrome Extension Service Worker not Supporting Importing Other JS Files or NPM Packages

I am developing a Chrome Extension with React. In my service worker file, background.js, I need to import another JS file, which for simplicity, only exports an empty {} for now.
background.js
import store from './testImport';
console.log("Hello Service Worker.")
testImport.js
export default {}
but with no success. I get this error:
I searched for my problem, and most solutions suggested to add "type": "module" to manifest.json:
"background": {
"service_worker": "background.js",
"type": "module"
},
I did that and I got a new very vague error message:
An unknown error occurred when fetching the script.
I tried replacing the import with a require:
const store = require('./testImport');
console.log("Hello Service Worker.")
But these results in another error:
Uncaught ReferenceError: require is not defined
Anyway, I don't think require is the solution anyway. Import statements should work, as I've seen them used by others within service worker files and it worked for them. The problem is there are quite a few resources on the internet on this issue and I feel I've exhuasted them all.
Why don't import statements work in my service worker file? Am I doing something wrong?
UPDATE
#wOxxOm's suggestion to add ./ and .js when importing other JS modules works!
However, I need to import NPM packages into the service worker, and I get this error:
Uncaught TypeError: Failed to resolve module specifier "axios".
Relative references must start with either "/", "./", or "../"
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.41",
"#types/react": "^18.0.14",
"#types/react-dom": "^18.0.5",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.7",
"typescript": "^4.7.4",
"watch": "^1.0.2",
"web-vitals": "^2.1.4",
"webext-redux": "^2.1.9"
},
"scripts": {
"start": "react-scripts start",
"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "watch 'npm run build' src"
},
"watch": {
"build": "src/"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/chrome": "0.0.193",
"#types/react-scroll": "^1.8.3",
"autoprefixer": "^10.4.7",
"npm-watch": "^0.11.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.3"
}
}
When you run npm command. NPM replace package name to real path.
You need to just find real path so that chrome browser will find it.
Real path like this:
/node_modules/pkg-name/dist/main.js
Method 1.
Create path.js file and add this line.
const fullPath = await import.meta.resolve("package_name");
const path = fullPath?.match(/(\/node_modules.*)/)[0];
console.log(path);
then add this line inside scripts in package.json and run npm run path.
"path": "node --experimental-import-meta-resolve path.js",
copy console output text. Replace package name with this copied path.
Method 2
Install other npm package to find and replace
npm packages' virtual path to real path so that chrome browser will find it.
Install Path-fixxer
Add this line in path.js
import setAllPkgPath from "path-fixxer";
setAllPkgPath();
then run command : npm run path.
Now open browser to test it.
Note: It only work with esm npm packages.

Error: Catching was left unconfigured. It started flagging this error after i installed font-awesome in my react project

My project was working all fine until installed some font-awesome babel plugins to my project, ever since it has been throwing this error. I've tried uninstalling everything i installed but its still showing each time i start my project.
Here's the error message
Line 0: Parsing error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured for various types of caching, using the first param of their handler functions:
module.exports = function(api) {
// The API exposes the following:
// Cache the returned value forever and don't call this function again.
api.cache(true);
// Don't cache at all. Not recommended because it will be very slow.
api.cache(false);
// Cached based on the value of some function. If this function returns a value different from
// a previously-encountered value, the plugins will re-evaluate.
var env = api.cache(() => process.env.NODE_ENV);
// If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
// any possible NODE_ENV value that might come up during plugin execution.
var isProd = api.cache(() => process.env.NODE_ENV === "production");
// .cache(fn) will perform a linear search though instances to find the matching plugin based
// based on previous instantiated plugins. If you want to recreate the plugin and discard the
// previous instance whenever something changes, you may use:
var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");
// Note, we also expose the following more-verbose versions of the above examples:
api.cache.forever(); // api.cache(true)
api.cache.never(); // api.cache(false)
api.cache.using(fn); // api.cache(fn)
// Return the value that will be cached.
return { };
};
whenever i make changes and i try to check it on the browser, it always shows that error message.
I need help on resolving the issue,i have uninstalled the babel plugins and font awesome installed.
This is my package.json file
{
"name": "finders-market",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"formik": "^2.2.9",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-use-cart": "^1.13.0",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"styled-components": "^5.3.5",
"typeit-react": "^2.4.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24"
}
}
this is how my project looks like
image

REACT/create-react-app: Module not found crypto / Uncaught ReferenceError: process is not defined

I have seen a couple related questions on this topic but nothing has quite worked!
I am working on a react app and had a bunch of module not found errors once i hit npm start. A few of the not found modules were 'util', 'buffer', 'stream', and 'crypto'. I was able to resolve all but crpyto by npm installing the names here.
For crypto, I'm not sure what I'm using that depends on it, but it is giving me big problems. To solve this, I installed crpyto-browserify and added "browser":{"crypto":false} to my package.json of my 'jwa' module in node modules (where it said i was having problems).
Once I did that, I get a reference error that "process is not found". I've never had this issue before. Including my package.json below, any tips??
To start the react app, I used npx create-react-app appName
Oh, one more note I also created a webpack.config.js file
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"jsonwebtoken": "^8.5.1",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Oh, one more note I also created a webpack.config.js file that looks like this:
const webpack = require('webpack')
module.exports = {
resolve: {
fallback: {
assert: require.resolve('assert'),
buffer: require.resolve('buffer'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
crypto: require.resolve('crypto-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
punycode: require.resolve('punycode'),
querystring: require.resolve('querystring-es3'),
stream: require.resolve('stream-browserify'),
string_decoder: require.resolve('string_decoder'),
sys: require.resolve('util'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url'),
util: require.resolve('util'),
},
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
]
};

Resources