I have wondered, whether there is an option to add a navigator bar like here https://www.highcharts.com/docs/stock/navigator, to a chart.js chart which is also using the streaming plugin.

It doesn’t have to be as advanced, but simply choosing in such a navigator bar the amount of time I am looking back would be really helpful.

Thanks for any Help.

I need to process the DOM children of a container element (to achieve some fancy layout magic) and leave non-rendered elements alone.

I was surprised to find that I can’t use an instanceof HTMLNoScriptElement check for <noscript> elements; which was my go-to solution for <style>, <script>, etc.

const shouldIgnoreElement = (element: Element) =>
  element instanceof HTMLStyleElement ||
  element instanceof HTMLScriptElement ||
  element instanceof HTMLDialogElement ||
  element instanceof HTMLTemplateElement ||
  element.tagName === 'NOSCRIPT'

const shouldProcessElement = (element: Element) => !shouldIgnoreElement(element)

[...root.children].filter(shouldProcessElement).forEach(...)

As you can see I ended up using element.tagName === 'NOSCRIPT' for the check. But I still want to get a deeper understanding of this curious situation. And wonder whether I did something wrong or harbor a misunderstanding.

My research on mdn turned up:

• the technical summary for <script> elements states their DOM interface is HTMLScriptElement
• the technical summary for <noscript> elements states their DOM interface is HTMLElement
• the Web API overview does not list any HTMLNoScriptElement

So it seems there simply is no class to represent <noscript> elements.

Why is there no corresponding class?

Is noscript the only HTML element type with this curious gap in the Web API?

