oauth2 google callback not found

I am new to nodeJS and I’m having a problem with the google oauth2
I am getting this error :

GET http://localhost:5000/auth/callback?code=4/0AWtgzh5b588L7bEBqAgcpSSP7kOAT_4PN6Jh-_JPAe0LVC_etWSZg1mResjnVoB-gPhjJw&scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&authuser=0&hd=esprit.tn&prompt=consent 404 (Not Found)

**this is my passport-setup.js :
**

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth2').Strategy;
 
passport.serializeUser((user , done) => {
done(null , user);
})
passport.deserializeUser(function(user, done) {
done(null, user);
});
 
passport.use(new GoogleStrategy({
clientID:process.env.GOOGLE_CLIENT_ID, 
clientSecret:process.env.GOOGLE_CLIENT_SECRET, 
callbackURL:process.env.GOOGLE_CALLBACK_URL,

passReqToCallback:true
},
function(request, accessToken, refreshToken, profile, done) {
return done(null, profile);
}
));  

**and this is my signup routes :
**

const router = require('express').Router();
const passport = require('passport');

require('../../controllers/user-management/passport-setup');

// signup by google

router.get('/', (req, res) => {
    res.send("<button><a href='./auth'>Login With Google</a></button>")
    });


router.get('/auth' , passport.authenticate('google', { scope:
  [ 'email', 'profile' ]
}));
// Auth Callback
router.get( '/auth/callback',
  passport.authenticate( 'google', {
      successRedirect: './auth/callback/success',
      failureRedirect: './auth/callback/failure'
}));

// Success
router.get('/auth/callback/success' , (req , res) => {
  if(!req.user)
  res.redirect('./auth/callback/failure');
  res.send("Welcome " + req.user.email);
});

// failure
router.get('/auth/callback/failure' , (req , res) => {
  res.send("Error");
    console.log("faileddd");
})


module.exports = router;

enter image description here

I checked the redirect uri it’s not a mismatch..

CSS styles getting removed after page refresh in React application

I’m building a React application and I’m facing an issue with the CSS styles that I’m applying to the Select component from material UI. Specifically, when I apply some styles to remove padding from the Select component, the padding gets removed. However, when I refresh the page, the padding gets added back.

Here is my code:

                      <Select
                        variant="standard"
                        name="status"
                        value={selectedStatus}
                        label="New Status"
                        sx={{
                          overflowY: "auto",
                          height: 30,
                          width: "inherit",
                          backgroundColor: "white !important",
                          marginX: "2rem",
                          overflow: "hidden",
                          textAlign: "left",
                          "& .MuiSelect-select": {
                            padding: "0 !important"
                          }
                        }}
                        onChange={handleStatusChange}
                      >
                        <MenuItem value="1">Active</MenuItem>
                        <MenuItem value="0">Inactive</MenuItem>
                      </Select>

As you can see, I’m trying to remove the padding from the Select component using the !important modifier to ensure that the styles take precedence over other styles. However, when I refresh the page, the padding gets added back.

Can anyone suggest a solution to this issue? I’m not sure if this is a React-specific problem or if it’s related to CSS or Material-UI, which is the UI library I’m using. Please note that I’m using Typescript in my project.

js function not calling function for auto populate

I have an input field which contains the name of states and show the corresponding region on other field.The moments i change the value of state field the value of region should be changed.it is not working with my code what is wrong with tis
htlml code is

<div class="col-md-4 form-group"style="padding-right:0px;" >
<div class="form-group">
<label for="Region" >State</label>
<?php 
$sql="select rid,statename,region from tblregion order by statename";
$stmt=$dbh->prepare($sql);
$stmt->execute();
$arrstate=$stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<select class="form-control" name="state" id="state" >
<option value="<?php echo htmlentities($result->state);?>"><?php echo htmlentities($result->statename);?></option>
<?php
foreach($arrstate as $state){
?>
<option value="<?php echo $state['rid']?>"><?php echo $state['statename']?></option>
<?php
}
?>
</select>
</div></div>
<div class="col-md-2 form-group" style="padding-left:0px;">
<label for="Region" >Region</label>
<select class="form-control" name="" id="region" readonly>
<option><?php echo htmlentities($result->region);?></option>
</select>
</div>

