I want to verify that facebook pixel ‘track’ event is actually firing when user perform signup ,

is there a way ?
using Laravel dusk.

<<User successfully register’s and then , pixel code is executed on the front side in the js.>>

I’m using Webpack:

• webpack: 5.90.1
• webpack-cli: 4.10.0
• webpack-dev-server 4.15.1.

My webpack.config.js doesn’t have any additional config for the Terser plugin, so it just uses the default options. What I have noticed, when compiling my code with npm run prod is that one of my selectors got squished:

document.querySelector (`[for="test-${MY_CONSTANT}"] a`) 

became:

document.querySelector(`[for="test-${MY_CONSTANT}"]a`)

So it removed the white spaces from inside the selector.

I fixed this by changing the selector to:

document.querySelector('[for="test-' + MY_CONSTANT + '"] > a').click();

Still I don’t think it’s okay that minification creates invalid selectors. So far I have looked at Terser docs to find anything that might help, but I haven’t found any solutions.

Description:
Overall there is an array (“shoppingList”) of objects, that are each displayed as bootstrap-cards in the browser through DOM manipulation in the JS file. Each card has this button (“impBtn”) and one could click it and add +1 (until 6 is reached, then it starts again with 0) to signal, what kind of importance this item has.

Also, an importance value from 0-1 turns the displayed number-button to green, from 2-3 its yellow, 4-5 is red (by changing the bootstrap style). All items have a default importance value of 0 and color green. But when setting the value directly inside the .js at the array to 3 for example and reload the page, then it should be displayed in yellow, but it stays green. Strangely, when clicking the button so many times that the counter starts at 0 again, then the if-statement initiates and colors are displayed accordingly then on.

How is it possible to code this so that a default importance of 3 (for example) is displayed in yellow through the browser in the first place? Or can someone explain, why the code below acts like described?

function addImportance() {
const impBtn = document.querySelectorAll('.impBtn');
impBtn.forEach((btn, index) => {       
    btn.addEventListener("click", () => {   
        shopList[index].importance ++;
        if (shopList[index].importance == 6) {
            shopList[index].importance = 0;
        }  
        btn.textContent = shopList[index].importance;

        if (2 > shopList[index].importance) {
            impBtn[index].classList.replace('btn-danger','btn-success');
        } else if (4 > shopList[index].importance) {
            impBtn[index].classList.replace('btn-success','btn-warning');
        } else if (5 >= shopList[index].importance){
            impBtn[index].classList.replace('btn-warning','btn-danger');
        };
    });  
});  

};

After update Strapi 4 to Strapi 5

And try to command npm run develop showing this following errors:

⠧ Loading Strapi(node:97298) Warning: [deprecated] In future versions, Strapi will stop reading directly from the environment variable API_TOKEN_SALT. Please set apiToken.salt in config/admin.js instead.
For security reasons, keep storing the secret in an environment variable and use env() to read it in config/admin.js (ex: `apiToken: { salt: env('API_TOKEN_SALT') }`). See https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html#configuration-using-environment-variables.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:97298) Warning: Missing transfer.token.salt: Data transfer features have been disabled.
Please set transfer.token.salt in config/admin.js (ex: you can generate one using Node with `crypto.randomBytes(16).toString('base64')`)
For security reasons, prefer storing the secret in an environment variable and read it in config/admin.js. See https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html#configuration-using-environment-variables.
⠋ Building build context
[INFO] Including the following ENV variables as part of the JS bundle:
    - ADMIN_PATH
    - STRAPI_ADMIN_BACKEND_URL
    - STRAPI_TELEMETRY_DISABLED