async createVideoJob(
    movieId: string,
    mainVideoPath: string,  // HLS Video Input
    audioPaths: any[] = [],
    subtitlePaths: any[] = [],
    outputFileName: string,
    resolution: any
  ): Promise<string> {
    // Verify main video file exists.
    const videoExists = await this.checkFileExists(awsDetail.bucket, mainVideoPath);
    if (!videoExists) throw new Error(`Main video file does not exist: ${mainVideoPath}`);
  
    // Verify audio files.
    for (const audioPath of audioPaths) {
      const audioExists = await this.checkFileExists(awsDetail.bucket, audioPath.file);
      if (!audioExists) throw new Error(`Audio file does not exist: ${audioPath.file}`);
    }
  
    // Verify caption files.
    for (const subtitlePath of subtitlePaths) {
      const captionExists = await this.checkFileExists(awsDetail.bucket, subtitlePath.file);
      if (!captionExists) throw new Error(`Caption file does not exist: ${subtitlePath.file}`);
    }
  
    const outputBasePath = `MOVIEZU/PROCESSED/${outputFileName}`;
    const hlsDestination = `s3://${awsDetail.bucket}/${outputBasePath}/HLS/`;
  
    const { width, height } = resolution;
    const aspectRatio = width / height;
    const presets = [
      { height: 2160, name: "4K", bitrate: 12000000 },
      { height: 1440, name: "2K", bitrate: 8000000 },
      { height: 1080, name: "1080p", bitrate: 6000000 },
      { height: 720, name: "720p", bitrate: 4000000 },
      { height: 480, name: "480p", bitrate: 2500000 },
      { height: 360, name: "360p", bitrate: 1500000 },
      { height: 240, name: "240p", bitrate: 1000000 },
      { height: 144, name: "144p", bitrate: 500000 },
    ].filter(preset => preset.height <= height);
    const resolutions = presets.map(preset => {
      let computedWidth = Math.floor(preset.height * aspectRatio);
      if (computedWidth % 2 !== 0) computedWidth--;
      return { width: computedWidth, height: preset.height, name: preset.name, bitrate: preset.bitrate };
    });
  
    // ---- Audio Setup ----
    const audioSelectors: Record<string, any> = {
      "Audio Selector 1": { DefaultSelection: "DEFAULT" },
    };
    const hlsAudioDescriptions: any[] = [
      {
        AudioSourceName: "Audio Selector 1",
        CodecSettings: {
          Codec: "AAC",
          AacSettings: { Bitrate: 96000, CodingMode: "CODING_MODE_2_0", SampleRate: 48000 },
        },
        StreamName: "Original Audio",
        AudioGroupId: "program_audio",
        LanguageCode: "ENG",
      },
    ];
    let audioInputIndex = 2;
    for (const audioPath of audioPaths) {
      const selectorName = `Audio Selector ${audioInputIndex}`;
      audioSelectors[selectorName] = {
        ExternalAudioFileInput: `s3://${awsDetail.bucket}/${audioPath.file}`,
      };
      hlsAudioDescriptions.push({
        AudioSourceName: selectorName,
        CodecSettings: {
          Codec: "AAC",
          AacSettings: { Bitrate: 96000, CodingMode: "CODING_MODE_2_0", SampleRate: 48000 },
        },
        StreamName: audioPath.name || `Audio ${audioInputIndex}`,
        AudioGroupId: "program_audio",
        LanguageCode: audioPath.language || "ENG",
      });
      audioInputIndex++;
    }
  
    // ---- Video Outputs with Embedded Captions ----
    // Each output rendition includes a CaptionDescription referencing a CaptionSelector defined in Inputs.
    const videoOutputs = resolutions.map(res => ({
      VideoDescription: {
        Width: res.width,
        Height: res.height,
        CodecSettings: {
          Codec: "H_264",
          H264Settings: {
            RateControlMode: "QVBR",
            QualityTuningLevel: "SINGLE_PASS_HQ",
            QvbrSettings: { QvbrQualityLevel: 7 },
            MaxBitrate: res.bitrate,
          },
        },
      },
      AudioDescriptions: hlsAudioDescriptions,
      CaptionDescriptions: subtitlePaths.length
        ? subtitlePaths.map((subtitle, idx) => ({
            // Must match the CaptionSelector name defined in Inputs.
            CaptionSelectorName: `Caption Selector ${idx + 1}`,
            DestinationSettings: {
              // Use EMBEDDED so that captions appear as selectable tracks.
              DestinationType: "EMBEDDED"
            },
            LanguageCode: subtitle.language || "ENG",
            LanguageDescription: subtitle.name || "English",
          }))
        : undefined,
      ContainerSettings: { Container: "M3U8" },
      NameModifier: `/${res.name}`,
    }));
  
    // ---- Job Settings ----
    // Include CaptionSelectors in Inputs so that embedded captions can be processed.
    const jobSettings: JobSettings | any = {
      Inputs: [
        {
          FileInput: `s3://${awsDetail.bucket}/${mainVideoPath}`,
          AudioSelectors: audioSelectors,
          CaptionSelectors: subtitlePaths.length
            ? Object.fromEntries(
                subtitlePaths.map((subtitle, idx) => [
                  `Caption Selector ${idx + 1}`,
                  {
                    // For selectable (embedded) captions, use a supported SourceType (EIA608).
                    SourceSettings: {
                      SourceType: "EIA608",
                      FileSourceSettings: {
                        SourceFile: `s3://${awsDetail.bucket}/${subtitle.file}`,
                      },
                    },
                  },
                ])
              )
            : {},
        },
      ],
      OutputGroups: [
        {
          Name: "HLS Output Group",
          OutputGroupSettings: {
            Type: "HLS_GROUP_SETTINGS",
            HlsGroupSettings: {
              Destination: hlsDestination,
              SegmentLength: 6,
              MinSegmentLength: 6,
              OutputSelection: "MANIFESTS_AND_SEGMENTS",
              AudioGroupId: "program_audio",
              AudioRenditionSets: "program_audio",
              // Enable insertion of closed-caption manifest tags.
              CaptionLanguageSetting: "INSERT",
              // Provide caption language mappings for each caption selector.
              CaptionLanguageMappings: subtitlePaths.length
                ? subtitlePaths.map((subtitle, idx) => ({
                    CaptionSelectorName: `Caption Selector ${idx + 1}`,
                    CustomLanguageCode: subtitle.language || "ENG",
                    LanguageDescription: subtitle.name || "English"
                  }))
                : [],
            } as any,
          },
          Outputs: videoOutputs,
        } as any,
      ],
      TimecodeConfig: { Source: "ZEROBASED" },
    };
  
    const command = new CreateJobCommand({
      Role: awsDetail.mediaConvertRoleArn,
      Settings: jobSettings,
      AccelerationSettings: { Mode: "DISABLED" },
      StatusUpdateInterval: "SECONDS_60",
    });
  
    const movieName = mainVideoPath.split("/").pop()?.replace(/.w+$/, "") || "movie";
    const path = `${outputBasePath}/HLS/${movieName}.m3u8`;
  
    try {
      const data = await this.mediaConvertClient.send(command);
      await MovieZu.findOneAndUpdate(
        { _id: movieId },
        { jobId: data.Job.Id, processedVideoUrl: path },
        { new: true }
      );
      return `${outputBasePath}/`;
    } catch (error) {
      console.error("MediaConvertService error:", error);
      throw new Error("Failed to create video job");
    }
  }

