Category: javascript

Llevo todo el dia, y no puedo entender que es lo que esta pasando, pero parece que hay un return que me lleva al principio!!!!
He unido todo el codigo en la App

import { use } from "react";
import ErrorBoundary from "./error/ErrorBoundary";


function App() {
  return (
    <>
      <ErrorBoundary>
        {/* <Suspense fallback={<div>Cargando...</div>}> */}
        <DataDisplay />
        {/* </Suspense> */}
      </ErrorBoundary>
    </>
  );
}

function DataDisplay() {
  // Usamos 'use' para "esperar" la promesa de fetchData()

  console.log("iniciando:");
  const data = use(fetchData());
  console.log("data:", data);
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.completed ? "Completado" : "Pendiente"}</p>
    </div>
  );
}

const fetchData = async () =>   {
    try {
        const response =  await fetch('https://jsonplaceholder.typicode.com/todos/1',{mode: 'cors' });
        console.log('Response received:', response);
        const data = await response.json();
        console.log('Data fetched successfully', data);
        
        **return data;**
    } catch (error) {
        console.error(error);
        throw error;
    }
     console.log('This will not run');
}
export default App;``` 

y esto es un trozo de los consoles; el return lo ha de ejecutar despues de *'Data fetched successfully'*. Por favor, darme alguna pista!!!!

App.tsx:36 Response received: Response {type: ‘cors’, url: ‘https://jsonplaceholder.typicode.com/todos/1’, redirected: false, status: 200, ok: true, …}
App.tsx:36 Response received: Response {type: ‘cors’, url: ‘https://jsonplaceholder.typicode.com/todos/1’, redirected: false, status: 200, ok: true, …}
App.tsx:38 Data fetched successfully {userId: 1, id: 1, title: ‘delectus aut autem’, completed: false}
App.tsx:38 Data fetched successfully {userId: 1, id: 1, title: ‘delectus aut autem’, completed: false}
App.tsx:22 iniciando:“`

A pen tester called out that my Mixpanel cookies (mp_*) are missing the SameSite attribute.

Current Setup

I’m using the Mixpanel JavaScript SDK with this configuration:

mixpanel.init(token, {
track_pageview: false,
debug: process.env.NODE_ENV !== “production”,
secure_cookie: true,
cross_subdomain_cookie: false,
cross_site_cookie: false
});

Problem

Despite trying various configuration options, the Mixpanel cookies are still being set without the SameSite attribute. Browser dev tools show:

• ✅ Secure flag is present (due to secure_cookie: true)
• ❌ SameSite attribute is missing
• ❌ HttpOnly flag is missing

What I’ve Tried

1. Configuration options – I’ve tried cross_site_cookie: false and cross_subdomain_cookie: false but these don’t seem to add SameSite attributes. I found cross_site_cookie on https://classic.yarnpkg.com/en/package/mixpanel-browser from a 2.35.0 (17 Mar 2020) release, but it’s not mentioned anywhere else and doesn’t seem to work.
2. Custom cookie interceptor – I overrode document.cookie to intercept Mixpanel cookies and add SameSite, but this feels hacky and I’m not sure if it’s reliable.

//interceptor approach
const originalCookieDescriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie');
Object.defineProperty(document, 'cookie', {
  set: function(cookieString) {
    if (cookieString && cookieString.includes('mp_')) {
      if (!/samesites*=/i.test(cookieString)) {
        cookieString += '; SameSite=Lax';
      }
    }
    originalCookieDescriptor.set.call(this, cookieString);
  }
});

Questions

1. Does Mixpanel JavaScript SDK have native support for SameSite cookie attributes? I can’t find this in their official documentation.
2. What’s the recommended way to ensure Mixpanel cookies comply with modern browser security requirements?
3. Is there a reliable way to add SameSite attributes to third-party library cookies like Mixpanel’s?

Environment

• Mixpanel JavaScript SDK (latest version via CDN)

Environment

• React 18
• Vite 7.1.5
• Plasma UI (latest via npm)
• macOS (local dev)
• Fresh project scaffolded with

npm create vite@latest

What I Expected

I expected Plasma UI’s <Input /> component to render inside a simple form, styled and functional, as long as I wrapped the app with DeviceThemeProvider and used GlobalStyle and a valid theme.

