Category: javascript

I have set up Google Firebase for a site hosted elsewhere. I am getting an error that says “Uncaught TypeError: Cannot read properties of undefined (reading ‘getAuth’) at HTMLFormElement.” when trying to initialize the Auth library from Firebase. I have tried many various alternate versions of the command to no avail. It appears as though the regular Firebase app initializes properly, however.

The line causing the error is in auth.js “const autho = auth.getAuth(app);” Here is my setup.

HTML file calls require.js library:

<script src="../components/scripts/require.js" data-main="../components/scripts/auth"></script>

auth.js using require.js’s require to import libraries:

require.config({
    paths: {
       'firebase': 'https://www.gstatic.com/firebasejs/8.10.1/firebase-app',
        'auth': 'https://www.gstatic.com/firebasejs/8.10.1/firebase-auth',
        //'firestore': 'https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore'
    }
});

require(['firebase'], function (firebase) {
    require(['auth'], function (auth) {
            const registerForm = document.querySelector('#register-form');
            const continueButton = document.getElementById("continueButton");
            var email = "";
            var username ="";
            var alphaNumeric = /^([0-9]|[a-z])+([0-9a-z]+)$/i;

            const firebaseConfig = {
                                  apiKey: "AIzaSyB4L71q-5qsAD2RbzYkPI8S66t1-gPmLlc",
                                  authDomain: "milkywaymedium.firebaseapp.com",
                                  databaseURL: "https://milkywaymedium.firebaseio.com",
                                  projectId: "milkywaymedium",
                                  storageBucket: "milkywaymedium.appspot.com",
                                  messagingSenderId: "165659589186",
                                  appId: "1:165659589186:web:14f35c3010b2e5600c0bdb",
                                  measurementId: "G-WGKXQT89RQ"
                                    };

                    // Initialize Firebase
                    
                    //const autho = auth.getAuth(app);
                    //const autho = firebase.getAuth();
                    //const autho = firebase.auth();
                    //const db = firebase.default.firestore;

                    function passCreds() {
                        console.log("Passing credentials...");
                        email = document.getElementById("email").value;
                        username = document.getElementById("username").value;
                            
                        if (email != "" &&
                            email.includes("@") &&
                            email.includes(".") &&
                            email.length > 5 &&
                            !email.includes(" ") &&
                            username != "" &&
                            username.length > 2 &&
                            username.match(alphaNumeric)) {
                                
                                console.log("Requirements met...");
                                
                                const labelEmail = document.getElementById("label-email");
                                const labelUsername = document.getElementById("label-username");
                                const captionEmail = document.getElementById("caption-email");
                                const captionUsername = document.getElementById("caption-username");
                                const box1 = document.getElementById("box1");
                                const box2 = document.getElementById("box2");
                                const button1 = document.getElementById("button1");
                                
                                labelEmail.innerHTML = "<b>Password</b>";
                                labelUsername.innerHTML = "<b>Confirm Password</b>";
                                captionEmail.innerHTML = "Please enter a password that includes a number or symbol with at least eight characters...";
                                captionUsername.innerHTML = "Please retype your password to confirm it is correct...";
                                box1.innerHTML = `<input type="password" placeholder="Example: Andr0meda" id="password" name="password" required>`;
                                box2.innerHTML = `<input type="password" placeholder="Example: Andromed@" id="confirmPassword" name="confirmPassword" required>`;
                                button1.innerHTML = `<button class="button-login" style="width: 100%; height: 55px;" type="submit">CONTINUE</button>`;
                                console.log("Credentials passed...");
                        }
                        
                        else {
                            console.log("Your credentials do not meet the standards.");
                            email = "";
                            username ="";
                        }
                    }

            continueButton.addEventListener('click', (e) => {
                passCreds();
                });

            registerForm.addEventListener('submit', (e) => {
                // Create account
                e.preventDefault();
                const password = registerForm['password'].value;
                const confirmPassword = registerForm['confirmPassword'].value;
                console.log(email, username, password, confirmPassword);
                
                const app = firebase.initializeApp(firebaseConfig);
                const autho = auth.getAuth(app);
                
                createUserWithEmailAndPassword(auth, email, password)
                  .then((userCredential) => {
                    // Signed in 
                    const user = userCredential.user;
                    // ...
                  })
                  .catch((error) => {
                    const errorCode = error.code;
                    const errorMessage = error.message;
                    // ..
                  });
                
                //autho.createUserWithEmailAndPassword(email, password).then(cred => {
                //console.log(cred);
                //});
                
                //autho.createUserWithEmailAndPassword(email, password)
                //  .then((userCredential) => {
                //  // Signed in 
                //  var user = userCredential.user;
                //  console.log(userCredential);
                //  // ...
                 // })
                 // .catch((error) => {
                //  var errorCode = error.code;
                //  var errorMessage = error.message;
                    // ..
                //  });
            });
    });         
});