audio and subtitle track are missing on master.m3u8, only HLS video quality track.
Track missing

m3u8 response data

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-STREAM-INF:BANDWIDTH=6908373,AVERAGE-BANDWIDTH=2249342,CODECS="avc1.640028",RESOLUTION=1920x1080,FRAME-RATE=24.000
Fateh.2025.1080p.JHS.WEB.DL.Hindi.DDPA5.1.ESub.x264-Vegamovies.is/1080p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=4868448,AVERAGE-BANDWIDTH=1105432,CODECS="avc1.64001f",RESOLUTION=1280x720,FRAME-RATE=24.000
Fateh.2025.1080p.JHS.WEB.DL.Hindi.DDPA5.1.ESub.x264-Vegamovies.is/720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3016272,AVERAGE-BANDWIDTH=665885,CODECS="avc1.64001e",RESOLUTION=852x480,FRAME-RATE=24.000
Fateh.2025.1080p.JHS.WEB.DL.Hindi.DDPA5.1.ESub.x264-Vegamovies.is/480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1825354,AVERAGE-BANDWIDTH=415826,CODECS="avc1.64001e",RESOLUTION=640x360,FRAME-RATE=24.000
Fateh.2025.1080p.JHS.WEB.DL.Hindi.DDPA5.1.ESub.x264-Vegamovies.is/360p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1116720,AVERAGE-BANDWIDTH=254112,CODECS="avc1.640015",RESOLUTION=426x240,FRAME-RATE=24.000
Fateh.2025.1080p.JHS.WEB.DL.Hindi.DDPA5.1.ESub.x264-Vegamovies.is/240p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=506848,AVERAGE-BANDWIDTH=130283,CODECS="avc1.64000c",RESOLUTION=256x144,FRAME-RATE=24.000
Fateh.2025.1080p.JHS.WEB.DL.Hindi.DDPA5.1.ESub.x264-Vegamovies.is/144p.m3u8

When working with AWS Elemental MediaConvert to transcode media files using Node.js, a common issue developers face is that audio tracks or subtitle tracks are missing in the output files. This note aims to explain why this happens and how to properly configure your Node.js MediaConvert job to include audio and subtitle tracks.

While trying to run the application locally, browser is not able to load bundle.js

This is the setup to load up bundle.js inside index.html

<script type="text/javascript" src="/static/js/bundle.js"></script>

But when hitting directly to this request URL: http://localhost:3000/static/js/bundle.js, bundled js code is visible

If webpack failed to generate the bundle.js file then this should also fail I assume. I can also see this assets report