What Actually Happened

As soon as I include <Input /> from @salutejs/plasma-ui, the entire UI goes blank. Nothing is visible in the browser — not even the surrounding JSX like <h1> and <div>. There’s no error in the browser console, no crash logs, and no failed network requests.

What Renders to the DOM

When <Input /> is present:

• The root <div id="root"> is empty — no children are rendered

• No HTML elements appear in the DOM inspector

• No styles or layout are applied

• Console logs inside the component do not appear

When I remove <Input /> and use a native <input> instead:

• Everything renders correctly

• JSX elements appear in the DOM

• Console logs work

• Form behaves as expected

Is It a Crash or a Visibility Issue?

It seems like a silent crash during render, not a CSS issue. The DOM is completely empty, and even fallback JSX like <h1> disappears. It’s not just that the input is invisible — the entire component tree fails to render.

Minimal Repro

.jsx code

import { Input } from '@salutejs/plasma-ui';
import { DeviceThemeProvider } from '@salutejs/plasma-ui/components/Device';
import { GlobalStyle } from '@salutejs/plasma-ui';
import { light } from '@salutejs/plasma-tokens/themes';

function App() {
  const [name, setName] = useState('');

  return (
    <DeviceThemeProvider theme={light}>
      <GlobalStyle />
      <Input
        placeholder="Your name"
        value={name}
        onChange={({ value }) => setName(value)}
      />
    </DeviceThemeProvider>
  );
}

What I’ve Tried

• Wrapped the app in DeviceThemeProvider with light theme from @salutejs/plasma-tokens/themes
• Added <GlobalStyle /> inside the provider
• Imported @salutejs/plasma-core in main.jsx
• Verified that onChange={({ value }) => setName(value)} is used correctly
• Removed deprecated lightEva theme
• Removed invalid import @salutejs/plasma-ui/styles (caused Vite build error)
• Downgraded Plasma UI to 3.0.0 — same result
• Replaced Plasma <Input /> with native <input> — works fine
• No console errors, no crash logs, just a blank screen

I’m not sure how to get the code snippet for this question as I don’t know how to specify the filename of the JavaScript file, but here goes.

I have a JavaScript file, “scripts.js” that includes // @ts-check at the top of the file. JSDoc comments are included to indicate parameters for functions, variables and classes. This has been most helpful for development of scripts.js, ensuring that I have proper typing in JavaScript. However, when I use the scripts.js file in an HTML file, those JSDoc type hints are not visible. For example, in Visual Studio Code, the calling of footer(1); does not give me the following problem of:

Argument of type 'number' is not assignable to parameter of type 'string'.

I’ve added // @ts-check to the HTML file and imported footer but still no luck.

Is there any way to get those ts-check type hints show up in the HTML file?

// @ts-check
"use strict";

/**
 * @param {string} [email] - Email address. (optional)
 */