✔ Building build context (10ms)
✔ Creating admin (175ms)
✔ Loading Strapi (2649ms)
✔ Generating types (301ms)

 Project information                                                          

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Mon Mar 17 2025 16:28:14 GMT+0600 (Bangladesh S… │
│ Launched in        │ 2956 ms                                          │
│ Environment        │ development                                      │
│ Process PID        │ 97298                                            │
│ Version            │ 5.11.2 (node v20.16.0)                           │
│ Edition            │ Community                                        │
│ Database           │ postgres                                         │
│ Database name      │ heroku-backup-b057                               │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available                                                            

Welcome back!
To access the server ⚡️, go to:
http://localhost:1337

[2025-03-17 16:28:14.103] info: Strapi started successfully
[2025-03-17 16:28:16.125] http: GET /admin (40 ms) 200
✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-redirects/admin/screens/Redirect/index.js:10:4:
      10 │     <div>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:506:4:
      506 │     <TextInput
          ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-permalinks/admin/src/contentManagerHooks/filter-permalink-columns.js:34:15:
      34 │         return <ListViewColumn isOrphan={isOrphan} ancestorsPath={ancestorsPath} slug={slug} />;
         ╵                ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-redirects/admin/screens/Redirect/DetailPage/index.js:127:4:
      127 │     <Box>
          ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-redirects/admin/screens/Redirect/OverviewPage/index.js:152:4:
      152 │     <Box>
          ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-permalinks/admin/src/components/CustomFieldIcon/index.js:4:2:
      4 │   <svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        ╵   ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:8:4:
      8 │     <Box
        ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-permalinks/admin/src/components/CopyLinkButton/index.js:26:4:
      26 │     <CopyToClipboard text={url} onCopy={handleOnCopy}>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-permalinks/admin/src/components/EditViewRightLinks/index.js:16:9:
      16 │   return <CopyLinkButton url={url} />;
         ╵          ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/PluginIcon/index.js:4:25:
      4 │ const PluginIcon = () => <Icon />;
        ╵                          ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/pages/App/index.js:10:4:
      10 │     <div>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportButton/ImportButton.js:25:4:
      25 │     <CheckPermissions permissions={pluginPermissions.importButton}>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/InjectedImportExportSingleType/InjectedImportExportSingleType.js:15:4:
      15 │     <CheckPermissions permissions={pluginPermissions.main}>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/Injected/Alerts/Alerts.js:12:4:
      12 │     <Portal>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/InjectedExportCollectionType/InjectedExportCollectionType.js:6:9:
      6 │   return <ExportButton unavailableOptions={['exportPluginsContentTypes']} />;
        ╵          ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] Could not resolve "@strapi/design-system/TextInput"

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:5:26:
      5 │ import { TextInput } from '@strapi/design-system/TextInput';
        ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist/TextInput" is forbidden by this package:

    node_modules/@strapi/design-system/package.json:23:11:
      23 │     "./*": "./dist/*"
         ╵            ~~~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@strapi/design-system/package.json:9:2:
      9 │   "exports": {
        ╵   ~~~~~~~~~

  Import from "@strapi/design-system/TextInput/index.js" to get the file
  "node_modules/@strapi/design-system/dist/TextInput/index.js":

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:5:58:
      5 │ import { TextInput } from '@strapi/design-system/TextInput';
        │                                                           ^
        ╵                                                           /index.js

  You can mark the path "@strapi/design-system/TextInput" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportButton/ExportButton.js:25:4:
      25 │     <CheckPermissions permissions={pluginPermissions.exportButton}>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] Could not resolve "@strapi/design-system/Box"

    node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:3:20:
      3 │ import { Box } from '@strapi/design-system/Box';
        ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist/Box" is forbidden by this package:

    node_modules/@strapi/design-system/package.json:23:11:
      23 │     "./*": "./dist/*"
         ╵            ~~~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@strapi/design-system/package.json:9:2:
      9 │   "exports": {
        ╵   ~~~~~~~~~

  Import from "@strapi/design-system/Box/index.js" to get the file
  "node_modules/@strapi/design-system/dist/Box/index.js":

    node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:3:46:
      3 │ import { Box } from '@strapi/design-system/Box';
        │                                               ^
        ╵                                               /index.js

  You can mark the path "@strapi/design-system/Box" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@strapi/design-system/Typography"

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:6:27:
      6 │ import { Typography } from '@strapi/design-system/Typography';
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist/Typography" is forbidden by this package:

    node_modules/@strapi/design-system/package.json:23:11:
      23 │     "./*": "./dist/*"
         ╵            ~~~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@strapi/design-system/package.json:9:2:
      9 │   "exports": {
        ╵   ~~~~~~~~~

  Import from "@strapi/design-system/Typography/index.js" to get the file
  "node_modules/@strapi/design-system/dist/Typography/index.js":

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:6:60:
      6 │ import { Typography } from '@strapi/design-system/Typography';
        │                                                             ^
        ╵                                                             /index.js

  You can mark the path "@strapi/design-system/Typography" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@strapi/design-system/Typography"

    node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:4:27:
      4 │ import { Typography } from '@strapi/design-system/Typography';
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist/Typography" is forbidden by this package:

    node_modules/@strapi/design-system/package.json:23:11:
      23 │     "./*": "./dist/*"
         ╵            ~~~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@strapi/design-system/package.json:9:2:
      9 │   "exports": {
        ╵   ~~~~~~~~~

  Import from "@strapi/design-system/Typography/index.js" to get the file
  "node_modules/@strapi/design-system/dist/Typography/index.js":

    node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:4:60:
      4 │ import { Typography } from '@strapi/design-system/Typography';
        │                                                             ^
        ╵                                                             /index.js

  You can mark the path "@strapi/design-system/Typography" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/pages/HomePage/HomePage.js:27:4:
      27 │     <CheckPagePermissions permissions={pluginPermissions.main}>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportModal/ImportModal.js:156:4:
      156 │     <Portal>
          ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-redirects/admin/components/RedirectForm/index.js:56:4:
      56 │     <form onSubmit={formik.handleSubmit}>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/AncestorsPath.js:8:4:
      8 │     <PathLabel hasError={hasError}>
        ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-redirects/admin/components/InjectedImportButton/index.js:25:4:
      25 │     <>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-redirects/admin/components/TableHead/index.js:9:4:
      9 │     <Thead>
        ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportModal/ExportModal.js:90:4:
      90 │     <Portal>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/Header/Header.js:10:4:
      10 │     <Box background="neutral100">
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] Could not resolve "@strapi/design-system/Box"

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:2:20:
      2 │ import { Box } from '@strapi/design-system/Box';
        ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist/Box" is forbidden by this package:

    node_modules/@strapi/design-system/package.json:23:11:
      23 │     "./*": "./dist/*"
         ╵            ~~~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@strapi/design-system/package.json:9:2:
      9 │   "exports": {
        ╵   ~~~~~~~~~

  Import from "@strapi/design-system/Box/index.js" to get the file
  "node_modules/@strapi/design-system/dist/Box/index.js":

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:2:46:
      2 │ import { Box } from '@strapi/design-system/Box';
        │                                               ^
        ╵                                               /index.js

  You can mark the path "@strapi/design-system/Box" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@strapi/design-system/Field"

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:3:28:
      3 │ import { FieldAction } from '@strapi/design-system/Field';
        ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist/Field" is forbidden by this package:

    node_modules/@strapi/design-system/package.json:23:11:
      23 │     "./*": "./dist/*"
         ╵            ~~~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@strapi/design-system/package.json:9:2:
      9 │   "exports": {
        ╵   ~~~~~~~~~

  Import from "@strapi/design-system/Field/index.js" to get the file
  "node_modules/@strapi/design-system/dist/Field/index.js":

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:3:56:
      3 │ import { FieldAction } from '@strapi/design-system/Field';
        │                                                         ^
        ╵                                                         /index.js

  You can mark the path "@strapi/design-system/Field" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@strapi/design-system/Flex"

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:4:21:
      4 │ import { Flex } from '@strapi/design-system/Flex';
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist/Flex" is forbidden by this package:

    node_modules/@strapi/design-system/package.json:23:11:
      23 │     "./*": "./dist/*"
         ╵            ~~~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@strapi/design-system/package.json:9:2:
      9 │   "exports": {
        ╵   ~~~~~~~~~

  Import from "@strapi/design-system/Flex/index.js" to get the file
  "node_modules/@strapi/design-system/dist/Flex/index.js":

    node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:4:48:
      4 │ import { Flex } from '@strapi/design-system/Flex';
        │                                                 ^
        ╵                                                 /index.js

  You can mark the path "@strapi/design-system/Flex" as external to exclude it from the bundle,
  which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-redirects/admin/components/ImportModal/index.js:165:4:
      165 │     <Portal>
          ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/Editor/Editor.js:11:4:
      11 │     <EditorLib
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportModal/components/ImportEditor/ImportEditor.js:28:4:
      28 │     <>
         ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

4:28:17 PM [vite] error while updating dependencies:
Error: Build failed with 34 errors:
node_modules/strapi-plugin-import-export-entries/admin/src/components/Editor/Editor.js:11:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportButton/ExportButton.js:25:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportModal/ExportModal.js:90:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/Header/Header.js:10:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportButton/ImportButton.js:25:4: ERROR: The JSX syntax extension is not currently enabled
...
    at failureErrorWithLog (/Users/bs1006/Work/2025/client_project/Viqua/strapi-viquia-features/node_modules/esbuild/lib/main.js:1469:15)
    at /Users/bs1006/Work/2025/client_project/Viqua/strapi-viquia-features/node_modules/esbuild/lib/main.js:945:25
    at /Users/bs1006/Work/2025/client_project/Viqua/strapi-viquia-features/node_modules/esbuild/lib/main.js:1350:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)```

I have been using iMacros for a very long time. I was using iMacros version 8.9.7 and Firefox version 48 because it supported JavaScript. But today when I opened Firefox I found the iMacros plugin disabled. I tried to enable it but I couldn’t. So I removed it and tried to install the plugin again. But when I tryied to install FF is saying “This add on could not be installed because it appears to be corrupt“. I dont know what happed but its stopped working on both pc I have. I have tried reinstalling FF, changing FF version 47 and 49 as well as iMacros version 9.0.3. Nothing seems to work now. Anyone else facing the problem?
My OS is Win 10 64bit.
Thank you.

I want to create a vue single page app that uses jsonforms. I want to avoid using a bundler.
My code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue JSONForms no bundler</title>


</head>
<body>
<div id="app">
    <nav>
        <a href="#" @click.prevent="currentView = 'my_json_forms'">JSON Forms</a>
        <a href="#" @click.prevent="currentView = 'my_pre'">Pre</a>
        <a href="#" @click.prevent="currentView = 'my_table'">Table</a>
    </nav>
    <component :is="currentView"></component>


</div>

<!-- Your JavaScript code -->
<script type="module">
    import {createApp, defineComponent} from 'https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.js'
    import jsonformsvue, {JsonForms} from 'https://cdn.jsdelivr.net/npm/@jsonforms/[email protected]/+esm'
    import jsonformsvueVanilla, {
        vanillaRenderers
    } from 'https://cdn.jsdelivr.net/npm/@jsonforms/[email protected]/+esm';


    const MyJsonForms = defineComponent({
        components: {JsonForms},
        template: `
          <div>
            <h2>Home Page</h2>
            <p>Welcome to the home page.</p>
            <json-forms
                :data="data"
                :renderers="renderers"
                :schema="schema"
                :uischema="uischema"
                @change="onChange"
            />
          </div>`
        , data() {
            return {
                renderers: vanillaRenderers,
                schema: {
                    type: "object",
                    properties: {
                        name: {type: "string"},
                        age: {type: "integer"}
                    }
                },
                uischema: {
                    type: "VerticalLayout",
                    elements: [
                        {type: "Control", scope: "#/properties/name"},
                        {type: "Control", scope: "#/properties/age"}
                    ]
                },
                data: {name: "John", age: 30}
            }
        }, methods: {
            onChange(event) {
                this.data = event.data;
            },
        },
    });

    const MyPre = defineComponent({
        template: `
          <div>
            <h2>About Page</h2>
            <p>This is a simple Vue SPA.</p>
            <pre>{{ data }}</pre>
          </div>`, data() {
            return {
                data: {name: "John", age: 30}
            }
        }
    });

    const MyTable = defineComponent({
        template: `
          <div>
            <table>
              <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
              </tr>
              </thead>
              <tr v-for="(item,idx) in data" data-idx="{{idx}}">
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>

              </tr>
            </table>
          </div>
        `,
        data() {
            return {
                data: [{name: "John", age: 30}]
            }
        }
    })

    createApp({
        components: {
            'my_json_forms': MyJsonForms,
            'my_pre': MyPre,
            'my_table': MyTable,
        },
        data() {
            return {
                currentView: 'home',
            };
        }
    }).mount('#app');
</script>
</body>
</html>

While the page renders OK in Pre & Table Tabs, the JSON Forms tab comes back empty,
Now JsonForms seems to have beer registered, because it I mess up with the schema (e.g. change “object” to Abject” )I get errors.

I am trying to get the new enhanced FileUpload component working in a Svelte 4 and my code looks as follows:

    import {onMount} from 'svelte';
    import { FileUpload } from 'govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs';
    import { createAll } from 'govuk-frontend/dist/govuk/init.mjs';


    onMount(() => {
        createAll( FileUpload);
    })

    // HTML here

However when I try this I get

ReferenceError: HTMLElement is not defined
at file:///myapp/node_modules/govuk-frontend/dist/govuk/component.mjs:57:25

Any ideas on how to get round this would be appreciated. I’d prefer not to run createAll/initAll for everything if it can be avoided.

Video

Hello, I’ve been trying to render this video on my site with a transparent background. After some research I managed to stumble upon this resource which let me get my desired effect using a canvas.

Using the B&W mask on the right side of the video, I can set the pixels I’d like to be transparent. Issue is my current method at times stutters or has low framerate. How would I go about optimizing this or taking a different approach entirely? I feel like having a second canvas just to draw then read the pixels seems inefficient.

Also to note, for whatever reason my rendered image seems to be squished compared to the original.

Here is my current code

const canvas = this.$refs.canvas.getContext("2d", { willReadFrequently: true })
const render = this.$refs.render.getContext("2d", { willReadFrequently: true })
const video = this.$refs.video

video.play()

function maskVideo() {
    canvas.drawImage(video, 0, 0, 3840, 1280)
    
    const frame = canvas.getImageData(0, 0, 1920, 1280)
    const frameData = frame.data

    for (var i = 0; i < frameData.length; i += 4) {
        const [r, g, b] = [frameData[i], frameData[i + 1], frameData[i + 2]]

        frameData[i + 3] = (r + g + b)
    }

    render.putImageData(frame, 0, 0)

    window.requestAnimationFrame(maskVideo)
}

window.requestAnimationFrame(maskVideo)

I’m working on a Vue.js project, and whenever I try to reload the page, it keeps reloading indefinitely without displaying any content. Additionally, starting the project takes an unusually long time (around 5 minutes).

I suspect it might be related to my Node.js or npm version, but I’m not sure. Here is my current setup:

• npm: 11.2.0
• Node.js: v22.12.0
• nvm: 1.2.2

This issue wasn’t present before, but I don’t remember what I changed that could have caused it.

I’ve tried the following but without success:

1. Clearing cache and reinstalling dependencies:

   rm -rf node_modules package-lock.json
   npm cache clean --force
   npm install
   

2. Checking for errors during startup:

   npm run serve -- --verbose
   

   or

   vue-cli-service serve
   

   No critical errors were displayed.

3. Checking for outdated dependencies:

   npm outdated
   npm update
   

4. Trying a different Node.js version
   Since I’m using Node.js v22, which is quite new, I downgraded to a more stable LTS version:

   nvm use 18
   rm -rf node_modules package-lock.json
   npm install
   

5. Checking for circular dependencies:

   npx madge --circular src
   

Despite these efforts, the issue persists.

Description:

When dynamically appending option elements to a dropdown using JavaScript, the options are not properly rendered in Chrome. This issue occurs even though the elements are successfully added to the DOM, and the styles width:920px are applied correctly to the select element.

The issue does not occur in Firefox, Safari, or on iOS.

Chrome Version:

Version 134.0.6998.89

Platform:

macOS 15.3.1

Screen resolution

1512 x 982

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Select option dynamic issue</title>
</head>

<body>
  <select style="width: 920px" id="test"></select>
  <button onclick="fillData()">Fill Options Data</button>
  <script>
    function fillData() {
      const selectEl = document.getElementById("test");
      if (selectEl) {
        selectEl.length = 0;
        for (let i = 0; i < 20; i++) {
          const optionEl = document.createElement("option");
          optionEl.innerText = i;
          selectEl.appendChild(optionEl);
        }
      }
    }
  </script>
</body>

</html>

I am unable to create media template, i am sending the request to the given url from doc /wabaId/message_templates with the request body as needed.

https://graph.facebook.com/v21.0/{wabaID}/message_templates

My Axios Request Config

  method: 'post',
  maxBodyLength: Infinity,
  url: 'https://graph.facebook.com/v21.0/{wabaID}/message_templates',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer {accessToken}'
  },
  data:{
  "name": "qwe",
  "language": "en_US",
  "category": "MARKETING",
  "components": [
    {
      "type": "HEADER",
      "format": "IMAGE",
      "example": {
        "header_handle": [ "4:MTc0MTg0NTY5NjgxMC1kb3dubG9hZF8xLmpwZw==:YXBwbGljYXRpb24vb2N0ZXQtc3RyZWFt:ARb0jzI58ebtPpiYzniZe9V1ad-KTXniKsPecBOMaNomkveFgCck0dYv8W9HsIOEfEBtuYxovCeiYPzym6f7JyFAy6z9zk5G8hi0xt97tNMKgw:e:1742534566:998952308807615:61572774039971:ARam4sOetrbq4P_uTig"
        ]
      }
    },
    {
      "type": "BODY",
      "text": "testing image"
    }
  ]
}

I am getting bad request error, its not creating template, not even from curl or postman

Whats wrong in my implementation ? I even tried from v22.0 api as well, still not working …

I have tried sending header_handle, media_handle, url, link and everything which i saw from internet, but still not working.

The current implemetation is based on the documentation provided by facebook. Please help implementing this..