Heroku not installing certain Node modules

I’m trying deploy a Lerna app on Heroku, but the platform isn’t installing the actual Lerna package in the node_modules no matter what I do. I’ve gotten to the point where I have accessed the app files directly and tried running npm install [email protected] on the server itself. The result is that it installs a number of packages and says that it has added Lerna as well, but actually hasn’t.

~ $ npm install [email protected]
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
npm WARN [email protected] requires a peer of @swc-node/register@^1.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @swc/core@^1.2.173 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 16 packages from 7 contributors and audited 1081 packages in 26.529s
found 12 vulnerabilities (2 low, 2 moderate, 6 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
~ $ cd node_modules/
~/node_modules $ ls
@pnpm  cross-spawn  get-stream  human-signals  is-stream  isexe  merge-stream  mimic-fn  npm-run-path  onetime  path-key  shebang-command  shebang-regex  signal-exit  strip-final-newline  which
~/node_modules $ cd lerna
bash: cd: lerna: No such file or directory`

What could I be missing?

Vue.js Data Being Deleted After Being Passed To Child Component

I have a Vue table with expandable rows. Each row represents a business. When a row is clicked/expanded then a child component “businessInfo” is rendered. The child component takes the row data from the expanded row and displays a series of buttons representing each location for the business, and another table which shows the employees for that location.

The data:

[   
{
    "businessName": "BusinessName_1",
    "locationCount": 2,
    "locations": [
        {
            "locationId": 1,
            "locationName": "location_1",
            "employees": [
                {
                    "employeeId": 694,
                    "employeeName": "employeeName694"
                }
            ]
        },
        {
            "locationId": 2,
            "locationName": "location_2",
            "employees": [
                {
                    "employeeId": 697,
                    "employeeName": "employeeName697"
                }
            ]
        }
    ]
},
{
    "businessName": "BusinessName_2",
    "locationCount": 2,
    "locations": [
        {
            "locationId": 5,
            "locationName": "location_5",
            "employees": [
                {
                    "employeeId": 547,
                    "employeeName": "employeeName547"
                }
            ]
        },
        {
            "locationId": 6,
            "locationName": "location_6",
            "employees": [
                {
                    "employeeId": 613,
                    "employeeName": "employeeName613"
                }
            ]
        }
    ]
}
]

Parent component:

<template slot="subContent">
 <div class="sub-flex">
  <el-scrollbar class="table-scroll">
   <el-table
    :data="list"
    :row-key="row => row.businessName"
   >
    <el-table-column type="expand">
      <businessInfo
        :key="row.businessName"
        slot-scope="{row}"
        :data-view="row.locations"
        :business-name-prop="row.businessName"
      />
    </el-table-column>
    <el-table-column label="Name" prop="id">
      <template slot-scope="{row}">
        <span class="link-type">{{ row.businessName }}</span>
      </template>
    </el-table-column>
  </el-table>
</el-scrollbar>

Child component:

<template>
  <span v-for="s in dataView" :key="s.locationId" name="locations" span="10">
    <el-button round :type="markButtonAsPrimary(s.locationId)" span="1" class="siteButton" @click="activatelocationButton(s.locationId)">{{ s.locationName }}</el-button>
  </span>
</div>
<div>
  <el-table
    :data="displayList"
    :row-key="row => row.employeeId"
  >
    <el-table-column label="EmployeeName" prop="name">
      <template slot-scope="{row}">
        <span>{{ row.employeeName }}</span>
      </template>
    </el-table-column>
    <el-table-column>
      <span>Get Details</span>
    </el-table-column>
  </el-table>
</template>
<script>
 export default {
 name: 'businessInfo',
 props: {
  dataView: {
  type: Array,
  required: true
  },
  businessNameProp: {
   type: String,
   required: true
  }
 },
 data() {
  return {
   allData: [],
   displayList: [],
   currentSiteElement: 99999999
  }
},
created() {
 this.displayList= this.dataView
}

When a row is expanded, and the childComponent is rendered, it looks correct. There is a button for each location, and the table shows the employees in a table for the first location in the locations array (By default).

However, if I examine the data “dataView” passed in to the child component, the employees array for each location is empty, even in the created() section when the child component was first rendered. Therefore any attempts to show employees for other locations within the child component will instead display “No Data”.

This leads me to believe that maybe the way I am passing data to the child component is incorrect?

Disable some of site’s scripts if users device is a mobile (small screen) [closed]

im new to codeing space

i have a site with Auto scroller on,(by a tiny scroll the entire page scrolls down)
Now i want to turn auto scrolling off if user is on mobile

Thanks

<script src="./fullpage.min.js"></script>
    <script>
        new fullpage('#fullPage', {
            autoScrolling: true,
            navigation:true,
            anchors:['section1' , 'section2', 'section3','section4','section5'],
            navigationTooltips: ['Main Page', 'Roya' , '!LET GO','Future', 'Page 6',]
        })
    </script>

have seen some other posts like “This
but can’t make it work

How to resolve module in webpack

Hi I try to migrate requrejs to webpack 5 actually and after running npx mix watch I getting error about missing module.

ERROR in ./utils/i18n.js 1:0-60
Module not found: Error: Can't resolve 'php/messages' in ....

I see that php/messages are required in i18n ./utils/i18n.js so I tried add alias into webpack. My webpack file looks like this

const path = require('path');
let mix = require('laravel-mix');

mix.webpackConfig({
    context: path.resolve(__dirname + '/resources/assets/js'),
    entry: './main.js',
    output: {
        filename: 'bundle.js',
    },
    resolve: {
        alias: {
            "php/messages": "js/messages.js",
        }
    },
})

Am I missing something? I am not really sure if webpack at least has found my file or not….

unity – calling function with 1 parameter but the function requires 3 error

I am working with a Unity game developer, and some part of his game requires us to pass the session data to the game in order to get the right user in the game. Unfortunately, every time I tried to pass the data using the docs he provided, I keep encounter the error “Failed to call function LoginSuccessful of class NetworkManager, Calling function LoginSuccessful with 1 parameter but the function requires 3.”.

He gave me the function parameters and the data type I should follow, but somehow it still returns the same error. I would need the community guidance on this matter.

Unity Game Function

public void FunctionA ( int A, int B, string token ) {

}

My JS Script

var a = 1;
var b = 1;
var c = '8d4a7d1a-69cc-40f9-a74e-0fa7b388fbc6';
var script = document.createElement("script");
script.src = loaderUrl;
var MyGameInstance = null;
script.onload = () => {
  createUnityInstance(canvas, config, (progress) => {
    progressBarFull.style.width = 100 * progress + "%";
  }).then((unityInstance) => {
    MyGameInstance = unityInstance;
    loadingBar.style.display = "none";
    MyGameInstance.SendMessage('NetworkManager', 'LoginSuccessful', a, b, c);
    fullscreenButton.onclick = () => {
      unityInstance.SetFullscreen(1);
    };
  }).catch((message) => {
    alert(message);
  });
};

Error message when the game loads:

Failed to call function LoginSuccessful of class NetworkManager
Calling function LoginSuccessful with 1 parameter but the function requires 3.

I have a time and a time zone – no date. How do I convert that time to another time zone?

From the database I get a time as a string: “13:20:00” and I get a time zone: “America/New_York”

How do convert that time to America/Los_Angeles (would return 10:20:00) or any other time zone?

I am using the moment.js library.

I tried:

const t = "13:20:00"
const tzOut = 'America/New_York'
const tzIn = "America/Los_Angeles"
const m = moment(t,"H:mm:SS").tz(tzIn)
return m.tz(tzOut).format("H:mm:SS"); 
// Returns "16:20:00"

And this works, but if I change the time zones around:

const t = "13:20:00"
const tzIn = 'America/New_York'
const tzOut = "America/Los_Angeles"
const m = moment(t,"H:mm:SS").tz(tzIn)
return m.tz(tzOut).format("H:mm:SS"); 
// Returns "13:20:00", should be "10:20:00"

I believe this is because I am in the America/Los_Angeles time zone, moment.js is factoring this in and moment(t,"H:mm:SS").tz(tzIn) is becoming 16:20:00. I want it to become 13:20:00 but in America/New_York time zone.

So it seems I am on the wrong track – how should I be doing this?

How to recursively filter tree JSON in React/Javascript?

I need to filter this JSON tree data for a search (filter tree) functionality.
The structure looks like this:

The Array filter > map is only going to the first level.
How do I traverse up to the last level of child (filter should work on all levels after Customers) and filter accordingly using a string (includes logic)

{
   "path":"Customers",
   "sha":"Customers",
   "lazy":false,
   "type":"tree",
   "tree":[
      {
         "path":"Bob Rivers",
         "type":"tree",
         "sha":"Bob Rivers",
         "lazy":false,
         "tree":[
            {
               "path":"Services",
               "type":"tree",
               "sha":"Services",
               "lazy":true,
               "url":"http://localhost:3000/services",
               "tree":[
                  {
                     "path":"Service_X",
                     "type":"tree",
                     "sha":"Service_X",
                     "lazy":true,
                     "url":"http://localhost:3000/Service_X",
                     "tree":[
                        {
                           "lazy":true,
                           "path":"Service_X_child",
                           "mode":"040000",
                           "type":"tree",
                           "sha":"Service_X_child",
                           "url":"http://localhost:3000/Service_X_child",
                           "tree":[
                              {
                                 "lazy":true,
                                 "path":"ABC",
                                 "mode":"040000",
                                 "type":"blob",
                                 "sha":"ABC",
                                 "url":""
                              },
                              {
                                 "lazy":true,
                                 "path":"DEF",
                                 "mode":"040000",
                                 "type":"blob",
                                 "sha":"DEF",
                                 "url":""
                              }
                           ]
                        },
                        {
                           "lazy":true,
                           "path":"Service_X_child_2",
                           "mode":"040000",
                           "type":"tree",
                           "sha":"Service_X_child_2",
                           "url":"http://localhost:3000/Service_X_child_2"
                        }
                     ]
                  },
                  {
                     "path":"Service_Y",
                     "type":"tree",
                     "sha":"Service_Y",
                     "lazy":true,
                     "url":"http://localhost:3000/Service_Y"
                  }
               ],
            }
         ],
      }
   ],
}

Sample Input is if the search filter = “DEF” (path will be checked), the data will be reduced to this one

{
   "path":"Customers",
   "sha":"Customers",
   "lazy":false,
   "type":"tree",
   "tree":[
      {
         "path":"Bob Rivers",
         "type":"tree",
         "sha":"Bob Rivers",
         "lazy":false,
         "tree":[
            {
               "path":"Services",
               "type":"tree",
               "sha":"Services",
               "lazy":true,
               "url":"http://localhost:3000/services",
               "tree":[
                  {
                     "path":"Service_X",
                     "type":"tree",
                     "sha":"Service_X",
                     "lazy":true,
                     "url":"http://localhost:3000/Service_X",
                     "tree":[
                        {
                           "lazy":true,
                           "path":"Service_X_child",
                           "mode":"040000",
                           "type":"tree",
                           "sha":"Service_X_child",
                           "url":"http://localhost:3000/Service_X_child",
                           "tree":[
                              {
                                 "lazy":true,
                                 "path":"DEF",
                                 "mode":"040000",
                                 "type":"blob",
                                 "sha":"DEF",
                                 "url":""
                              }
                           ]
                        }
                     ]
                  }
               ],
            }
         ],
      }
   ],
}

I have tried the following solution/s but did not work:
recursively filter json data for search bar

This one explicitly mentioned that flatting the JSON tree data to array did not solve his issue

https://www.geeksforgeeks.org/how-to-filter-object-array-based-on-attributes/

React-App breaking change, 28 breaking changes regarding node_modules and node.js

I am following along with a React app and unfortunately out of nowhere, the app now complies with 28 errors regarding polyfills and errors with webpack.

I am using CRA with a backend hosted locally and built with node.js, mongoDB and Express JS.

I have not downloaded any new dependencies or changed the package.json and the CRA and the backend are hosted in two seperate respective folders.

No error runnin the server, just the frontend.

So far i have tried

NPM audit fix -- force

deleteing the local repo and re-cloning from github. 

Copying the package.json 

Deleteing the Node_modules folder and re-installing using npm i 

None of this seems to work.

I have had this happen ebfore and it was fixed by re-running npm -i but this time it is constantly breaking.

The package.json is here.

{
  "name": "frontend",
  "version": "0.1.0",
  "proxy": "http://localhost:5000",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.7.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.24.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-modal": "^3.14.4",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-toastify": "^8.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I am at a loss, and would rather not lose the progress gained / have to do some mad copy and pasting of files to a new repo.

The error log can be found here.

ERROR in ./node_modules/body-parser/lib/read.js 19:11-26
Module not found: Error: Can't resolve 'zlib' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_modulesbody-parserlib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
        - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "zlib": false }

ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 201:12-34
Module not found: Error: Can't resolve 'querystring' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_modulesdestroy'

ERROR in ./node_modules/destroy/index.js 16:13-30
Module not found: Error: Can't resolve 'stream' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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/destroy/index.js 17:11-26
Module not found: Error: Can't resolve 'zlib' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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: { "zlib": require.resolve("browserify-zlib") }'
        - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "zlib": false }

ERROR in ./node_modules/etag/index.js 20:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_modulesetag'

ERROR in ./node_modules/express/lib/application.js 22:11-26
Module not found: Error: Can't resolve 'http' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_modulesexpresslib'

ERROR in ./node_modules/express/lib/request.js 19:11-26
Module not found: Error: Can't resolve 'http' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_modulesexpresslib'

ERROR in ./node_modules/mime-types/index.js 15:14-37
Module not found: Error: Can't resolve 'path' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_modulesmime'

ERROR in ./node_modules/parseurl/index.js 14:10-24
Module not found: Error: Can't resolve 'url' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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/send/index.js 22:9-22
Module not found: Error: Can't resolve 'fs' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_modulessend'

ERROR in ./node_modules/send/index.js 27:11-26
Module not found: Error: Can't resolve 'path' in 'C:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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:UsersconnoOneDriveDesktopCoding LAptopsupport-deskfrontendnode_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 }

webpack compiled with 28 errors and 4 warnings

wait for build function to complete async function doesn’t wait and need a work around

I have this piece of code that builds a control in a base class in javascript and it works but there is a problem with it. The problem is when I run async function the code doesn’t wait till the build() function is complete. The static create() method cannot be an async function because it will not make the rest of the code work. My question is how do I make the getPromise() function wait to build the control and then run the last line of code to complete the build of the component?

static create(selector, object) {
    let self = this;

    if(!this.instances.includes(selector)) {
        this.instances[selector] = object;            
    }

    async function getPromise() {
        await self.instances[selector].build();
    }

    getPromise();
    
    return self.instances[selector];
}

Multiple map inside map javascript/react

I have an array of objects that has children. Those children also has children. I want to print those out in order in React. So what I am trying to do is multiple maps inside eachother.

I can manage to do one map inside another like this:

 org = workplaces.map((item) =>
    <ul className="" style={{ background: "grey" }}>
    <li>{item.workplace}</li>
    {item.children.map((item2) => {
     return <li>{item2.workplace}</li>
    })}
  </ul>
)

but when I try to do another map inside item2, I get “Cannot read properties of undefined (reading ‘map’)” for item2 (it does have children):

org = workplaces.map((item) =>
    <ul className="" style={{ background: "grey" }}>
    <li>{item.workplace}</li>
    {item.children.map((item2) => {
      item2.children.map((item3) => {
        return <li>{item3.workplace}</li>
      })
      return <li>{item2.workplace}</li>
    })}
  </ul>
)

Is it possible to make 3 maps inside eachother?

Convert CSS transitions on other elements into JS

        <div class="exp">
            <div class="title">EXPERIENCE</div>

            <button class="button" id="OMI"><span>Ominous</span></button>
            <button class="button" id="RC"><span>RocketCards</span></button>
            <button class="button" id="MRKT"><span>PokeMRKT</span></button>
            <button class="button" id="BIBLE"><span>TheBotBible</span></button>
            <button class="button" id="FREE"><span>Freelance</span></button>
            <button class="button" id="CHAR"><span>Charity</span></button>

            <div id="desc">
                <div class="top">
                    <div class="h1"><p class="date text-secondary"></p></div>
                </div>

                <div class="content">
                    <div class="comp"></div>
                    <div class="exp" style="margin-bottom: 20px"></div>
                </div>
            </div>
        </div>
.title {
    color: white;
    font-size: 30px;
    font-weight: 100;
    margin-top: 5em;
    padding-bottom: 2em;
    text-align: left;
}

.button {
    background-color: black;
    border-radius: 6px;
    border: 0;
    color: #868686;
    padding: 10px max(10px, 5%);
    text-align: center;
    display: inline-flex;
    font-size: 14px;
    transition: all 0.5s;
    cursor: pointer;
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}


.button:hover {
    background-color: #1e1e1e;
}

.button:focus {
    background-color: #1e1e1e;
    color: white;
}


.content > .comp {
    color: #6cace4;
    font-size: 16px;
    font-weight: 200;
    margin-bottom: 20px;
    text-align: left;
}

.content > .exp {
    line-height: 24px;
    color: #c4c4c4;
    font-size: 14px;
    font-weight: 200;
    text-align: left;
}

.exp > #desc {
    margin-top: 20px;
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    max-width: 73%;
}

.exp > *:focus ~ #desc {
    opacity: 1;
}

/* ominous */

/* position title */
.exp > #OMI:focus ~ #desc > .top > .h1:before {
    color: white;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    opacity: 1;
    content: 'Graphic Design Lead';
}

/* dates */
.exp > #OMI:focus ~ #desc > .top > .date:before {
    opacity: 1;
    content: 'July 2021 - July 2022';
}

/* description */
.exp > #OMI:focus ~ #desc > .content > .exp::before {
    opacity: 1;
    content: 'Created numerous designs for promotional media to be used on brand social media accounts.';
}

/* location */
.exp > #OMI:focus ~ #desc > .content > .comp::before {
    opacity: 1;
    content: 'Remote';
}

/* rocketcards */

/* position title */
.exp > #RC:focus ~ #desc > .top > .h1:before {
    color: white;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    opacity: 1;
    content: 'UX Designer';
}

/* dates */
.exp > #RC:focus ~ #desc > .top > .date:before {
    opacity: 1;
    content: 'November 2021 - March 2022';
}

/* description */

.exp > #RC:focus ~ #desc > .content > .exp::before {
    opacity: 1;
    content: 'Created entire UX layout with components, provided detailed notes on parts of design for conversion into HTML.';
}

/* location */
.exp > #RC:focus ~ #desc > .content > .comp::before {
    opacity: 1;
    content: 'Remote';
}

How can I convert this wonky CSS animation into a stable JS one? I would stick with this but the fading animation doesn’t apply when you unfocus the element or switch between the buttons.

I included a bit more CSS than is probably necessary, but I am attempting to show the entire process that the CSS animation goes through.

Can’t load background script – manifest.json – Angular Chrome Extension

I’m a beginner programmer and I will gladly accept good advice from experienced colleagues.
I write my chrome plugin, but I encountered a problem with the background script attachment. When installing the plugin, there is a problem that informs in free translation that the “background.js’ script operating in the background failed to load. You can’t load the manifest file.

I tried to change background.js file content, its name, location. Add permissions, script types, I looked through all possible guides and solutions, but the script loading error still occurs, even with an empty background.js. Ofcourse manifest.json and background.js are in the same location.

Manifest.json file:
{ "manifest_version": 3, "name": "firstExt", "description": "My first extension", "version": "0.1", "background": { "service_worker": "background.js", "type": "module" }, "minimum_chrome_version": "92", "permissions": [ "storage", "activeTab", "scripting", "contextMenus"], "action": { "default_popup": "index.html" }, "host_permissions": [ "http://*/*", "https://*/*", "://*/" ] }

load checkbox check in reactive form

I have this checkbox that I load from a list with ngfor. In the function to load the checkbox is found in the ngOnInit()

<form [formGroup]="updateUserFormEducation" (ngSubmit)="updateInfoEducation(updateUserFormEducation.value)"
            class="needs-validation" novalidate>

     <div class="bg-white p-3 rounded border-opacity-25" formGroupName="levels">
        <div class="form-check" *ngFor="let level of list_levels; let i = index">
            <input class="form-check-input" type="checkbox" [formControlName]="i" [value]="i"
            (click)="loadCourses($event)">
            <label class="form-check-label" [for]="level.id">
                 {{ level.name }}
            </label>
        </div>
    </div>

</form>

component.ts

updateUserFormEducation = new FormGroup({
    id: new FormControl(),
    level: new FormControl(),
    course: new FormControl(),
    subject: new FormControl(),
})


this.updateUserFormEducation = this.formBuilder.group({
     levels: this.formBuilder.group({}),
})

checkboxLevel() {
    this.list_levels = []
    this.levelService.getLevel().subscribe((levels: any) => {
        levels.map((level: Level) => {
            if (level.condition_level === 1) {
                this.list_levels.push({
                    id: level.id,
                    name: level.name
                })
            }
        })
    })
}

ngOnInit

the row.id is the id of the user.
getUserSubjectLevel returns what the user selected, then I compare the list that is loaded with that of the function

const levels = <FormGroup>this.updateUserFormEducation.get('levels');

this.userSubjectService.getUserSubjectLevel(row.id).subscribe((user_subjects_levels: any) => {
     user_subjects_levels.map((user_subject_level: any) => {
           this.list_levels.map((list_level: any, index: any) => {
               if (list_level.id === user_subject_level.level) {
                     levels.addControl(index, new FormControl(true));
               }else{
                     levels.addControl(index, new FormControl(false));
               }
           })
      })
 })

it throws me an error

enter image description here

but when doing it manually, it works. that’s an example

this.updateUserFormEducation = this.formBuilder.group({
     levels: this.formBuilder.group({
          0 : new FormControl(true),
          1 : new FormControl(false),
          2 : new FormControl(true),
     }),
})

so I don’t know what could be the error, if you can help me thanks

How can i rotate an object based on the finger position?

I am using Lens Studio to build an AR effect and trying to use the position of the hand tracker fingertip to make a cube rotate. For example, as I move my finger on the x-axis the cube rotates in the y-axis in the direction of the finger.

I tried the following code but there is probably something I’m missing because it only works correctly on one face of the cube.

var pos = hand.indexFinger.tip.position;
var q1 = quat.angleAxis(degToRad(pos.y) * rotSens, vec3.left());
var q2 = quat.angleAxis(degToRad(pos.x) * rotSens, vec3.up());
var q3 = q1.multiply(q2);
transform.setWorldRotation(q3.multiply(rotation));
If I face the cube on the left, right, or backside the rotations are wrong.

I believe this is not a Lens Studio specific problem so similar solutions from other platforms like unity are welcome.