Below is my output config inside webpack.config

 output: {
    pathinfo: true,
    filename: 'static/js/bundle.js',
    chunkFilename: 'static/js/[name].chunk.js',
    publicPath: "/",
    devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\/g, '/'),
  },

This is how I server static files using Express

  app.use(favicon(path.join(__dirname, '../build', 'favicon.ico')));
  app.use('/static', express.static(path.join(__dirname, '../build/static/'), { maxAge: '30d' }));

My build folder structure is:

-build
--static
---css
----main.123sf.css
---js
----main.123124.js
----main.123124.js.LICENSE.txt
---media
----mygif.gif
--favicon.ico
--index.html
--login.html

When in development mode, I believe if everything goes well bundle.js can be located at below structure inside Sources.

-top
--localhost:3000
---static/js
----bundle.js

this are the package versions I am using currently using

"express": "^4.21.2",
"webpack": "^5.96.1",
"webpack-dev-server": "^4.15.2",

what am I doing wrong here? Any help is appreciated, thanks in advance.

I am using the Ivory Search plugin on my WordPress site, and I would like to implement a “slide search” feature.

Currently, the whole search form is showing (search bar and search icon). I want the search icon to be visible only at first. When the user clicks the search icon, I want the search bar to appear by sliding out to the left (as the search icon is placed to the right). I also want to make sure that when the user first clicks the search icon, it shows the search bar and doesn’t toggle the search functionality (I want it to search a term on second click).

I haven’t written any custom code yet, but I am open to using JavaScript, CSS, or PHP if necessary. Could someone guide me on how to achieve this?

<div class="ast-search-menu-icon slide-search">
        <form class="is-search-form is-form-style is-form-style-3 is-form-id-9231 " action="https://embroidla.com/" method="get" role="search"><label for="is-search-input-9231"><span class="is-screen-reader-text">Search for:</span><input type="search" id="is-search-input-9231" name="s" value="" class="is-search-input" placeholder="Search..." autocomplete="off"></label><button type="submit" class="is-search-submit"><span class="is-screen-reader-text">Search Button</span><span class="is-search-icon"><svg focusable="false" aria-label="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></span></button></form>         <div class="ast-search-icon">
                <a class="slide-search astra-search-icon" aria-label="Search icon link" href="#">
                    <span class="screen-reader-text">Search</span>
                    <span class="ast-icon icon-search"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="-893 477 142 142" enable-background="new -888 480 142 142" xml:space="preserve">
                          <path d="M-787.4,568.7h-6.3l-2.4-2.4c7.9-8.7,12.6-20.5,12.6-33.1c0-28.4-22.9-51.3-51.3-51.3  c-28.4,0-51.3,22.9-51.3,51.3c0,28.4,22.9,51.3,51.3,51.3c12.6,0,24.4-4.7,33.1-12.6l2.4,2.4v6.3l39.4,39.4l11.8-11.8L-787.4,568.7  L-787.4,568.7z M-834.7,568.7c-19.7,0-35.5-15.8-35.5-35.5c0-19.7,15.8-35.5,35.5-35.5c19.7,0,35.5,15.8,35.5,35.5  C-799.3,553-815,568.7-834.7,568.7L-834.7,568.7z"></path>
                          </svg></span>             </a>
            </div>
        </div>

I have built an npm package using Rollup, but after publishing and installing it in another project, I get the following error when running the project:

TypeError: Unable to determine current node version

My Rollup Configuration:
Here is my rollup.config.js:

import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import url from "@rollup/plugin-url";
import svgr from "@svgr/rollup";
import jsx from "acorn-jsx";
import dts from "rollup-plugin-dts";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import { terser } from "rollup-plugin-terser";
import { visualizer } from "rollup-plugin-visualizer";

const packageJson = require("./package.json");

