"Why is this code showing an error when I run it in Reactjs?" - PhpOut

SOURADEEPHAZRA
May 19, 2023
387 views
1 vote
2 Answers

Compiled with problems:
×
ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 201:12-34
Module not found: Error: Can’t resolve ‘querystring’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesbody-parserlibtypes’

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/content-disposition/index.js 21:15-39
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulescontent-disposition’

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/cookie-signature/index.js 5:13-30
Module not found: Error: Can’t resolve ‘crypto’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulescookie-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 ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesdestroy’
ERROR in ./node_modules/destroy/index.js 16:13-30
Module not found: Error: Can’t resolve ‘stream’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesdestroy’

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: { "stream": require.resolve("stream-browserify") }’
– install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/etag/index.js 20:13-30
Module not found: Error: Can’t resolve ‘crypto’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesetag’

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 21:12-31
Module not found: Error: Can’t resolve ‘fs’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesetag’
ERROR in ./node_modules/express/lib/application.js 22:11-26
Module not found: Error: Can’t resolve ‘http’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’

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/application.js 29:14-37
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’

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/express/lib/request.js 17:11-30
Module not found: Error: Can’t resolve ‘net’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’
ERROR in ./node_modules/express/lib/request.js 19:11-26
Module not found: Error: Can’t resolve ‘http’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’

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/response.js 20:11-26
Module not found: Error: Can’t resolve ‘http’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’

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/response.js 23:11-26
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’

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/express/lib/utils.js 23:18-40
Module not found: Error: Can’t resolve ‘querystring’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’

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/express/lib/view.js 16:11-26
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’

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/express/lib/view.js 17:9-22
Module not found: Error: Can’t resolve ‘fs’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesexpresslib’
ERROR in ./node_modules/mime-types/index.js 15:14-37
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesmime-types’

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/mime/mime.js 1:11-26
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesmime’

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/mime/mime.js 2:9-22
Module not found: Error: Can’t resolve ‘fs’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesmime’
ERROR in ./node_modules/parseurl/index.js 14:10-24
Module not found: Error: Can’t resolve ‘url’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesparseurl’

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/safe-buffer/index.js 3:13-30
Module not found: Error: Can’t resolve ‘buffer’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulessafe-buffer’

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: { "buffer": require.resolve("buffer/") }’
– install ‘buffer’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
ERROR in ./node_modules/safer-buffer/safer.js 5:13-30
Module not found: Error: Can’t resolve ‘buffer’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulessafer-buffer’

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: { "buffer": require.resolve("buffer/") }’
– install ‘buffer’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
ERROR in ./node_modules/send/index.js 22:9-22
Module not found: Error: Can’t resolve ‘fs’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulessend’
ERROR in ./node_modules/send/index.js 27:11-26
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulessend’

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/send/index.js 29:13-30
Module not found: Error: Can’t resolve ‘stream’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulessend’

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: { "stream": require.resolve("stream-browserify") }’
– install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/send/index.js 30:11-26
Module not found: Error: Can’t resolve ‘util’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulessend’

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: { "util": require.resolve("util/") }’
– install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/serve-static/index.js 18:14-37
Module not found: Error: Can’t resolve ‘path’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesserve-static’

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/serve-static/index.js 20:10-24
Module not found: Error: Can’t resolve ‘url’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_modulesserve-static’

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/zlib/lib/zlib.js 1:0-43
Module not found: Error: Can’t resolve ‘./zlib_bindings’ in ‘C:UsersSouradeep Hazracrwn-clothing-v2node_moduleszliblib’
ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss)
Module Error (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: loader misconfiguration
"engine" option is not valid
ERROR in ./src/routes/Navigation/navigation.styles.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/routes/Navigation/navigation.styles.scss)
Module Error (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: loader misconfiguration
"engine" option is not valid[text]`

This is my code :-

this is App.js


import Home from "./routes/home/home.component";
import { Routes, Route } from "react-router-dom";

import Navigatiton from "./routes/Navigation/navigation.component";

import SignIn from "./routes/signIn/signIn.component";

const Shop = () => {
  return <h1>This is my shop</h1>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigatiton />}>
        <Route index element={<Home />} />
        <Route path="shop" element={<Shop />} />
        <Route path="SignIn" element={<SignIn />} />
      </Route>
    </Routes>
  );
};

export default App;

this is firebase.utils.jsx


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration

import {
  getAuth,
  signInWithRedirect,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

import { getFirestore, doc, getDoc, setDoc } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyBVlqkaYXiRRUGwjmf6QGpcp6UWDjpLxNc",
  authDomain: "crwn-clothing-db-7c368.firebaseapp.com",
  projectId: "crwn-clothing-db-7c368",
  storageBucket: "crwn-clothing-db-7c368.appspot.com",
  messagingSenderId: "258645307768",
  appId: "1:258645307768:web:769eb1433a4910627fd88d",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const provider = new GoogleAuthProvider();
provider.setCustomParameters({
  prompt: "select_account",
});

export const auth = getAuth();
export const signInWithGooglePopup = () => signInWithPopup(auth, provider);

export const db = getFirestore();
export const createUserDocumentFromAuth = async (userAuth) => {
  const userDocRef = doc(db, "users", userAuth.uid);
  console.log(userDocRef);
};

// const userSnapshot=await getDoc(userDocRef);
// console.log(userSnapshot);

this is signIn.component.jsx

//import { signInWithGooglePopup } from "./utils/firebase/firebase.utils";
import { response } from "express";
import {
  signInWithGooglePopup,
  createUserDocumentFromAuth,
} from "../utils/firebase/firebase.utils";

// const SignIn = () => {
//   return <h1>SignIN page</h1>;
// };

const signIn = () => {
  const loggoogleuser = async () => {
    const user = await signInWithGooglePopup();
    createUserDocumentFromAuth(response);
    console.log(response);
  };
  return (
    <div>
      <h1>sign in page</h1>
      <button onClick={loggoogleuser}>sign in with google</button>
    </div>
  );
};

export default signIn;

Tags: node.js reactjs

Answers

- DejviEpa
- May 19, 2023 at 10:26 pm
- 0 votes
0
Try removing .component when importing import SignIn from "./routes/signIn/signIn.component"; import Navigatiton from "./routes/Navigation/navigation.component";

Login or Signup to reply.

0

There are several errors in your project compilation:

Error in body-parser module: Cannot resolve module 'querystring'. To fix this, you can add a fallback configuration to your webpack with resolve.fallback: { "querystring": require.resolve("querystring-es3") } and install the 'querystring-es3' package.

Error in content-disposition module: Cannot resolve module 'path'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "path": require.resolve("path-browserify") } and install the 'path-browserify' package.

Error in cookie-signature module: Cannot resolve module 'crypto'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "crypto": require.resolve("crypto-browserify") } and install the 'crypto-browserify' package.

Error in destroy module: Cannot resolve module 'fs' and 'stream'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "stream": require.resolve("stream-browserify") } and install the 'stream-browserify' package.

Error in etag module: Cannot resolve module 'crypto' and 'fs'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "crypto": require.resolve("crypto-browserify") } and install the 'crypto-browserify' package.

Error in express module: Cannot resolve module 'http' and 'path'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "http": require.resolve("stream-http") } for 'http' and resolve.fallback: { "path": require.resolve("path-browserify") } for 'path' and install the 'stream-http' and 'path-browserify' packages.

Error in mime-types module: Cannot resolve module 'path'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "path": require.resolve("path-browserify") } and install the 'path-browserify' package.

Error in mime module: Cannot resolve module 'path' and 'fs'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "path": require.resolve("path-browserify") } and install the 'path-browserify' package.

Error in parseurl module: Cannot resolve module 'url'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "url": require.resolve("url/") } and install the 'url' package.

Error in safe-buffer and safer-buffer modules: Cannot resolve module 'buffer'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "buffer": require.resolve("buffer/") } and install the 'buffer' package.

Error in send module: Cannot resolve module 'fs' and 'path'. To fix this, add a fallback configuration to your webpack with resolve.fallback: { "fs": false, "path": false }.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.