The CODE FOR JAVA SCRIPT is

<script>

$(document).ready(function(){
jQuery('#state').change(function(){
//alert("hello);
var rid=jQuery(this).val();

jQuery.ajax({
type:'post',
url:'get_data.php',
data:'id='+rid,
success:function(result){
jQuery('#region').html(result); 
//alert(result);
}
}); 
});
});

</script>    

How to disable one button , while the other buttons are stil able

I have a store were I want it to be possible to click on a product until the stock is out. The stock is 10. How can I make so only the clicked button disables when reached 10 clicks, and the other ones continue working? Stock is Lager = 10. Products is the array. The buttons are hardcoded in html.

let products = [
    {
        id: 0,
        namn: 'Sneaker1',
        img: 0,
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 1,
        namn: 'Sneaker2',
        img: 1,
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 2,
        namn: 'Sneaker3',
        img: 2,
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 3,
        namn: 'Sneaker4',
        img: 3,
        pris: 1500,
        lager: 10,
        inCart: 0
    },
    {
        id: 4,
        namn: 'Sneaker5',
        img: 4,
        pris: 1500,
        lager: 10,
        inCart: 0
    }
]

const euro = document.querySelectorAll('.euro')

for(let i = 0; i < euro.length; i++ ){
    euro[i].addEventListener('click', () => {
        cartNumbers(products[i])
        totalCost(products[i])
        
        products.map((product) => {
            if(product.inCart >= 10){
                for(var i = 0; i < euro.length; i++) {
                    euro[i].disabled = true;
                }
                
            }
        })
              
    })
}

Global variable not updating [JavaScript]

I’m working on a webapp that draws a map of the United States and colors it based on financial data and a range of years selected by a slider. Technically, three maps are drawn and there are three buttons that switches which one of the three is shown. Clicking on a button should also change the value of a global variable so that the function that updates the colors on the map knows which map to change. However, the variable doesn’t seem to be changing. It changes inside the function that changes the map, but not anywhere else. Here is a stripped down version of the code that sets up the buttons and functions to change the value of activeMap. I’ve included a function that prints out the value of active map every second. It always prints out null.

<template>
    <div>
        <v-row class="pa-5">
            <v-col cols="12">
                <v-card outlined class="menu">
                    <div class="pa-3" style="text-align: center">
                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('incomes')"
                        >
                            <span class="buttonText">Incomes</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('home_values')"
                            ><span class="buttonText">House Prices</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('combined')"
                            ><span class="buttonText"> Market Health </span></v-btn
                        >
                    </div>
                </v-card>
            </v-col>
            <v-col style="text-align: center" id="d3-map" cols="0">
                <v-container class="container" id="map-container">
                    <v-col id="incomes" class="map"></v-col>
                    <v-col id="home_values" class="map"></v-col>
                    <v-col id="combined" class="map"></v-col>
                </v-container>
            </v-col>
        </v-row>
    </div>
</template>
<script>
import {
    defineComponent,
    onMounted,
} from "@nuxtjs/composition-api";

export default defineComponent({
    name: "Map",
    components: {},
    setup() {
        // Array contains html ID names corresponding to each div containing a map (SVG)
        const MAP_DIVS = document.getElementsByClassName("map");

        // Init vars to keep track of the actively displayed div (SVG) and corresponding map data
        var activeMap = null;

        onMounted(() => {
            checkMap();
        });

        // Define function to print activeMap every second
        function checkMap() {
            console.log(activeMap);
            setTimeout(checkMap, 1000);
        }

        // Define function to create toggle map btns
        function createToggleBtn(parentDiv, divControlled, btnText, toggleFunc) {
            var btn = document.createElement("button");
            btn.classList.add("toggle_btn");
            btn.innerText = btnText;
            btn.value = divControlled;
            btn.onclick = function () {
                toggleFunc(divControlled);
            };
            document.getElementById(parentDiv).appendChild(btn);
            return btn;
        }

        // Define toggle map functionality--used to change the 'active' map div/SVG that's displayed
        function toggleMap(divName) {
            if (divName == MAP_DIVS[0].id && activeMap != MAP_DIVS[0].id) {
                activeMap = MAP_DIVS[0].id;
            } else if (divName == MAP_DIVS[1].id && activeMap != MAP_DIVS[1].id) {
                activeMap = MAP_DIVS[1].id;
            } else if (divName == MAP_DIVS[2].id && activeMap != MAP_DIVS[2].id) {
                activeMap = MAP_DIVS[2].id;
            }
        }

        return {
            checkMap,
            toggleMap,
            createToggleBtn,
        };
    },
});
</script>