export default [
  {
    input: packageJson.source,
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        exports: "named",
        inlineDynamicImports: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        inlineDynamicImports: true,
      },
    ],
    acornInjectPlugins: [jsx()],
    plugins: [
      peerDepsExternal(),
      json(),
      url({
        include: ["**/*.svg", "**/*.png"],
        limit: 8192,
        emitFiles: true,
        fileName: "[dirname][hash][extname]",
      }),
      svgr(),
      resolve({
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        mainFields: ["module", "main"],
        preferBuiltins: false,
        browser: true,
      }),
      babel({
        exclude: "node_modules/**",
        babelHelpers: "runtime",
        extensions: [".js", ".ts", ".jsx", ".tsx"],
        presets: ["@babel/preset-react", "@babel/preset-typescript"],
        plugins: ["@babel/plugin-transform-runtime"],
      }),
      commonjs({
        include: "node_modules/**",
        exclude: [
          "node_modules/process-es6/**",
          "node_modules/@mui/**",
          "node_modules/three/**",
        ],
      }),
      typescript({
        tsconfig: "./tsconfig.json",
        exclude: ["**/*.stories.tsx", "**/*.test.tsx"],
      }),
      postcss({
        extract: true,
        minimize: true,
        modules: true,
        plugins: [require("cssnano")], // Add CSS minification
      }),
      terser({
        format: {
          comments: false,
        },
        compress: {
          drop_console: true,
          ecma: 2015,
        },
      }),
      visualizer({
        filename: "bundle-analysis.html",
        open: true,
      }),
    ],
    external: [
      /^react($|/)/,
      /^react-dom($|/)/,
      /^three($|/)/,
      /^@mui/.*/,
      /^@react-three/.*/,
      "axios",
      "jszip",
      "i18next",
      "react-i18next",
      "lucide-react",
      "moment",
      "process",
    ],
  },
  {
    input: "build/types/index.d.ts",
    output: [{ file: "build/index.d.ts", format: "esm" }],
    plugins: [dts.default()],
    external: [/.css$/, /.scss$/],
  },
];

Package.json
My package.json includes:

{
  "name": "@solarhub-3d-viewer",
  "version": "0.0.10",
  "main": "build/index.js",
  "module": "build/index.es.js",
  "types": "dist/index.d.ts",
  "source": "index.ts",
  "dependencies": {
    "@babel/preset-flow": "^7.25.9",
    "@cometchat-pro/chat": "^3.0.6",
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.5.1",
    "@mui/material": "^5.14.17",
    "@mui/styles": "^5.5.3",
    "@mui/types": "^7.1.3",
    "@react-google-maps/api": "^2.19.2",
    "@react-oauth/google": "^0.10.0",
    "@react-pdf/renderer": "^3.4.4",
    "@react-three/drei": "^9.109.5",
    "@react-three/fiber": "^8.17.5",
    "@rollup/plugin-babel": "^6.0.4",
    "@sentry/react": "^7.27.0",
    "@sentry/tracing": "^7.27.0",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.24.0",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@turf/turf": "^6.5.0",
    "@types/antd": "^1.0.0",
    "@types/axios": "^0.14.0",
    "@types/jest": "^27.4.1",
    "@types/mapbox__mapbox-gl-geocoder": "^4.7.2",
    "@types/mixpanel-browser": "^2.38.0",
    "@types/node": "^16.11.26",
    "@types/react-dom": "^17.0.13",
    "@types/react-dropzone": "^5.1.0",
    "@types/react-share": "^4.0.0",
    "@types/styled-components": "^5.1.24",
    "@types/uuid": "^8.3.4",
    "antd": "^4.19.2",
    "apexcharts": "^3.36.0",
    "axios": "^0.26.1",
    "buffer": "^6.0.3",
    "chart.js": "^3.9.1",
    "dateformat": "^4.6.3",
    "earcut": "^2.2.4",
    "emoji-mart": "^3.0.1",
    "env-cmd": "^10.1.0",
    "firebase": "^8.4.2",
    "firebase-admin": "^10.0.0",
    "geofire-common": "^5.2.0",
    "geotiff": "^2.1.3",
    "geotiff-geokeys-to-proj4": "^2024.4.13",
    "html-react-parser": "^1.4.5",
    "html-to-image": "^1.11.11",
    "html2canvas": "^1.4.1",
    "http": "0.0.1-security",
    "https": "^1.0.0",
    "https-browserify": "^1.0.0",
    "i": "^0.3.7",
    "i18next": "^21.8.16",
    "install": "^0.13.0",
    "jodit-react": "^4.1.2",
    "jszip": "^3.10.1",
    "jwt-decode": "^4.0.0",
    "load-bmfont": "^1.4.1",
    "lodash": "^4.17.21",
    "lucide-react": "^0.469.0",
    "mapbox-gl": "^2.7.1",
    "mixpanel-browser": "^2.45.0",
    "ndarray": "^1.0.19",
    "ndarray-gemm": "^1.0.0",
    "npm": "^8.7.0",
    "pdf-lib": "^1.17.1",
    "plotty": "^0.4.9",
    "proj4": "^2.11.0",
    "prop-types": "^15.8.1",
    "querystring": "^0.2.1",
    "react": "^18.3.1",
    "react-3d-viewer": "^1.0.12",
    "react-apexcharts": "^1.4.0",
    "react-app-rewired": "^2.2.1",
    "react-calendly": "^2.2.2",
    "react-chartjs-2": "^4.3.1",
    "react-colorful": "^5.6.1",
    "react-dom": "^18.3.1",
    "react-draggable": "^4.4.6",
    "react-dropzone": "^14.2.2",
    "react-full-screen": "^1.1.1",
    "react-html-parser": "^2.0.2",
    "react-i18next": "^11.18.6",
    "react-image-gallery": "^1.2.7",
    "react-map-gl": "^6.1.16",
    "react-map-gl-geocoder": "^2.1.7",
    "react-mapbox-gl-geocoder": "^1.1.0",
    "react-multi-date-picker": "^3.3.0",
    "react-pdf": "^9.1.0",
    "react-query": "^3.34.16",
    "react-quick-pinch-zoom": "^4.9.0",
    "react-redux": "^7.2.6",
    "react-router": "^6.18.0",
    "react-router-dom": "^6.2.2",
    "react-scripts": "^5.0.0",
    "react-share": "^4.4.0",
    "react-signature-canvas": "^1.0.6",
    "react-slick": "^0.28.1",
    "react-spinners": "^0.11.0",
    "react-timezone-select": "^1.2.0",
    "react-to-print": "^2.15.1",
    "react-toastify": "^8.2.0",
    "redux": "^4.1.2",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.4.1",
    "reselect": "^4.1.8",
    "rollup-plugin-copy": "^3.5.0",
    "rollup-plugin-dts": "^6.1.1",
    "slick-carousel": "^1.8.1",
    "stream-http": "^3.2.0",
    "suncalc": "^1.9.0",
    "swiper": "^6.8.4",
    "three": "^0.167.1",
    "three-bmfont-text": "^3.0.1",
    "twemoji": "^13.1.0",
    "url": "^0.11.0",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "env-cmd -f .env.stage react-app-rewired start",
    "prebuild": "tsc --noEmit",
    "build": "env-cmd -f .env.stage react-app-rewired build",
    "deploy": "firebase deploy --only hosting:solarhub-redesign",
    "start:prod": "env-cmd -f .env.prod react-app-rewired start",
    "prebuild:prod": "tsc --noEmit",
    "build:prod": "env-cmd -f .env.prod react-app-rewired build",
    "predeploy:prod": "npm run build:prod",
    "deploy:prod": "firebase deploy --only hosting:solarhub-44450",
    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
    "rollup": "rollup -c --bundleConfigAsCjs"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.26.9",
    "@babel/preset-react": "^7.26.3",
    "@babel/runtime": "^7.26.9",
    "@rollup/plugin-commonjs": "^28.0.2",
    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^16.0.0",
    "@rollup/plugin-typescript": "^12.1.2",
    "@rollup/plugin-url": "^8.0.2",
    "@svgr/rollup": "^8.1.0",
    "@types/earcut": "^2.1.4",
    "@types/lodash": "^4.14.182",
    "@types/mapbox-gl": "^2.6.3",
    "@types/ndarray": "^1.0.11",
    "@types/proj4": "^2.5.5",
    "@types/react": "^17.0.19",
    "@types/react-html-parser": "^2.0.2",
    "@types/react-signature-canvas": "^1.0.5",
    "@types/react-slick": "^0.23.8",
    "@types/suncalc": "^1.9.2",
    "@types/three": "^0.158.3",
    "@typescript-eslint/eslint-plugin": "^5.47.1",
    "ajv": "^7.2.4",
    "autoprefixer": "^10.4.2",
    "cssnano": "^7.0.6",
    "eslint": "^8.31.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^24.0.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-typescript": "^3.5.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.6.0",
    "eslint-plugin-only-warn": "^1.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "i18next-scanner": "^4.3.0",
    "postcss": "^8.4.8",
    "prettier": "^2.8.1",
    "process": "^0.11.10",
    "readline-sync": "^1.4.10",
    "rollup": "^4.34.9",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-visualizer": "^5.14.0",
    "styled-components": "^5.3.3",
    "tailwindcss": "^3.0.23",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.2"
  }
}