I have a deeply nested array (list) of objects. Each object has an array, that can be empty or can contain another object. I need to map through them and output a result that will represent a string made from the values of the names of each item.

The result should be ‘name 1, name 2, name 3’.

So far I have this and I am definitely not getting what I need:

const list = [
  {id: 1, Item: []},
  {id: 2, Item: [{name: 'name1'}]},
  {id: 3, Item: [{name: 'name2'}, {name: 'name3'}]},
  {id: 4, Item: []}
];

const getNames = (list) => {
  const list = [];
  _.forEach(list, (child) => {
      list.push(child.Item);
  });
  const filteredList = list.filter(value => JSON.stringify(value) !== '[]');
  const mappedList = _.map(filteredList, (el) => {
     return el.name;
  });
  return _.join(mappedList, ', ');
};

const result= getNames(list); 
//expected output: 'name 1, name 2, name 3' (string)

Any ideas?

I’m trying to use the titleBarOverlay option in electron.js but when I try to drag the window, it won’t drag. When I remove the option, the dragging feature works like normal. Is there a workaround for this?

index.js:

const { app, BrowserWindow } = require('electron');
let mainWindow;

app.on('ready', () => {
     mainWindow = new BrowserWindow({
          height: 600,
          width: 800,
          title: "Last Horizon",
          titleBarStyle: 'hidden',
          titleBarOverlay: {
              color: '#2e2e2e',
              symbolColor: '#ff6d4b'
          },
          webPreferences: {
             nodeIntegration: true
          }
     });
     mainWindow.removeMenu()
     mainWindow.loadFile('src/index.html');
});

index.html:

<!DOCTYPE html>
<html lang="en">
     <head>
          <link rel="stylesheet" href="styles.css"/>
     </head>
     <body>
          <div class="titleBar"></div>
          <div class="main">
               <h1>Hello World!</h1>
          </div>
     </body>
</html>

styles.css

html, body {
     -webkit-app-region: drag;
     background-color: #2e2e2e;
     color: white;
}

.titleBar {
     /* -webkit-app-region: drag; */
     background-color: #ffffff;
     width: 100%;
     height: 32px;
}

I’m trying to open a pdf in another tab. Upon clicking the link the first time, you are brought to an empty page, but after hard refreshing the page, the pdf displays correctly.

const Plot = ({name, pngUri, pdfUri, search, display, onHover}) => {
  return (
    <Card className={cx(plotSty, display ? null : hidden)} onMouseEnter={onHover}>
      <a href={pdfUri} target="_blank" rel='noopener noreferrer'>
        <CardHeader>{hlSearch(name, search)}</CardHeader>
        <CardImg src={pngUri} />
      </a>
    </Card>
  );
};

I did notice that when the new tab first loads, it tries run the main css and js files for the main webpages as well as just the pdf, and those show 404 errors (first image below). The “type” under inspect element > network shows html. While after a hard reload, only the pdf is run (second image below). The “type” here is pdf.

Anyone know what’s going on here?

I found this that might be related but I am not sure how I would apply to my situation Opening a link to download a pdf only works with hard reload and dev tools open

I want to use indexOf() and lastIndex() to add attributes by setAttribute after customizing the URL.

I try this code but not working:

<!DOCTYPE html>
<html>
    <head>
        <style>
          #two {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0px;
              top: 50px;
          }
        </style>
        
        <title></title>
    </head>
    <body>
        <select onchange="check()" id="selectbox" name="">
            <option hidden value="empty"></option>
            <option value="first">1</option>
            <option value="second">2</option>
        </select>
        <div id="two">
            <div id="de6854">
                <div style="width: 100%;height: 100%">
                    <iframe id="4526d" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100" style="width: 100%; height: 100%">
                    </iframe>
                    <iframe id="3ad34" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100" style="width: 100%; height: 100%">
                    </iframe>
                </div>
            </div>
        </div>

    </body>
    <script>
        function check(){
            var val = document.getElementById("selectbox").value
            var pic =  document.querySelector("#two iframe")
            var s = val.substring(0, val.indexOf('?resize='));
            var ss= val.substring(val.lastIndexOf(',10'));
            var f = s + ?resize= + '400' + ss;
            var s = s + ?resize= + '500' + ss;
            if(val==="first"){
            pic.setAttribute('src','f')
            } else if(val==="second"){
            pic.setAttribute('src','s')
            }
        }
    </script>
</html>

Any one can find solution of that problem:

I test write that code in JavaScript and running good:

var s = 'https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100';
s = s.substring(0, s.indexOf('?resize='));
document.write(s);

document.write('<br>');
document.write('<br>');

var ss = 'https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100';
ss = ss.substring(ss.lastIndexOf(',10'));
document.write(ss);

document.write('<br>');
document.write('<br>');

rr = s+"?resize="+"500"+ss
document.write(rr);

this code give result: https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=500,100

change 200 and add 500.

Consider a HTML-form, which includes several input fields and an icon from the material-icons library. I have added a click-listener to the icon, such that the form is submitted when clicking on the icon.

Now I want to go ahead and also add a keyup-Listener, such that the form will be submitted whenever I hit the ‘Enter’-key. I was trying to just add this listener to the form-element. This doesn’t work, however.

I am afraid that I might have to add this event-listener to each of my input fields and am curious on as there is another way of achieving what I want? Note, though, that I don’t have a submit-button, I only have the icon.

I have created pdf form. Some of the fields in this form contain JavaScript. As filling the pdf form is a frequent requirement, i am in the process of integrating it with my web application. This involves populating the pdf form with content from my web database. My developer has been successful in doing so with PDF-LIB. But the issue is with the fields with JavaScript. The JavaScript is not triggered until the pdf file is edited manually. If the pdf form is populated and encrypted with PDF-LIB and is ready for download (which is how i want it to work), the JavaScript is not triggered and the fields with JavaScript fail to work.
What would be the easiest way to trigger JavaScript in the pdf form whilst it is populated? I would like to automate this task aswell or it would defeat my purpose of shifting from manual workflow to automated.
My developer has opted for PDF-LIB mostly because it is compatible with the node js which he is using to build the web app. Or Maybe there are other options available to get this work done?
Can the expert members here please guide me through this

I apologies before hand for confusion..

I have a my main App.js file which has my react stack navigation

one of the pages in the navigation is the home screen, the home screen has a list of cards that have buttons that link to different pages…

So there’s the homescreen
then there’s a flat list that renders a component from a different .js file
then that .js file has a button…

How would I make it that when a user clicks on a button, that it within this component.. it takes them to the right page, and switches the home screen page to the specified page, even though the command is coming not from the current page

Question 1: How would I send navigation of pages through props…
Question 2: How would i make the navigation coming from a component with a button change for the main page…

I don’t know how to explain…
I have tried everything I know and it when the button is clicked it crashes, or just doesn’t work…

When I use else if to show an error message, it says “wrong username” even when the username is correct but the password is incorrect. Except for the last username in the “user” array.

But when I remove the else if it does nothing when a user enters the wrong username.

I think the for loop is creating that problem.
Am I using the wrong loop for the wrong purpose? what should I do?

Codesandbox link
https://codesandbox.io/s/nervous-moser-ybvwb3?file=/src/App.js:1066-1203