function footer(email = "")
{
    // main function

    {
        let html = "";

        html += `<footer>`;
        html += `<hr>`;
        html += `<address><a href="mailto:${email}">${email}</a></address>`;
        html += `</footer>`;

        document.body.insertAdjacentHTML("beforeend", html);
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="scripts.js">
        // @ts-check
        import
        {
            footer
        } from "";
    </script>
    <title>JSDoc Test</title>
</head>

<body>

<h1>JSDoc Test</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Maecenas porttitor congue massa. Fusce posuere, magna sed
    pulvinar ultricies, purus lectus malesuada libero, sit amet
    commodo magna eros quis urna.</p>

<script>
    footer("[email protected]");
    footer(1); // no error here but ts-check should complain because the param is not a string
</script>

</body>
</html>

I’m working through a Holberton School web project.
In behavior.js I need to toggle a thumbnail’s size when it’s clicked.
The task says:

Modify the click event in behavior.js to include an if…else statement.

My HTML contains the image:

<img src="https://via.placeholder.com/800"
     id="smart_thumbnail"
     class="small"
     alt="Thumbnail">

My behavior.js currently looks like this:

    // I first wrote this (step 1):
thumbnailElement.addEventListener("click", function() {
    thumbnailElement.className =
        (thumbnailElement.className === "small") ? "" : "small";
});

// Then I added the required if...else (step 2):
var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.addEventListener("click", function() {
    if (thumbnailElement.className === "small") {
        thumbnailElement.className = "";
    } else {
        thumbnailElement.className = "small";
    }
});

But when I run the automated checker I keep failing Test #1: “thumbnailElement is declared and assigned by ID.”
Tests #2 and #3 (toggle logic and class switching) pass.

I’ve confirmed:

The HTML ID is smart_thumbnail and matches getElementById.

behavior.js is loaded at the bottom of the HTML before .

Why does the checker still think thumbnailElement is not “declared and assigned by ID”?
Is it because I have two event listeners or because of the order of the code?
What’s the correct way to satisfy this test?

(Holberton project context, but the underlying issue is JavaScript DOM usage and linter/checker expectations.)

Ah, and is there any hack or workaround on the latest version to reset the selection? Maybe simulating the double click event on an empty area of the plot. This is what I want to achieve:

I cannot find a way to do it with scattergl

This is what I’m trying, even in the version 2.12.0 with no luck

  await Plotly.relayout(plotDiv, {selections: []});
  await Plotly.restyle(plotDiv, {selectedpoints: [null]}, [lastSelectionSource]);

In this script I am using this instruction to trigger the repainting. But I get the same resulta than with relayout and restyle.

await Plotly.react(plotDiv, traces, layout);

The first time I use the lasso tool to make a selection, the drawn lasso remains visible, and the next selection in other plot doesn’t work properly. It gets added to the selectedIndices instead of replacing the current selection.

After that, if I select points in another plot, the selection works as expected.

However, when I make a new selection in the same plot, the lasso drawing appears again (which is normal behavior), but this causes the next selection in another plot to be aggregated with the previous selectedIndices, instead of overriding them.

I’ve attached a GIF that illustrates this behavior.

Do you know a more reliable way to implement this so that selections always replace the previous ones rather than accumulate?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Plotly 3.1.0 Grid Plot - ScatterGL</title>
    <script src="https://cdn.plot.ly/plotly-3.1.0.min.js"></script>
    <style>
      body {margin:0; font-family:'Inter', sans-serif; background-color:#f5f5f5; height:100vh;}
      .plot-container {width:100vw; height:100vh; background:white; overflow:hidden;}
    </style>
  </head>
  <body>
    <div id="plotly-plot" class="plot-container"></div>
    <script>
      function generateRandom(count){
          return Array.from({length:count},()=>Math.floor(Math.random()*100)+1);
      }

      const data = {
          x: generateRandom(100),
          y: generateRandom(100),
          x2: generateRandom(100),
          y2: generateRandom(100),
          x3: generateRandom(100),
          y3: generateRandom(100),
          x4: generateRandom(100),
          y4: generateRandom(100)
      };

      let traces = [
          {x:data.x, y:data.y, mode:'markers', type:'scattergl', marker:{size:7,color:'blue',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x1', yaxis:'y1'},
          {x:data.x2, y:data.y2, mode:'markers', type:'scattergl', marker:{size:7,color:'green',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x2', yaxis:'y2'},
          {x:data.x3, y:data.y3, mode:'markers', type:'scattergl', marker:{size:7,color:'red',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x3', yaxis:'y3'},
          {x:data.x4, y:data.y4, mode:'markers', type:'scattergl', marker:{size:7,color:'purple',opacity:0.7}, selected:{marker:{size:10,color:'red',opacity:1}}, unselected:{marker:{opacity:0.2}}, xaxis:'x4', yaxis:'y4'}
      ];

      const plotDiv = document.getElementById('plotly-plot');

      let layout = {
          title:'Plotly 3.1.0 Grid Plot - ScatterGL',
          autosize:true,
          showlegend:false,
          grid:{rows:2, columns:2, pattern:'independent'},
          xaxis1:{title:'X1'}, yaxis1:{title:'Y1'},
          xaxis2:{title:'X2'}, yaxis2:{title:'Y2'},
          xaxis3:{title:'X3'}, yaxis3:{title:'Y3'},
          xaxis4:{title:'X4'}, yaxis4:{title:'Y4'},
          plot_bgcolor:'white',
          paper_bgcolor:'white',
          hovermode:'closest',
          margin:{t:40,b:40,l:30,r:30},
          selectdirection:'any',
          selectionrevision:0,
          dragmode:'select'
      };

      Plotly.newPlot(plotDiv, traces, layout, {displayModeBar:true, responsive:true, scrollZoom:true, displaylogo:false});

      let lastSelectionSource = null;

      plotDiv.on('plotly_selected', async function(eventData){
          if(!eventData || !eventData.points || eventData.points.length===0) return;

          const sourceTrace = eventData.points[0].curveNumber;
          const selectedIndices = Array.from(new Set(eventData.points.map(p=>p.pointIndex)));
          console.log(selectedIndices);

          if(lastSelectionSource !== null && lastSelectionSource !== sourceTrace){
              layout.selectionrevision++;
              traces[lastSelectionSource].selectedpoints = null;
              await Plotly.react(plotDiv, traces, layout);
          }

          traces.forEach(t => t.selectedpoints = selectedIndices);
          layout.selectionrevision++;
          await Plotly.react(plotDiv, traces, layout);

          lastSelectionSource = sourceTrace;
      });
    </script>
  </body>
</html>

I have seen that there are some issues related to selected points in the latest versions of Plotly.js

This SO question is also related. Triggering a double click on an empty area would reset the selection. But I don’t know how to trigger that programmatically

My problem is that I can get the ID of the channel that the extension user is on, but when the user switches to another channel, the YouTube HTML doesn’t update and leaves the old channel ID there. This breaks my extension because I always need the ID of the channel that the user is currently viewing.

I have the following array of array

const employees = [
    ["001","DDDDD"],
    ["002","EEEEE"],
    ["001","DDDDD"],
    ["002","EEEEE"],
    ["003","WWWWW"],
    ["001","DDDDD"],
];

I want to create another array which will contain only Unique values based on the first array element, e.g.

let uniqueArray = [
    ["001","DDDDD"],
    ["002","EEEEE"],
    ["003","WWWWW"],
]

What will be the best approach to achieve this? I can do a for loop on the original array, but there has to be a better way to do this.

Thanks

I am working on a project using JavaScript, without frameworks. I have a code for adding a product to the cart. The code works well. The product is added as I need it. But, with the notification about adding, something is wrong. I need, if the product is not yet in the cart, when adding, the notification Product in the cart (type success) appeared, and if the product is in the cart, it was not added and there was a notification This product is in the cart (type info). As I said, the product is added correctly, one product only once. But every time when clicking on the add to cart button, the notification Product in cart(type success) appears.

export class HomePage extends Component {
constructor() {
super();
this.template = template();
this.state = {
  links: [
   {
     label: "Sign In",
     href: ROUTES.singIn,
   },
   {
    label: "My Cart",
    href: ROUTES.singIn,
  },
  ],

  products: [],
  orderCart: [],
  user: null,
};
}

 setLinks = () => {
  const { getUser } = useUserStore();
  if (getUser()) {
    this.setState({
      links: [
        {
          label: "My Cart",
          href: ROUTES.cart,
        },
        {
          label: "LogOut",
          href: ROUTES.logOut,
        },
      ],
    });
  }
};

getProducts = () => {
apiService
.get("/products")
.then(({ data }) => {
  this.setState({
    ...this.state,
    products: mapResponseApiData(data),
  });
})
};

addToCard = async ({ target }) => {

const btn = target.closest('.add-to-cart');
if (!btn) return;

const { id, price, name, img } = btn.dataset;

if (this.state.orderCart?.some(item => item.id === id)) {
  useToastNotification({ 
    message: 'This product is already in the cart :)', 
    type: TOAST_TYPE.info });
  return;
}

await apiService.patch(`/order/${id}`, { id, price, name, img }).then(() => {
   this.setState({
   ...this.state,
   orderCart: this.state.orderCart?.concat({ id, price, name, img }),
    });
  })
  useToastNotification({ message: 'Product in the cart!', type: TOAST_TYPE.success });
};

 componentDidMount() {
this.setLinks();
this.getProducts();
this.addEventListener("click", this.addToCard);
 }

 componentWillUnmount() {
this.removeEventListener("click", this.addToCard);
 }
}

customElements.define('home-page', HomePage);

When I try to add a product without logging in, the notification works correctly. When I first click, the notification is type success, when I click again, type info. Maybe the problem is in the user state?

Store.js:

export class Store {
constructor(initialState) {
this._state = initialState;
 }

 getState() {
   return this._state;
 }

setState(state) {
this._state = Object.assign(this._state, state);
 eventEmitter.emit(EVENT_TYPES.store, { state: this._state });
} 

 subscribe(callback) {
 eventEmitter.on(EVENT_TYPES.store, callback);
}

 unSubscribe(callback) {
 eventEmitter.off(EVENT_TYPES.store, callback);
 }
  }

export const store = new Store({ user: null });

useUserStore.js:

export const useUserStore = () => {
const setUser = (user) => {
store.setState({ user });
};

const getUser = () => {
return store.getState().user;
};

const removeUser = () => {
store.setUser({ user: null });
};

 return {
 setUser,
 getUser,
 removeUser,
 };
};

My code is here:
https://jsfiddle.net/0p71rzmv/4/

I have defined a new class of alertify dialog boxes with alertify.dialog. I would like to style these boxes, e.g., I would like the background color to be blue. I managed to modify the style of custom and error notifications of alertify but all my attempts to style my my_box boxes failed.

What are the CSS classes to modify for this ?
Is there anything to change in my JS ?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"></link>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"></link>
<style>
  .alertify-notifier .ajs-message {
      &.ajs-error {
          border: 5px solid;
          border-radius: 10px;
          background-color: #ff9999;
          border-color: red ;
      }
      &.ajs-custom {
          border: 5px solid;
          border-radius: 10px;
          background-color: #7777cc;
          border-color: blue;
      }
  }
</style>
<script>
  alertify.dialog('my_box', function factory() {
      return {
          main: function (message, onok) {
              this.setting('title', 'Confirm');
              this.setting('transition', 'fade');
              this.onok = onok;
              this.message = message;
          },
          setup: function () {
              return {
                  buttons: [
                      {
                          text: 'Yes',
                      },
                      {
                          text: 'No',
                      },
                  ],
                  options: {
                      modal: true,
                      resizeable: false,
                      maximizable: false,
                      closable: false,
                  },
                  focus: {
                      element: 1,
                  },
              };
          },
          prepare: function () {
              this.setContent(this.message);
          },
          callback: function (closeEvent) {
              if (closeEvent.index == 0) {
                  this.onok();
              }
          },
      };
  });
  $(document).ready(function () {
      alertify.notify("error", "error");
      alertify.notify("custom", "custom");
      alertify.my_box('Yes or no ?', function () {
          console.log('ok');
      });
  });
</script>

The problem is downthere saying Task: react-native-worklets:configureCMakeDebug[arm64-v8a] FAILED.
I tried everything that i found on the internet to fix this problem, i have changed java destination folder installing it directly in C:, JAVA_HOME is C:Java, PATH: %JAVA_HOME%bin and also C:Program FilesCommon FilesOracleJavajavapath (i tried removing it, it reappears). Then i tried changing gradle versions i think one was <8.10, then second one 8.10.2 (i think) and now 8.14.3, no fix. I tried with every version setting newArchEnabled with false and true, no help. I added org.gradle.java.home=C:\Java in gradle.properties, no change. Changed Java version from v24 to v21 and then to jdk 17.

Where is JavaScript code usually placed in an HTML document? Should it go inside the <head>, at the end of the <body>, or in a separate .js file? I want to understand the proper place and best practices for including JavaScript.

I have an analytics tracking endpoint on my server that wraps links in emails.

The flow looks like this:

1. In the email, the link is formatted as:

   https://myserver.com/track?redirect=https://myapp.com/some/page
   

2. When the user clicks the link:

   • The request hits my server.
   • I store some analytics (trackId, metricId, user agent, IP, etc.).
   • Then I redirect() back to the original redirect URL.

3. The app (myapp.com) has deep link support — when a browser sees this link, it should open the app directly if installed.

This works perfectly if I click the link from Slack.

But if I click the same link from Gmail, instead of opening the app, it stays in the browser.

Pseudocode of what I’m doing on the server

validate incoming query params (trackId, metricId, redirect)

extract user agent and ip

finalRedirect = decodeURIComponent(redirect)

if (metricId exists) {
   add metricId as query param to finalRedirect
}

store analytics (trackId, metricId, finalRedirect, userAgent, ip)

redirect (303) to finalRedirect

The Problem

• From Slack → works fine, the app opens as expected.
• From Gmail → it redirects to the browser but does not open the app, even though the app supports that host.

Changed to the redirect status code to 303 instead of 302, none of them worked.
Can’t reproduce the core issue as its happening on gmail.

If anybody has faced similar solution, please help

Recently, I tried to replicate the image carousel from a product page on [etsy.com].(https://www.etsy.com/)

There are two HTML elements that visually overlap each other, but the browser handles them as if they were separate, non-overlapping elements.
By “handled by the browser,” I mean that you can’t simply use JavaScript to apply the :hover pseudo-class on element.

Here’s the DOM structure:
dom structure with problem

• The scroll up / scroll down elements are responsible for auto-scrolling image carousel on hover.
• Below them, there’s a scroll container div with the list of images.

On my site, since the scroll elements are positioned on top of the images, hovering only triggers them and not the images underneath.
But on Etsy, it works differently: you can hover the scroll zones and the images at the same time (you can test this by tweaking their styles).

That’s basically it — I can’t figure out if I’m just being a noob here, or if there’s actually something deeper behind this behavior. It’s been so frustrating to investigate further.

I made sure all the styles are matched perfectly and the DOM structure is as close as possible to Etsy’s. I even asked three different AIs and had them search the web. I tried asking about doing this in different frameworks, possible JavaScript workarounds, and CSS tricks (like pointer-events: none), but nothing worked.

Googling didn’t help either — I couldn’t find any solution to “set” :hover or somehow monkey-patch its behavior.

Right now, my workaround in React is to use a scrollUpRef and redirect all mouse events to the image element underneath. (I’m using document.elementsFromPoint(e.clientX, e.clientY) to find the image element.)
But as you can imagine, this isn’t native behavior at all. It doesn’t trigger the :hover pseudo-class on the image; instead, I just add CSS classes manually on mouseenter.

I’m working on a web project built from an enterprise scaffold using webpack v5 and Babel. The target environment is Chrome ≥ 138 only.

However, I’ve noticed that the build includes unnecessary polyfills, even though the project is supposed to support only recent Chrome versions. After enabling the debug option in @babel/preset-env:

[
  '@babel/preset-env',
  {
    modules: false,
+    debug: true,
    useBuiltIns: 'usage',
    corejs: { version: "3.8", proposals: true }
  }
],

The debug output shows that Babel thinks Chrome 138 still requires polyfills for Set methods such as intersection, difference, and symmetricDifference:

Based on your code and targets, the corejs3 polyfill did not add any polyfill.

[/***/components/tooltip/style/index.ts]
Based on your code and targets, the corejs3 polyfill did not add any polyfill.

[/***/packages/utils/arrays.ts]
The corejs3 polyfill added the following polyfills:
  esnext.set.add-all { "chrome":"138" }
  esnext.set.delete-all { "chrome":"138" }
  esnext.set.difference { "chrome":"138" }
  esnext.set.every { "chrome":"138" }
  esnext.set.filter { "chrome":"138" }
  esnext.set.find { "chrome":"138" }
  esnext.set.intersection { "chrome":"138" }
  esnext.set.is-disjoint-from { "chrome":"138" }
  esnext.set.is-subset-of { "chrome":"138" }
  esnext.set.is-superset-of { "chrome":"138" }
  esnext.set.join { "chrome":"138" }
  esnext.set.map { "chrome":"138" }
  esnext.set.reduce { "chrome":"138" }
  esnext.set.some { "chrome":"138" }
  esnext.set.symmetric-difference { "chrome":"138" }
  esnext.set.union { "chrome":"138" }

[/***/packages/utils/animation.ts]
Based on your code and targets, the corejs3 polyfill did not add any polyfill.

But according to CanIUse, these features are already the baseline:

https://caniuse.com/mdn-javascript_builtins_set_symmetricdifference

Note: babel-loader, @babel/preset-env, @babel/polyfill, core-js, caniuse-lite, browserslist are all updated to the latest version.

How can I prevent @babel/preset-env + core-js from including these unnecessary polyfills for modern Chrome? Is there a recommended way to handle this issue, other than disabling useBuiltIns entirely?