My config.overrides.js:

const webpack = require("webpack");

module.exports = function override(config, env) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    buffer: require.resolve("buffer"),
    assert: require.resolve("assert/"),
    tty: require.resolve("tty-browserify"),
    util: require.resolve("util/"),
    os: require.resolve("os-browserify/browser"),
    path: require.resolve("path-browserify"),
    "process": require.resolve("process/browser"),
    fs: false, // fs is not available in browsers
    module: false, // module should not be included
  };
  config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"];
  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ];
  config.module.rules.push({
    test: /.(js|mjs|jsx)$/,
    enforce: "pre",
    loader: require.resolve("source-map-loader"),
    resolve: {
      fullySpecified: false,
    },
  });

  return config;
};

What I Have Tried:

• Ensured the package.json correctly specifies source, main, and
  module.
• Checked if babelHelpers: “runtime” is correctly configured.
• Added preferBuiltins: false in @rollup/plugin-node-resolve.
• Verified that external dependencies are properly marked in external.

Additional Info:

• Node.js Version: v16.14.0
• Project Type: React + TypeScript
• Error Appears When: Running the installed package inside another project

Question:

What could be causing this error, and how can I fix it? Any help would be greatly appreciated! Let me know if you have any questions!

I have an XYChart developed with amCharts4 in Javascript. I have a DateAxis on the x-axis and a ValueAxis on the y-axis. To control the visible data range, I use a DateAxisRangeSelector and an XYChartScrollbar. When I select two dates, my chart displays data from the first date at 00:00:00 to the second date at 00:00:00. As a result, I can’t see the data corresponding to the last date.

Is there any way of stretching the visible data range to see the last date, without modifying the dates in the selector?

I’m using Cypress Studio to generate test scripts, and I noticed an issue with how it selects elements. Consider the following line generated by Cypress Studio:

cy.get('[data-cy="kam.customer.basic-details.customer-name-input"] input').clear().type('test_1');

The problem is that there are multiple elements matching this selector, but Cypress Studio does not add any indexing. So, when I run the test again, it sometimes fails because it selects the wrong element (or multiple elements).

For example, if I manually add indexing like this:

`cy.get('[data-cy="kam.customer.basic-details.customer-name-input"]').find('input').eq(0).clear().type('test_1');

It works, but I want to know:
Why doesn’t Cypress Studio automatically handle multiple matching elements?
Is there a way to configure Cypress Studio to generate more reliable selectors?
What are the best practices to avoid this issue when using Cypress Studio for test recording?

I am using the sample code from Azure to trying the JS SDK of the Azure Communication Service. Now I am trying to initiate an outgoing call. But the API needs the ACS ID for the outgoing call and I am unable to find this ID.

I have already created a resource in azure portal and got the Connection String. A user token with VOIP is also generated. The SDK initialisation has worked with the connection string. But I could only initiate a voice call to the azure echo bot using 8:echo123 successfully.

I have created a Sankey diagram from Highcharts.

I want to hide all the nodes which start from a particular node when i double click it.

So far, i am able to remove the path from clicked node to target node, but could not remove target node itself.

Here is the example, if you double click on “Shopping” node ( and remove the mouse from the chart ) it hides the path, but i want to remove both “Online” and “Offline” node also.

Highcharts.chart("container", {
  title: {
    text: "Cash flow"
  },
  chart: {
    events: {
      load: function() {
        let chart = this;

        chart.series[0].points.forEach((point) => {
          point.graphic.element.addEventListener("dblclick", function() {
            point.toNode.linksFrom.forEach((node) => {
              node.update({color: 'transparent', weight: 0 }, false);
            });
          });
        });
      }
    }
  },

  accessibility: {
    point: {
      valueDescriptionFormat: "{index}. {point.from} to {point.to}, " + "{point.weight}."
    }
  },
  tooltip: {
    headerFormat: null,
    pointFormat: "{point.fromNode.name} u2192 {point.toNode.name}: {point.weight:.2f} ",
    nodeFormat: "{point.name}: {point.sum:.2f}"
  },
  series: [{
    keys: ["from", "to", "weight"],
    data: [
      ["Salary", "Income", 5],
      ["Dividend", "Income", 2],
      ["Bonus", "Income", 3],

      ["Income", "Tax", 1],
      ["Income", "Shopping", 3],
      ["Income", "Invest", 6],

      ["Shopping", "Online", 1],
      ["Shopping", "Offline", 2]
    ],
    type: "sankey",
    name: "Sankey demo series"
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

I get this error

Yarn - There appears to be trouble with your network connection. Retrying

and then timeout as error An unexpected error occurred: 'https://registry.yarnpkg.com/<package name>.tgz: ESOCKETTIMEDOUT’.

I have tried adding network timeout via yarn install --network-timeout 240000 , still same issue

if have any suggestions for this then please let me know. Thankyou

Problem Description

I’m having an issue with the new Google Autocomplete API not returning street addresses as in earlier versions:

• Previous Behavior: The API accepted a type: [“address”] parameter
  which returned only full addresses
• Current Behavior: When I type “V”,
  I get countries like “Vietnam” instead of street addresses starting
  with “V”
• Desired Outcome: I want to list only full street addresses
  to users

What I’ve Tried

Looking at Google’s documentation, there’s a property called includedPrimaryTypes which accepts values like “street_address” or “street_number”, but this doesn’t seem to be working correctly it returns only specific street addresses not all that Google offers.

My Current Code

     const { AutocompleteSuggestion } = await google.maps.importLibrary("places");

     const { suggestions: fetchedSuggestions } = await AutocompleteSuggestion.fetchAutocompleteSuggestions({
          input,
          sessionToken: token.value,
          // includedPrimaryTypes: ["street_address", "street_number", "premise"],
        });
    
    suggestions.value = await Promise.all(
      fetchedSuggestions.map(
        async (suggestion: google.maps.places.AutocompleteSuggestion) => {
          const place = suggestion.placePrediction.toPlace();
    
          await place.fetchFields({
            fields: ["formattedAddress"],
          });
    
          return {
            placePrediction: suggestion.placePrediction,
            formattedAddress: place.formattedAddress,
          };
        },
      ),
    );

1. How can I filter results to only include street addresses?
2. Is there a replacement for the previous type: [“address”] parameter?
3. What’s the correct way to use includedPrimaryTypes if that’s the right approach?