I am using a React client and a node js server (MERN Stack). The server runs good on my pc but when i try to connect from my mobile phone to the ipv4 of my pc with the correct port I am unable to send requests to the server. I tried to change the proxy of the React app but it doesn’t seem to work.
Do you know what the problem might be?
Thanks.

I’m having a problem overwriting the existing image that belongs to a product with a new one. My new image is uploaded locally but not in my database (MongoDB Atlas) The update seems to replace the original picture with a blank one. This is what my code looks like:

This is my file storage and constraints

const storage = multer.diskStorage({
destination: function (req, file, cb) {
    cb(null, process.cwd() + '/public/uploads/')
},
filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname))
}})

const upload = multer({
dest: 'uploads',
storage: storage,
fileFilter(req, file, cb) {
    if (!file.originalname.match(/.(jpg|png)$/)) {
        return cb(new Error('Please upload picture in jpg/png format'))
    }
    cb(undefined, true)
}});

This is my update route.

router.put('/edit-form/:id', upload.single('picture'), async (req, res) => {
const id = req.params.id;

const title = req.body.title;
const gender = req.body.gender;
const brand = req.body.brand;
const description = req.body.description;
const price = req.body.price;
const image = req.file.filename;

try {
    if (req.file) {
        await sharp(req.file.path)
            .resize(200, 200)
            .jpeg({ quality: 90 })
            .toFile(
                path.resolve(req.file.destination, 'resized', image)
            )
        fs.unlinkSync(req.file.path)
        Product.findOneAndUpdate(id,
            { $set: { title, gender, brand, description, price, image } },
            { new: true }
        ).then(post => {
            res.redirect('/shop/products')
            console.log(post)
        })
            .catch(err => {
                return err;
            });
    }
} catch {
    console.log('..')
}});

HTML:

   <form action="/shop/edit-form/<%=product.id %>?_method=PUT" method="POST" enctype="multipart/form-data"> <!--Edit-form page to update a product-->
  <label for="title">Title:</label>
  <input type="text"  class="form-control" placeholder="title" name="title" value="<%= product.title %>">

  <label for="gender">Gender:</label>
  <input type="text"  class="form-control" placeholder="gender" name="gender" value="<%= product.gender%>">

  <label for="brand">Brand:</label>
  <input type="text"  class="form-control" placeholder="brand" name="brand" value="<%= product.brand%>">

  <label for="description">Description:</label>
  <input type="text"  class="form-control" placeholder="description" name="description" value="<%= product.description%>">

  <label for="picture">Picture:</label>
  <input type="file"  class="form-control" placeholder="picture" name="picture" value="<%= product.picture%>">

  <label for="price">Price:</label>
  <input type="text"  class="form-control" placeholder="price" name="price" value="<%= product.price%>">

  <button class="btn btn-card" type="submit">Submit</button>
</form>

necesito realizar búsquedas para identificar una serie de datos de mis encargados, pero ha sido imposible con los proveedores que he contratado, ya que el archivo JSON nunca esta completo o simplemente el endpoint se cuelga constantemente…

I was on this website and really liked their checkered background. The thing is I cant figure out how they did it. I can’t seem to find the HTML or CSS that looks quite as good as this.

Was wondering if anyone had an idea on how to make a div with this checkered background. This is the website https://www.optimism.io/.

So I’m a newbie when it comes to React and thought to get familiar with the concepts utilizing mui. I’m creating a nav bar and one of the features is to have a search bar that is initially collapsed and expand once the search icon is pressed. This will also hide the typography element. My issue seems that no matter if I set flexgrow for both collapse or the text input that’s being encapsulated the element doesn’t seem to grow despite the extra space. I wonder if this is a styling issue or whether if transition is incapable of doing this, if it’s a styling issue how do I get the text input to expand the needed space?

Navbar.js

