Category: javascript

My project has 3 folders: server(node.js), client(next.js with custom server) and uploads(the images of products).
I have uploaded it in a Ubuntu 20.04 server and build next.js project. it works.
I have recently changed some pages of next.js and uploaded to client folder by “sudo git pull”.
Now I would like to run “npm run build” to build next.js again, but it gives Error:

warn - No ESLint configuration detected. Run next lint to begin setup

Build error occurred
Error: > Build directory is not writeable. https://nextjs.org/docs/messages/build-dir-not-writeable
at /home/skadmin/client/node_modules/next/dist/build/index.js:275:19
at async Span.traceAsyncFn (/home/skadmin/client/node_modules/next/dist/telemetry/trace/trace.js:60:20)
at async Object.build [as default] (/home/skadmin/client/node_modules/next/dist/build/index.js:77:25)
info - Creating an optimized production build

==========My Custom server is:
”’

const express = require('express')
const next = require('next')
const { createProxyMiddleware } = require('http-proxy-middleware')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app
.prepare()
.then(() => {
const server = express()
// apply proxy in dev mode
if (dev) {
server.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8000',
changeOrigin: true,
})
)
}

server.all('*', (req, res) => {
  return handle(req, res)
})

server.listen(3000, (err) => {
  if (err) throw err
  console.log('> Ready on http://localhost:8000')
})
})
.catch((err) => {
console.log('Error', err)
})

”’
=======================package.json is=>:
”’

{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@ant-design/icons": "^4.5.0",
"@glidejs/glide": "^3.4.1",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@persian-tools/persian-tools": "^3.0.1",
"antd": "^4.13.1",
"axios": "^0.21.4",
"express": "^4.17.1",
"http-proxy-middleware": "^2.0.0",
"lodash": "^4.17.21",
"moment-jalaali": "^0.9.2",
"multer": "^1.4.4",
"next": "^11.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-image-file-resizer": "^0.4.7",
"react-markdown": "^6.0.2",
"react-scroll": "^1.8.2",
"react-toastify": "^7.0.4",
"reactstrap": "^8.9.0",
"swiper": "^7.4.1"
}
}

”’

Please help me, what should I do?

I’m trying to build an api, the get all method works, but I’m really struggling to test my post method. I’m using the command curl http://localhost:5000/api/properties -X POST -H "Content-Type: application/json" -d '{"externalId": "hola"}' and I’m getting the following error:

SyntaxError: Unexpected token ' in JSON at position 0
    at JSON.parse (<anonymous>)
    at createStrictSyntaxError (C:UsersalberDocumentsUNIWEB2021-Group18backendnode_modulesbody-parserlibtypesjson.js:158:10)
    at parse (C:UsersalberDocumentsUNIWEB2021-Group18backendnode_modulesbody-parserlibtypesjson.js:83:15)
    at C:UsersalberDocumentsUNIWEB2021-Group18backendnode_modulesbody-parserlibread.js:121:18
    at invokeCallback (C:UsersalberDocumentsUNIWEB2021-Group18backendnode_modulesraw-bodyindex.js:224:16)
    at done (C:UsersalberDocumentsUNIWEB2021-Group18backendnode_modulesraw-bodyindex.js:213:7)
    at IncomingMessage.onEnd (C:UsersalberDocumentsUNIWEB2021-Group18backendnode_modulesraw-bodyindex.js:273:7)
    at IncomingMessage.emit (node:events:402:35)
    at endReadableNT (node:internal/streams/readable:1343:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

I’ve tried changing the curl command but nothing changes, also tried to do it using postman but also not working.

My code:

index.js:

const express = require("express")
const mongoose = require("mongoose")
const routes = require("./routes/routes")

// Connect to MongoDB database
mongoose
    .connect("mongodb://localhost:27017/propertyDB", { useNewUrlParser: true })
    .then(() => {
        const app = express()

        app.use(express.json())
        app.use("/api", routes)
        
        app.listen(5000, () => {
            console.log("Server has started!")
        })
    })

routes.js:

const express = require("express")
const Property = require("../models/Property") // new
const router = express.Router()

// Get all posts
router.get("/properties", async (req, res) => {
    const properties = await Property.find()
    res.send(properties)
})

router.post("/properties", async (req, res) => {
    console.log(req.body) //not printing

    const property = new Property({
        externalId: req.body.externalId,
    })
    await property.save()
    res.send(property)
})

router.get("/properties/:id", async (req, res) => {
    const property = await Property.findOne({ _id: req.params.id })
    res.send(property)
})

module.exports = router

Does anyone know what am I doing wrong?

Thank you!

if string contain white space alert should be unsuccessful and if string contain no white space alert should be successful
import React from “react”;
export default function DropDown() {

  let i=document.getElementById("input")?.value;
const submit=()=>{
  var whiteSpaceExp = /^s+$/g;
  if (whiteSpaceExp.test(i))
  {
  alert('unsuccess');
  }
  else
  {
    alert('success');
  }
  }
return (
    <>
      <form>
        <input type="text" id="input"  autoComplete="off" />
        <button onClick={submit}> click  </button>
      </form>
    </>
  );
}

I want something simple and using FTP for a MERN stack app. Thank you !

I’m creating dynamic table. This table contains few columns like: topic, state, theme, priority. On every row, I can make certain actions, but those are also dynamic. So let’s say I’m receiving 10 different actions and one action, like delete, should only be visible when priority equals 10. Now this condition (priority === 10) should be in response. What would be the best way to send and consume that?

I want to mock the fetch in the Message function

const Message = () => { 
                const url = process.env.REACT_APP_BACKEND_URL  +"/helloworld" 
                console.log(url)
                const response = fetch(url)
                console.log(response)
                return response.text        
     }
export default Message

I should be mocked i the Jest test

import App from './App' 
import {render,screen} from '@testing-library/react'
global.fetch = jest.fn(() =>  Promise.resolve({ text: () => Promise.resolve("Hello World")}))


it('should display hello world', async () => {
     render(<App />);
     const linkElement = screen.getByText('Hello World');
     expect(linkElement).toBeInTheDocument();
 })

Coode that should be tested look like this

import React from ‘react’
import Message from ‘./Message’

function App () {
    return <Message />
 }

export default  App ;

When I run the test I get following message

FAIL  src/App.test.jsx
  ✕ should display hello world (147 ms)

  ● should display hello world

    TypeError: Cannot read property 'text' of undefined

       6 |                 const response = fetch(url)
       7 |                 console.log(response)
    >  8 |                 return response.text        
         |                                 ^
       9 |      }
      10 | export default Message

      at Message (src/Message.jsx:8:33)

How do I mock the fetch?

#please answer to this question.
#im confused in Android emulator and expo client app.
Should I need to install android emulator to use expo client app ?

I am trying to set the request header in selenium. For one or another reason, I am not able to find how to set such a header.

If I read correctly, this is not possible and I would need an extension in Chrome to set the request header: setting request headers in selenium

Is this answer still up to date? And are there other ways to implement a header in a get request using selenium?

I am using node js and selenium to build a web scraper.

Thanks in advance.

uses string formula in if structure angular

   let a = "100 + 100 > 50";
      if(a){
            //do operation
           }

But this statement is always return true

I am working on a CDKEditor5 for which I have to configure one functionality. when i edit or try to write a mail on it then they automatically take the default system language (which clients currently use in their system). so have you guys any idea about this how to done?. using javascript & angular.
If any library is available then help me. or any customize javascript for it?

jQuery(document).ready(function($) {

  if ($('.category-sidebar')) {

    var $filterWrap = $('#filter-wrapper .filter-container');

    $('#narrow-by-list').empty();

    $filterWrap.each(function (index) {
      var $currFilter = $(this);
      var $divParent = $currFilter.closest('.filter-container');
      var divHeader = $currFilter.find('.toggle-category-header').text().trim();

      /*if (divHeader === 'Color') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Clothes Size') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Price') {
        $divParent.appendTo('#narrow-by-list');
      } else if (divHeader === 'Product Type') {
      } else if (divHeader === 'Shop By Figure') {
      }*/

      switch (divHeader)
      {
        case 'Color':   
        case 'Clothes Size':         
        case 'Price':
          $divParent.appendTo('#narrow-by-list');
          break;
        case 'Product Type': 
        case 'Shop By Figure':          
          $divParent.appendTo('#narrow-by-list :last-child');
          break;
      } 
    });
  }

});

• $filterWrap is the container that hold five side navbar items that are all divs

• #narrow-by-list is tag that holds #filterwrapper which holds all 5 divs

• I want to be able to reorder the divs and place them inside the same container so right now they are:

• Color

• Shop By Figure

• Product Type

• Clothes Size

• Price

I want the list of divs to be reordered to:

• Colour
• Size
• Price
• Product Type
• Shop By Figure

The code above sorts the first three but can’t get the last two sorted. Can you guys help?

I have for example a SMS QRCode with the value:

SMSTO:99999999:Hello World

And I want to generate a QR code image so I’m able to share it with react-native-share. How could I do that?

Trying to set up an example of THREE with this MeshLine implementation. Running on VSCode with Live Server extension, port 5500, Firefox. Already tried several combinations of import, require, with or without the type=”module” attribute, every time there is a different error. I have the feeling this is because I installed this as NPM modules instead of linking the scripts directly (I did this to be able to use the @types definitions for three), but I just cannot manage to fully understand the JS module ecosystem and variations.

Question
Is it possible to use these libraries (actually three.meshline which requires three) via NPM (= without directly linking the scripts) and if yes, how? Alternatively how to reference NPM three from non-NPM three.meshline script?

/// index.html

<script src="node_modules/three/build/three.module.js"
    type="module"></script>
<!-- <script src="node_modules/three.meshline/src/THREE.MeshLine.js"
    type="module"></script> -->
<script type="module">
    import("./node_modules/three.meshline/src/THREE.MeshLine.js")
</script>


/// THREE.MeshLine.js

;(function() {
  'use strict'

  var root = this
  var has_require = typeof require !== 'undefined'

  console.log(root.THREE)  // undefined
  console.log(has_require) // false

  var THREE = root.THREE || (has_require && require('three')) // <-- Uncaught TypeError: root is undefined
  if (!THREE) throw new Error('MeshLine requires three.js')   // <-- never managed to pass this test

  // (implementation code here)...

  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      exports = module.exports = {
        MeshLine: MeshLine,
        MeshLineMaterial: MeshLineMaterial,
        MeshLineRaycast: MeshLineRaycast,
      }
    }
    exports.MeshLine = MeshLine
    exports.MeshLineMaterial = MeshLineMaterial
    exports.MeshLineRaycast = MeshLineRaycast
  } else {
    root.MeshLine = MeshLine
    root.MeshLineMaterial = MeshLineMaterial
    root.MeshLineRaycast = MeshLineRaycast
  }
}.call(this))

How i map following Arrays,
the filter Array are an AND combination and looks for a suitable note.

So that the result is note[0] and note[3]

filter:[
0:{titel: 'A'}, 
1:{titel: 'B'}]

note:[
{0:[0:{titel: 'A'},1:{titel: 'B'}]}, 
{1:{titel: 'B'}},
{2:{titel: 'C'}}, 
{3:[0:{titel: 'A'},1:{titel: 'B'}, 2:{titel: 'c'}]}]

Thanks for helping.

maybe this question has been asked before, but unfortunately I was unable to find the answer.

I have got a screen called AccountManagement, where I can change the users data and in the end there is a button which updates the data.

const AccountManagement = (props) => {
    const {userData} = useContext(AuthContext)
    const [name, setName] = useState(userData.name)
    //other data...
    const update = () => {
        userData.name = name
        // set other data
        updateProfile(userData)
        navigation.navigate('Profile')
    }
}

So far, so good everything works fine. But if I call the same function (update()) in an other component via props, the changed state of name for example is ignored. Below, there is the return call of the same screen AccountManagement

 return(
    <SafeAreaView style={styles.container}>
        <HeaderBar updateInfo={update}/>
        <TextInput 
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder=""/>
    <TouchableOpacity style={styles.changeContainer} 
                      onPress={update}>
        <Text style={styles.change}>Update Info</Text>
    </TouchableOpacity>
)

In the component HeaderBar, I have got a TouchableOpacity, which should do the exact thing as the TouchableOpacity in AccountManagement, call update(), which it does, but the changed name is never used when I press the TouchableOpacity in the HeaderBar component

const HeaderBar = (props) => {
  return(
    <View>
        <TouchableOpacity onPress={props.updateInfo} style={styles.rightContainer}>
            <Text style={styles.rightText}>Update Info</Text>
        </TouchableOpacity>
    </View>
  }
)

Even if I try to print with console.log I cannot see the change.

My question now is:

Why is the changed name ignored, when I press update from the HeaderBar component?

How can I fix this issue?

Thank you in advance