Dependency error installing react native firebase crashlytics

When I try installing firebase crashlytics in my react native project, I get the following error:

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @react-native-firebase/[email protected]
npm ERR! node_modules/@react-native-firebase/app
npm ERR!   @react-native-firebase/app@"^16.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @react-native-firebase/app@"17.3.2" from @react-native-firebase/[email protected]
npm ERR! node_modules/@react-native-firebase/crashlytics
npm ERR!   @react-native-firebase/crashlytics@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This is my (part) of my package.json

"dependencies": {
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.15.5",
    "@react-native-community/netinfo": "^9.0.0",
    "@react-native-firebase/app": "^16.5.0",
    "@react-native-firebase/auth": "^16.5.0",
    "@react-native-firebase/messaging": "^16.5.0",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "axios": "^0.21.4",
    "date-fns": "^2.28.0",
    "i18n-js": "^3.9.2",
    "laravel-echo": "^1.11.3",
    "lodash": "^4.17.21",
    "mobx": "^6.0.4",
    "mobx-persist-store": "^1.0.3",
    "mobx-react": "^7.0.5",
    "moment": "^2.29.2",
    "pusher-js": "^7.0.3",
    "react": "17.0.2",
    "react-native": "0.68.5",
    "react-native-camera": "^4.2.1",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-device-info": "^9.0.2",
    "react-native-fast-image": "^8.5.11",
    "react-native-geolocation-service": "^5.1.1",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-iap": "^8.0.5",
    "react-native-image-crop-picker": "^0.37.3",
    "react-native-image-picker": "^5.1.0",
    "react-native-image-resizer": "^1.4.5",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^2.0.2",
    "react-native-modal": "^11.6.1",
    "react-native-purchases": "^5.10.1",
    "react-native-reanimated": "^2.8.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^13.7.0",
    "react-native-vector-icons": "^9.1.0",
    "react-native-video": "^6.0.0-alpha.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }

Unusual delay with animation loading in the header of my website on mobile devices

So if you check out this site: https://staging-logoglo-newsite.kinsta.cloud/

On a desktop, and tablet, it loads exactly as I want it to, nice and smooth, with no initial delay.

But if you check it out on a mobile (in my case an android device) you will see this:

https://staging-logoglo-newsite.kinsta.cloud/wp-content/uploads/2023/02/Screenrecorder-2023-02-23-12-38-34-788.mp4

Even when the page s loaded and cached, it still has that long delay before the text animates in.

Any help is very much appreciated.

The devs of the theme, got me to add this code:

@media (max-width: 767px){
   [data-x-effect] {
    animation-duration: 0 !important;
    animation-delay: 0 !important;
   }
}

But it doesn’t seam to do anything?

Use React Components instead of pagination dots in Swiperjs, error [object Object]

I’m sure there is a quick fix, and I’m messing up somewhere, but how do I use custom elements instead of dots for pagination in Swiperjs for React?

The custom element returns an SVG from an icons array.

I originally had the code in TSX but converted it to js to make things easier, but no luck. It just keeps returning [object Object][object Object][object Object] where the pagination should be.

Here’s what I’ve got so far:

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

import "./styles.css";

// import required modules
import { Pagination } from "swiper";

const icons = [
    {
        icon: (
            <svg
                width="86"
                height="87"
                viewBox="0 0 86 87"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
                <rect x="10.5" y="11.125" width="75" height="75" stroke="#1A1918" />
            </svg>
        ),
    },
    {
        icon: (
            <svg
                width="91"
                height="84"
                viewBox="0 0 91 84"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
                <path
                    d="M7.36379 83.25L48.5 12L89.6362 83.25H7.36379Z"
                    stroke="#1A1918"
                />
            </svg>
        ),
    },
    {
        icon: (
            <svg
                width="88"
                height="91"
                viewBox="0 0 88 91"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
                <rect
                    x="8.5"
                    y="11.5"
                    width="79"
                    height="79"
                    rx="39.5"
                    stroke="#1A1918"
                />
            </svg>
        ),
    },
];

const Bullet = ({ bulletIcon, className }) => {
    return <div className={className}>{bulletIcon}</div>;
};

export default function App() {
    const pagination = {
        clickable: true,
        renderBullet: function (index, className) {
            return (
                <Bullet className={className} bulletIcon={icons[index].icon}></Bullet>
            );
        },
    };

    return (
        <>
            <Swiper
                pagination={pagination}
                modules={[Pagination]}
                className="mySwiper"
            >
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
            </Swiper>
        </>
    );
}

My JavaScript code does not work because of querySelector

I’m new to java script and have a long way to go off learning, and attempted to make something but it doesn’t not work.

Here’s the code:

var LIS = document.getElementsByClassName("Links")[0].querySelector("ul").querySelector("li").querySelector("a");

for (let Index in LIS){
  LIS[Index].mouseenter = function(){
    console.log("Test");
  };
};

Here’s the error I get
Img

function main(){
    document.getElementsByClassName("Links")[0].querySelector("ul").querySelector("li").querySelector("a").onmouseenter = function(){
        console.log("Test")
    }
}

This one didn’t log anything in the console.

How to start a CSS Keyframe animation from a button press using JS?

So I am fairly new to coding, and completely new to js/JQuery and we have been tasked with creating a CSS Animation game, and I have an event where when I press the .buutton, I want it to start my .nuclear-icon animation sequence which uses sprite loading between two images. But my issue is, the .nuclear-icon is constantly flashing.

  .button {
    position: absolute; top: 110px; right: 355px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 96px;
    display: inline-block;
    border: 2px solid black;
    cursor: pointer;
    padding: 7px 28px;
    border-color: #000000;
    color: black;
  }

.nuclear-icon {
  width: 94px; height: 101px;
  background: url(img/intro_nuclear.png); background-repeat: no-repeat;
  position: absolute; top: 580px; left: 254px;
  animation: red-alert .5s steps(2) infinite;
}


@keyframes red-alert {
  0% { background-position: 94 101; opacity: 1;}
  100% { background-position: 94 202; opacity: 1;}
}

We have been taught the very basics of this stuff but I cannot seem to get it to work if anyone could help please? If I have worded this correctly. These are the three elements that are causing this issue, everything has been added in by css as that’s how we have been told to do it for this assignment.

I have tried adding a .AddEventListener to a ‘click’ but I really don’t understand it all that well. Any help would be greatly appreciated.

Formik React throws an error, when working with array inside of the nested object

Th problem appears, when I try to create a FieldArray Formik to worm with an array inside an nested object. The code I use to get values is like ‘arrayHelpers.form.values[arrayHelpers.name].conditions’
It works quite well, when it comes to displaying the values and correcting them, but when it comes to creating row (PUSH) i get an error ‘can’t access property “push”, arrayHelpers[arrayHelpers.name] is undefined’
the whole component is in the sandbox https://codesandbox.io/s/heuristic-williams-6jocp1?file=/src/Formik.tsx:1039-1040

FieldArray looks like this:

export const FieldArrayConditions = (arrayHelpers: any) => {
    const conditions = arrayHelpers.form.values[arrayHelpers.name].conditions
    return(
    <>
    {conditions.map((_: void, index: number) => {
        return (
            <div key={index} className='form__row-condition'>
                <input type='hidden' name={`${arrayHelpers.name}.conditions[${index}].id`}/>
                <input type='hidden' name={`${arrayHelpers.name}.conditions[${index}].margin_id`}/>
                <Field 
                    type='number'
                    name={`${arrayHelpers.name}.conditions[${index}].price_from`}
                    component={InputNotLabeled}
                    />
                <Field
                    name={`${arrayHelpers.name}.conditions[${index}].price_measure.id`}
                    component={SelectorCurrencies}
                    />
                <span>до</span>
                <Field 
                    type='number'
                    name={`${arrayHelpers.name}.conditions[${index}].price_before`}
                    component={InputNotLabeled}
                    />
                <Field
                    name={`${arrayHelpers.name}.conditions[${index}].price_measure.id`}
                    component={SelectorCurrencies}
                    />
                <span>=</span>
                <Field 
                    type='number'
                    placeholder='Сумма'
                    name={`${arrayHelpers.name}.conditions[${index}].margin`}
                    component={InputNotLabeled}
                    />
                <Field
                    name={`${arrayHelpers.name}.conditions[${index}].price_measure_id`}
                    component={SelectorCurrencies}
                    value={`${arrayHelpers.name}.conditions[${index}].price_measure.id`}
                    />
            </div>
        )
    })}
    <div className="form__fieldset">
        <BtnExport text={'Добавить условие'} 
        changeAction={() => arrayHelpers.push(initialConditions)}/>
    </div>
    </>
)}

Mac Automation – AppleScript, JavaScript for Automation (.JXA), and JavaScript (.JS)

I learned AppleScript last year and it’s gone pretty well. After discovering BetterTouchTool, I learned about utilizing JXA or JS for automating tasks.

I can make sense of the .jxa documentation on apple’s Apple’s JXA Release Notes

I can also write very simple scripts with BTT’s JavaScript functions(?)

I have a few questions which I’ve googled answers to, but I don’t think they apply to me.

  1. I was told by someone on another forum that I should switch to using JXA instead of AppleScript because it’s more current. I researched it and it looks like both AS and JXA aren’t being developed further. Is there a reason why I should re-write my libraries to JXA? (next question might provide insight what I want)

2. Can I write apps/libraries that use any combination of these three languages? AppleScript is VERY limited in the sense of working with dictionaries (records) and string manipulation etc… I know JavaScript has so many functions built into it- which would make my code so much cleaner (and more ummm… reliable? some of my “from scratch” functions are absolute trash). It doesn’t look like JXA adapts any of these functions, right? I’ve found a few JXA/AS libraries people post on GitHub that essentially replicate these. Am I going about this the right way? I’ll put my project’s requirements at the end

I started diving into node.js (which is what I think the BTT’s JavaScript Functions link uses. I know THAT can call AppleScript functions as also mentioned in that link. (I posted another topic on this here if anyone has a solution to that too. Also, I know AppleScript can do the terminal command to run a javascript file- my issue is passing inputs/return values to each other… and also creating an organized structure.

Project:
(100% for personal use and not to distribute- mostly because it basically requires every permission enabled)
-communicate with Apple Music to gather metadata, easily work with playlists- add, delete, etc..
-backup my metadata (currently using Numbers, but might switch to SQL?)
-icon automation which requires file and image manipulation (Pixelmator Pro has an extensive AS dictionary, so I’m using that)
-then using these scripts in conjunction with BTT to create cool UI’s (automating the buttons etc uses JSON to transfer data between the code and BTT- I wrote a very sloppy AS function to “encode/decode” JSON. The buttons and icons will constantly be changing, so automating these needs to be easy- not spaghetti code like I have (with my personal libraries and icky JSON en/decoder)

Oh and last thing… I stumbled upon Obj C with AS or JXA, but I am already overwhelmed with the 3 languages mentioned. Is it worth diving into this a bit more? Oh and I’m realizing using terminal commands/scripts might also be worth diving into a bit more?

I hope this question is concise because it definitely is not in my head. I apologize if I provided excessive info.

Thanks in advance!

OrbitControls do not work despite being imported and referenced and no error in inspector

Problem

I am trying to create a ThreeJS scene and need OrbitControls to properly build it. However, when I load the page, all my objects appear properly, including my gridHelper, but the OrbitControls do not work. I have checked the ThreeJS docs on how to correctly import the OrbitControls, and have made sure that the controls update, etc. There are no errors or warnings in vs code or the inspector.

Code

import './style.css'
import * as THREE from 'three';
import isTouchDevice from './util';
import { OrbitControls } from 'three/addons/controls/OrbitControls';

let useAntiAliasing = window.devicePixelRatio < 1;

const renderer = new THREE.WebGLRenderer({ antialias: useAntiAliasing, powerPreference: "high-performance", canvas: document.querySelector("#bg"), });

renderer.setPixelRatio(window.devicePixelRatio);


if (isTouchDevice()) {
  if (window.orientation == 90 || window.orientation == -90) renderer.setSize(screen.height, screen.width); // Includes space for the address bar and tabs.
  else renderer.setSize(screen.width, screen.height); // Includes space for the address bar and tabs.
} else {
    renderer.setSize(window.innerWidth, window.innerHeight);
}




const scene = new THREE.Scene();
const spaceTexture = new THREE.TextureLoader().load('2k_stars_milky_way.jpg');
scene.background = spaceTexture;
renderer.setClearColor(0xffffff, 0) 

const ambientLight = new THREE.AmbientLight(0xffffff)
scene.add(ambientLight)

const gridHelper = new THREE.GridHelper(200, 50)
scene.add(gridHelper)

let renderDistanceMax = 0;


if (window.innerWidth <= 768) renderDistanceMax = 600
else if (window.innerWidth >= 769 && window.innerWidth <= 1080) renderDistanceMax = 875
else renderDistanceMax = 900

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  renderDistanceMax
)

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 0, 0);
controls.update();


function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();

There is some code not included where I instantiate planets with their textures, however these planets show up correctly and spin as they are coded to, so I don’t think they have anything to do with the problem. If needed I will add that code to my question.

Chrome Extension MV3 migration : How to convert background script that uses window and document to service worker?

I have a chrome extension which was built on v2 version. I’m using background script to initialise my app. Then in popup.js I’m using runtime.getBackgroundPages() to get the instance from background page and perform some operation.

background.js


class Client {
  constructor() {
    this.settings = { env: "qa" };
  }
  init() {
    <iframe
      id="inlineFrameExample"
      title="Inline Frame Example"
      width="300"
      height="200"
      src="src"
    ></iframe>;
  }
}

class App {
  constructor() {
    this.app = new Client();
  }

  render() {}
}

window.app = new App();


the reason for keeping app is that it acts as single source of truth. All session data, settings etc are stored here. Other part of the extension like popup.js use this instance to read and update values.

popup.js

 
class Popup{
    constructor(){
        this.app = chrome.runtime.getBackgroundPage(); // this is not working
        this.app.init();
    }
 
  // remianing logic

} 


Now since in v3 , the background script has been removed and service worker should be used. Service worker doesn’t have access to dom , document , window objects.

Hence I’m facing difficulties in migrating. I tried storing the app instance in chrome storage. But due to serialization, the methods are getting removed from the value.

here is how I’m trying in mv3 :

// workaround 1 . (background.js)
  
const app = new App(); 
 
chrome.storage.local.set({ instance: app }).then(() => {
  console.log("Value is set to " , app);
});

// in popup.js trying to read 

chrome.storage.local.get(["instance"]).then((result) => {
  console.log("Value currently is ", result);
  result.instance.init(); // init method doesn't exists 
});

Really confused how should I redesign it ?

Any help will be highly appreciated.

Can’t resolve ‘@material-ui/lab’ error with latest version of React

I am trying to implement a global alert using the following approach:

Sandbox Demo

However, I get this error:

ERROR in ./src/components/snackbar/Alert.js 5:0-82
Module not found: Error: Can’t resolve ‘@material-ui/lab’ in ‘srccomponentssnackbar’

I use "react": "^18.2.0" and it seems that there is no @material-ui/lab installation. How can I solve the problem without downgrading my React version? Any idea?