import React, { useState } from "react";
import {
  AppBar,
  Drawer,
  Box,
  IconButton,
  List,
  ListItemButton,
  ListItemText,
  Toolbar,
  TextField,
  Typography,
  Collapse,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
import ShoppingBagOutlinedIcon from "@mui/icons-material/ShoppingBagOutlined";
import { createTheme } from "@mui/material";

const Navbar = () => {
  const [drawer, setDrawer] = useState(false);
  const [drawer2, setDrawer2] = useState(false);
  const [clicked, setClicked] = useState(false);
  const theme = createTheme({
    typography: {
      fontFamily: ["Abril Fatface", "cursive"].join(","),
    },
  });
  return (
    <AppBar position="fixed" sx={{ height: 70 }} className="navbar">
      <Toolbar>
        <IconButton onClick={() => setDrawer(!drawer)} className="id">
          <MenuIcon fontSize="large"></MenuIcon>
        </IconButton>

        <Drawer open={drawer} onClose={() => setDrawer(!drawer)}>
          <Box sx={{ width: 400, backgroundColor: "red" }}>
            <List>
              <ListItemButton>
                <ListItemText primary="HI" />
              </ListItemButton>
            </List>
          </Box>
        </Drawer>
        <Collapse orientation="horizontal" in={clicked} timeout={100} unmountOnExit>
          <TextField sx={{ flexGrow: 2 }} />
        </Collapse>
        <Typography
          component="a"
          variant="h4"
          theme={theme}
          className="item"
          sx={{
            color: "black",
            flexGrow: 2,
            textAlign: "center",
            display: clicked ? "none" : "block",
          }}
        >
          APPSTUFF
        </Typography>
        <IconButton className="id">
          <PersonOutlineOutlinedIcon fontSize="large"></PersonOutlineOutlinedIcon>
        </IconButton>
        <IconButton className="id" onClick={() => setClicked(!clicked)}>
          <SearchOutlinedIcon fontSize="large"></SearchOutlinedIcon>
        </IconButton>

        <IconButton className="id" onClick={() => setDrawer2(!drawer2)}>
          <ShoppingBagOutlinedIcon fontSize="large"></ShoppingBagOutlinedIcon>
        </IconButton>
        <Drawer
          open={drawer2}
          onClose={() => setDrawer2(!drawer2)}
          anchor="right"
        >
          <Box sx={{ width: 400, backgroundColor: "red" }}>
            <List>
              <ListItemButton>
                <ListItemText primary="HI" />
              </ListItemButton>
            </List>
          </Box>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;

NavbarStyle.css

.id {
  color: black;
  margin-top: 0.5%;
  display: flex;
  flex-grow: 0;
}
.navbar {
  width: 100vw;
  box-shadow: none;
  background-color: white;
}

I developed a react native app which is functional and working fine in native devices. Now our customer wants a PWA export from the existing app. So i installed react-native-web and added required config and dependencies (webpack and Bable). But i can’t run webpack dev-server at all and i get lots of Module not found: Error: Can't resolve 'fs' in ./node_modules/bunch-of-folders errors. And i couldn’t find a solution for it. Here’s the errors list:

ERROR in ./node_modules/worker-farm/lib/fork.js
Module not found: Error: Can't resolve 'child_process' in 'C:programmingreact-nativewalletnode_modulesworker-farmlib'
 @ ./node_modules/worker-farm/lib/fork.js 3:21-45
 @ ./node_modules/worker-farm/lib/farm.js
 @ ./node_modules/worker-farm/lib/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/cacache/get.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulescacache'
 @ ./node_modules/cacache/get.js 6:11-24
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/cacache/node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulescacachenode_modulesgraceful-fs'
 @ ./node_modules/cacache/node_modules/graceful-fs/graceful-fs.js 1:9-22
 @ ./node_modules/cacache/lib/entry-index.js
 @ ./node_modules/cacache/ls.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschokidar'
 @ ./node_modules/chokidar/index.js 4:11-24
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschokidarlib'
 @ ./node_modules/chokidar/lib/fsevents-handler.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/lib/nodefs-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschokidarlib'
 @ ./node_modules/chokidar/lib/nodefs-handler.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chownr/chownr.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleschownr'
 @ ./node_modules/chownr/chownr.js 2:11-24
 @ ./node_modules/cacache/lib/util/fix-owner.js
 @ ./node_modules/cacache/lib/util/tmp.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/copy-concurrently/copy.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulescopy-concurrently'
 @ ./node_modules/copy-concurrently/copy.js 8:13-26
 @ ./node_modules/move-concurrently/move.js
 @ ./node_modules/cacache/lib/util/move-file.js
 @ ./node_modules/cacache/lib/content/write.js
 @ ./node_modules/cacache/put.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/find-cache-dir/node_modules/make-dir/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesfind-cache-dirnode_modulesmake-dir'
 @ ./node_modules/find-cache-dir/node_modules/make-dir/index.js 2:11-24
 @ ./node_modules/find-cache-dir/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/fs.realpath/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesfs.realpath'
 @ ./node_modules/fs.realpath/index.js 8:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/fs.realpath/old.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesfs.realpath'
 @ ./node_modules/fs.realpath/old.js 24:9-22
 @ ./node_modules/fs.realpath/index.js
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/glob/common.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesglob'
 @ ./node_modules/glob/common.js 13:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesgraceful-fs'
 @ ./node_modules/graceful-fs/graceful-fs.js 1:9-22
 @ ./node_modules/enhanced-resolve/lib/NodeJsInputFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/infer-owner/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesinfer-owner'
 @ ./node_modules/infer-owner/index.js 2:11-24
 @ ./node_modules/cacache/lib/util/fix-owner.js
 @ ./node_modules/cacache/lib/util/tmp.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/is-wsl/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesis-wsl'
 @ ./node_modules/is-wsl/index.js 3:11-24
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/loader-runner/lib/LoaderRunner.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesloader-runnerlib'
 @ ./node_modules/loader-runner/lib/LoaderRunner.js 5:9-22
 @ (webpack)/lib/NormalModule.js
 @ (webpack)/lib/AutomaticPrefetchPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesmkdirp'
 @ ./node_modules/mkdirp/index.js 2:9-22
 @ (webpack)/lib/debug/ProfilingPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/move-concurrently/move.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesmove-concurrently'
 @ ./node_modules/move-concurrently/move.js 4:13-26
 @ ./node_modules/cacache/lib/util/move-file.js
 @ ./node_modules/cacache/lib/content/write.js
 @ ./node_modules/cacache/put.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/path-exists/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulespath-exists'
 @ ./node_modules/path-exists/index.js 2:11-24
 @ ./node_modules/find-cache-dir/node_modules/locate-path/index.js
 @ ./node_modules/find-cache-dir/node_modules/find-up/index.js
 @ ./node_modules/find-cache-dir/node_modules/pkg-dir/index.js
 @ ./node_modules/find-cache-dir/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/readdirp/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesreaddirp'
 @ ./node_modules/readdirp/index.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/rimraf/rimraf.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesrimraf'
 @ ./node_modules/rimraf/rimraf.js 6:9-22
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/schema-utils/src/validateOptions.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesschema-utilssrc'
 @ ./node_modules/schema-utils/src/validateOptions.js 8:11-24
 @ ./node_modules/schema-utils/src/index.js
 @ (webpack)/lib/IgnorePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/snapdragon/lib/source-maps.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulessnapdragonlib'
 @ ./node_modules/snapdragon/lib/source-maps.js 3:9-22
 @ ./node_modules/snapdragon/lib/compiler.js
 @ ./node_modules/snapdragon/index.js
 @ (webpack)/node_modules/micromatch/lib/utils.js
 @ (webpack)/node_modules/micromatch/index.js
 @ (webpack)/lib/optimize/SideEffectsFlagPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswatchpack-chokidar2node_moduleschokidar'
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswatchpack-chokidar2node_moduleschokidarlib'      
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/fsevents-handler.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/nodefs-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswatchpack-chokidar2node_moduleschokidarlib'      
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/nodefs-handler.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/debug/ProfilingPlugin.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswebpacklibdebug'
 @ (webpack)/lib/debug/ProfilingPlugin.js 1:11-24
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeOutputFileSystem.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswebpacklibnode'
 @ (webpack)/lib/node/NodeOutputFileSystem.js 7:11-24
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeMainTemplateAsync.runtime.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_moduleswebpacklibnode'
 @ (webpack)/lib/node/NodeMainTemplateAsync.runtime.js 16:2-15 34:3-16
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/y18n/index.js
Module not found: Error: Can't resolve 'fs' in 'C:programmingreact-nativewalletnode_modulesy18n'
 @ ./node_modules/y18n/index.js 1:9-22
 @ ./node_modules/cacache/lib/util/y.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/NormalModule.js
Module not found: Error: Can't resolve 'module' in 'C:programmingreact-nativewalletnode_moduleswebpacklib'
 @ (webpack)/lib/NormalModule.js 7:21-38
 @ (webpack)/lib/AutomaticPrefetchPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not found: Error: Can't resolve 'module' in 'C:programmingreact-nativewalletnode_moduleswebpacklibnode'
 @ (webpack)/lib/node/NodeTargetPlugin.js 11:1-18
 @ (webpack)/lib/node sync ^./.*$
 @ (webpack)/lib/node/NodeMainTemplate.runtime.js
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

Babel.config.js:

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    ["module-resolver", {
      "alias": {
        "^react-native$": "react-native-web"
      }
    }], "react-native-reanimated/plugin"]
};

webpack.config.js:

// web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

const babelLoaderConfiguration = {
  test: /.(js|jsx)$/,
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['module:metro-react-native-babel-preset'],
      plugins: ['react-native-web']
    }
  }
};

const imageLoaderConfiguration = {
  test: /.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    }
  }
};

module.exports = {
  entry: [
    path.resolve(appDirectory, 'index.web.js')
  ],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    extensions: ['.web.js', '.js', '.web.jsx', '.jsx']
  }
}

package.json:

{
  "homepage": ".",
  "name": "wallet",
  "version": "1.1.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postversion": "react-native-version --never-amend",
    "start-web": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --hot",
    "build-web": "./node_modules/.bin/webpack --config ./web/webpack.config.js"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.15.14",
    "@react-native-clipboard/clipboard": "1.8.5",
    "@react-native-community/blur": "3.6.0",
    "@react-native-community/masked-view": "0.1.11",
    "@react-native-community/slider": "4.1.12",
    "@react-native-firebase/app": "14.2.4",
    "@react-native-firebase/messaging": "14.2.4",
    "@react-navigation/bottom-tabs": "6.0.9",
    "@react-navigation/native": "6.0.6",
    "@react-navigation/stack": "6.0.11",
    "axios": "0.24.0",
    "d3-shape": "3.1.0",
    "i18next": "^21.6.11",
    "moment": "2.29.1",
    "moment-jalaali": "0.9.4",
    "moment-timezone": "0.5.34",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "react-freeze": "1.0.0",
    "react-i18next": "^11.15.4",
    "react-native": "0.66.4",
    "react-native-animatable": "1.3.3",
    "react-native-camera": "4.2.1",
    "react-native-contacts": "7.0.3",
    "react-native-device-info": "8.4.8",
    "react-native-elements": "3.4.2",
    "react-native-flags": "1.0.0",
    "react-native-gesture-handler": "2.1.0",
    "react-native-keyboard-aware-scroll-view": "0.9.5",
    "react-native-linear-gradient": "2.5.6",
    "react-native-navigation-bar-color": "^2.0.1",
    "react-native-network-info": "5.2.1",
    "react-native-permissions": "3.2.0",
    "react-native-qrcode-scanner": "1.5.4",
    "react-native-reanimated": "2.4.1",
    "react-native-restart": "0.0.23",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "3.10.1",
    "react-native-splash-screen": "3.3.0",
    "react-native-svg": "12.1.1",
    "react-native-svg-charts": "5.4.0",
    "react-native-toast-message": "2.1.1",
    "react-native-touch-id": "4.4.1",
    "react-native-vector-icons": "9.0.0",
    "react-native-web": "^0.17.6",
    "react-redux": "7.2.6",
    "redux": "4.1.2",
    "redux-persist": "6.0.0",
    "redux-thunk": "2.4.1",
    "reselect": "4.1.5",
    "webpack": "4.46.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.9",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.17.6",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.66.2",
    "react-native-version": "^4.0.0",
    "react-test-renderer": "17.0.2",
    "url-loader": "^4.1.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "jest": {
    "preset": "react-native"
  }
}