Category: javascript

I am making an app right now and added react-modal to display information for the user and I’m just trying to initiate the modal for the first time before I put data in it and it gives me the same error only.

“Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.”

import React, { useState } from 'react';
import ReactModal from 'react-modal';

export default function TestingReactModal(){
   
   const [modalIsOpen, setIsOpen] = useState(false);

   function openModal() { setIsOpen(true) }

   function closeModal() { setIsOpen(false) }

   return(
        <>
            <button onClick={openModal}>Open Modal</button>
            <ReactModal
                isOpen={modalIsOpen}
                onRequestClose={closeModal}
            >
                 <h1>Modal Title</h1>
                 <button onClick={closeModal} >close</button>

                 <p>random info here</p>
            </ReactModal>
        </>
   )
}

I made the above code in a separate component and the code still returns the same error when I import this hook hoping it would work.

I am using JavaScript’s Fetch API like so:
fetch(URL)

My browser (Chrome) seems to automatically add If-None-Match and If-Modified-Since headers to the request. Although these headers should trigger preflight requests according to the fetch spec (I think), no preflight requests are being sent. Is this expected when the browser automatically adds such headers rather than me adding it to the fetch function?

I noticed that, when I add If-None-Match and If-Modified-Since headers manually to the fetch function, the browser sends a preflight request:

fetch(cdnUrl, {
  "headers": {
    "If-None-Match": "blah"
  }
})

Is there a way to force a consumer to use an entire iterator?

For example:

const [first] = tuple // throws "Need to use both"
const [first, second] = tuple // works

I was hoping something like:

*[Symbol.iterator]() {
    const tuple = this.error
      ? ([null, this.error] as const)
      : ([this.value, null] as const);

    yield tuple[0];

    return {
      done: true,
      value: (() => {
        throw new Error("Must destructure both values from tuple");
      })(),
    };
  }

Would work, but doesn’t. Is this even possible? I can’t really think of a solid way but would love some help from the big brains.

I’m trying to make a POST request to my ASP.NET Core endpoint using JavaScript. My request is structured as follows:

fetch("https://localhost:44500/api/test", {
    method: 'POST',
    headers: {
        "Authorization": `Bearer ${token}`,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        param1: 'first sample value',
        param2: 'second sample value'
    })
}).then(response => {
    if (!response.ok) {
        throw new Error(`Request failed with status ${response.status}`);
    }

    return response.json();
}).then(result => {
    console.log('Request succeeded!');
}).catch(error => {
    console.error('Failed to send the request.', error);
});

On the server side, I have registered the following route:

app.MapPost("api/test", HandleAsync)
    .DisableAntiforgery()
    .RequireCors("AllowAll")
    .RequireAuthorization(new AuthorizeAttribute { AuthenticationSchemes = "Api" });

Additionally, my CORS configuration is as follows:

services.AddCors(options =>
{
    options.AddPolicy("AllowAll", builder =>
    {
        builder
            .AllowAnyMethod()
            .AllowAnyOrigin()
            .AllowAnyHeader();
    });
});

When testing my server setup, I can successfully make a POST request using Postman.

Furthermore, my JavaScript request works perfectly in Firefox, but when I attempt to run the same code in Google Chrome, it fails. Inspecting the Network tab in Chrome’s DevTools, I see that the preflight OPTIONS request fails with a 404 error.

I’ve confirmed that the URL used in the JavaScript request is identical to the one in Postman (which should be the case, as the request works in Firefox).

To troubleshoot, I modified my server code as follows:

app.MapMethods("api/test", ["OPTIONS", "POST"], HandleAsync)
    .DisableAntiforgery()
    .RequireCors("AllowAll")
    .RequireAuthorization(new AuthorizeAttribute { AuthenticationSchemes = "Api" });

With this change, I can now successfully make an OPTIONS request using Postman. However, the issue in Chrome persists.

Here is the error I get in the console when the request is made:

Access to fetch at ‘https://localhost:44500/api/test’ from origin ‘https://www.example.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

What could be causing this issue, and how can I resolve it?

Been designing my own version (running on localhost) of a Youtube playlist randomizer and stumbled over the problem, that copyright striked videos are not embeddable => Only shows: Video not available.

Other sites like Reddit and https://youtube-playlist-randomizer.bitbucket.io/ somehow manage to work around that problem, being able to display every video.

How?
Do they have youtube’s permission and authenticate themselves, while my localhost running site does not have the permission? Been looking at the code of the linked site above but found nothing unusual.

I have string literals in javascript code and they have attributes whose values ​​are methods, for example:

const test = `<div data-click="foo">test<div>`;

function foo() {}

And I’m trying to make “foo” highlighted separately, not just as a string, and so that you can use ctrl+b to go to the method:

I’m trying to use Language injection what am I doing wrong?

I’m optimizing my landing page for better performance. I’ve already fixed the Critical Rendering Path (CRP), but the page still renders slowly.

I’m using these libraries via CDN:

jQuery

Bootstrap

Swiper.js

Popper.js

I suspect unused CSS/JS is affecting performance. What’s the best way to:

Identify and remove unused CSS/JS while using CDNs?

Load only necessary Bootstrap components?

Improve performance without switching to a bundler?

Any recommendations or tools to help with this? Thanks!

I have written a Websocket client that works exactly as expected when you load the application in a browser however when loading the same application through a window.open(...) it errors and says Websocket is not defined:

const websocket = new Websocket('{WebsocketAddress}');

Update:
I now am using

const websocket = new window.opener.Websocket('{WebsocketAddress}');

Which fixes the Websocket is not defined error but now the error is “Websocket is not a constructor”. Which is not better.

Update:

I can make one in the console but not in the code?

I have a service worker on a website:

When user clicks a link on the page (referencing a document on the same host), a script sends a message to the service worker, containing the content of a few elements in the page.

Service worker saves these, intercepts the navigation request, finds these elements in the HTML in response, replaces their content with old content saved from the previous page and returns the modified response.

This is done because the page content is cached as static; and dynamic content in these elements is loaded asynchronously after page load. We want to avoid drawing the elements first with the static content and then redrawing after fetching dynamic content, so we replace it in the intercepted request.

This mostly works on desktop. There is no visible change of content of the dynamic elements.

On mobile (Chrome Android, Chrome iOS), at first glance it seems like it does not work at all. My first guess was the service worker is not running.
But after using USB debugging to inspect the page, I see correct log messages from the service worker in the Console and in Network log I can see both the fetch request made by the service worker containing unaltered HTML and the document request made by the page, content already modified by the service worker.

So according to the Dev tools, the service worker is working perfectly. But that’s not what you see when interacting with the browser.

How can it be that the page loads modified HTML via the service worker, but displays the unmodified version?

I have the sample test case that I am working with…

[
  {
    "thumbsup": [
      {
        "feedback": "thumbsup",
        "feedbackMessage": "It was easy to make a payment",
        "feedbackAllFlows": [
          "map"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "Fast and simple.",
        "feedbackAllFlows": [
          "map"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "Very fast",
        "feedbackAllFlows": [
          "sales",
          "cases"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "Very easy to use.",
        "feedbackAllFlows": [
          "off shore"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "Great help. Once I asked tge correct question",
        "feedbackAllFlows": [
          "off shore",
          "disconnect",
          "thanks"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "Very quick",
        "feedbackAllFlows": [
          "pay later"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "improve the billing and help better understanding the bill cycle",
        "feedbackAllFlows": [
          "pay later",
          "high"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "Everything was simple and easy. Quick responses made the process a lot faster.",
        "feedbackAllFlows": [
          "activate"
        ]
      },
      {
        "feedback": "thumbsup",
        "feedbackMessage": "Very helpful",
        "feedbackAllFlows": [
          "pay later"
        ]
      }
    ]
  }
]

I want to break this up into their own arrays for the comments from the feedbackAllFlows array…

I would love the output to be like this…

[
  {
    "thumbsup": [
      {
        "map": [
          "It was easy to make a payment",
          "Fast and simple."
        ]
      },
      {
        "sale": [
          "Very fast"
        ]
      },
      {
        "cases": [
          "Very fast"
        ]
      },
      {
        "off shore": [
          "Very easy to use.",
          "Great help. Once I asked tge correct question"
        ]
      },
      {
        "disconnect": [
          "Great help. Once I asked tge correct question"
        ]
      },
      {
        "thanks": [
          "Great help. Once I asked tge correct question"
        ]
      },
      {
        "pay later": [
          "Very quick",
          "improve the billing and help better understanding the bill cycle",
          "Very helpful"
        ]
      },
      {
        "high": [
          "improve the billing and help better understanding the bill cycle"
        ]
      },
      {
        "equipment_activate_device": [
          "Everything was simple and easy. Quick responses made the process a lot faster."
        ]
      }
    ]
  }
]

I tried the following, but it does not combine the flow names properly…

var mainArr = [];

tup[0].thumbsup.map(obj => {
    //console.log(obj.feedbackAllFlows)
  obj.feedbackAllFlows.map ((flow) => {
    mainArr.push({flow: obj.feedbackMessage})
  })
})

console.log(mainArr)

I expected the “flow” to be the name of the flow, but thats not correct, it using flow as the key value not the actual flow.

Here is my JSFiddle
https://jsfiddle.net/ju0v5rdk/

Any help would be amazing

I’m building an e-commerce website using Next.js, TypeScript, MongoDB, and NextAuth.js. I’m handling the shopping cart differently for guest users and logged-in users:

Guest users: Cart is stored in localStorage.
Logged-in users: Cart is stored in the MongoDB user document.

When I add a product to the cart while logged in and refresh the page, I see that the quantity is multiplying like crazy in the same product. This does not happen for guest users (localStorage cart works fine).

How can i fix this? Seems like the code in cartcontext might be the reason when trying to merge the cart.

CartContext:

"use client";

// Good way to manage global state(especially where you need access to multiple components)
import React, {
  createContext,
  useContext,
  useState,
  ReactNode,
  useEffect,
} from "react";
import { useSession } from "next-auth/react";

export interface CartItem {
  _id: string;
  name: string;
  image: string;
  price: number;
  size?: string;
  quantity: number;
}

// functions go here
interface CartContextType {
  cart: CartItem[];
  addToCart: (item: CartItem) => void;
  removeFromCart: (itemId: string, size: string) => void;
  calculateTotalPrice: (itemId: string, itemSize: string, itemPrice: number) => number;
  updateCartQuantity: (itemId: string, size: string, quantity: number) => void;
  syncCartWithBackend: () => Promise<void>;
}

const CartContext = createContext<CartContextType | undefined>(undefined);

export const CartProvider = ({ children }: { children: ReactNode }) => {
  const ls = typeof window !== "undefined" ? window.localStorage : null;
  const { data: session, status } = useSession();
  const [cart, setCart] = useState<CartItem[]>([]);
  const localStoragekey = "cartItems";

  useEffect(() => {
    const fetchCart = async () => {
      if (status === "authenticated") {
        try {
          const response = await fetch("/api/cart", { method: "GET" });
          if (response.ok) {
            const data = await response.json();
            //setCart(data.cart);
            //syncCartWithBackend();
            if(JSON.stringify(data.cart) !== JSON.stringify(cart))
            setCart((prevCart) => {
              const mergedCart = [...prevCart];
              data.cart.forEach((item: CartItem) => {
                const existingItem = mergedCart.find(
                  (cartItem) => cartItem._id === item._id && cartItem.size === item.size
                );
                if (existingItem) {
                    // update quantity if item exist in cart
                  existingItem.quantity += item.quantity;
                } else {

                  mergedCart.push(item);
                }
              });
              return mergedCart;
            });
          } else {
            console.error("Failed to fetch cart from backend:",response.status );
          }
        } catch (error) {
          console.error("Failed to fetch cart from backend:", error);
        }
      } else if (ls) {
        const storedCart = ls.getItem(localStoragekey);
        if (storedCart) {
          setCart(JSON.parse(storedCart));
        }
      }
    };

    if (status === "authenticated" || status === "unauthenticated") {
    fetchCart();
    }
  }, [status]);

  // sync after cart is updated
  useEffect(() => {
    if (status === "unauthenticated" && ls) {
      const storedCart = ls.getItem(localStoragekey);
      if (storedCart !== JSON.stringify(cart)) {
        ls.setItem(localStoragekey, JSON.stringify(cart));
      }
    }
  }, [cart, status, ls]);

 

  // Automatically sync with backend with useeffect and we dont need to call the method in every function
  useEffect(() => {
    let isSyncing = false;


    const syncCartWithBackend = async () => {
      if (status === "authenticated" && session?.user?.id && !isSyncing) {
        isSyncing = true;
        try {
          const response = await fetch("/api/cart", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ userId: session.user.id, cartItems: cart }),
          });

          if (!response.ok) {
            console.error("Failed to sync cart with backend:", response.status);
          }
        } catch (error) {
          console.error("Error syncing cart:", error);
        } finally {
          isSyncing = false;
        }
      }
    };

    if(status === "authenticated") {
      syncCartWithBackend();
    }
  }, [cart, status, session]);

  const addToCart = (item: CartItem) => {
    setCart((prevCart) => {
      const existingItem = prevCart.find(
        (cartItem) => cartItem._id === item._id && cartItem.size === item.size
      );

      if (existingItem) {
        //update quantity if item is already in cart with same size
        return prevCart.map((cartItem) =>
          cartItem._id === item._id && cartItem.size === item.size
            ? { ...cartItem, quantity: Math.max(1,cartItem.quantity + 1) } // prevent quantity being below 1
            : cartItem
        );
      } else {
        //add new item to cart
        return [...prevCart, { ...item, quantity: 1 }];
      }
    });
  };

  const removeFromCart = (itemId: string, size: string) => {
    setCart((prevCart) =>
      prevCart.filter(
        (cartItem) => !(cartItem._id === itemId && cartItem.size === size)
      )
    );
  };

  const updateCartQuantity = (
    itemId: string,
    size: string,
    quantity: number
  ) => {
    setCart((prevCart) =>
      prevCart
        .map((cartItem) =>
          cartItem._id === itemId && cartItem.size === size
            ? {
                ...cartItem,
                quantity: Math.max(0, cartItem.quantity + quantity),
              }
            : cartItem
        )
        .filter((cartItem) => cartItem.quantity > 0)
    );
  };

  const calculateTotalPrice = (
    itemId: string,
    itemSize: string | undefined,
    itemPrice: number
  ) => {
    const totalQuantity = cart
      .filter((item) => item._id === itemId && item.size === itemSize || item.size === "onesize")
      .reduce((acc, item) => acc + item.quantity, 0);
    return totalQuantity * itemPrice;
  };

  return (
    <CartContext.Provider
      value={{
        cart,
        addToCart,
        removeFromCart,
        calculateTotalPrice,
        updateCartQuantity,
        syncCartWithBackend: async () => {},
      }}
    >
      {children}
    </CartContext.Provider>
  );
};

//Function to use the cart
export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error();
  }
  return context;
};

I’ve been struggling with this for a few weeks, poring over API documentation for ws and node and I feel like I’ve tried everything. I’ve set up a WebSocket server:

var app = require('../app');
var debug = require('debug')('ohoapp:server');
var http = require('http');
var { WebSocketServer } = require('ws');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

var wss = new WebSocketServer({ server: server,  clientTracking: true, host: "openheroodyssey.com" });
wss.on('listening', () => {
  console.log('WebSocket Server listening on port ' + wss.address().port.toString());
  console.log("WS address: " + wss.address().address);
  console.log("WS family: " + wss.address().family);
});
wss.on('connection', (socket, req) => {

  console.log("connection established");

  socket.send("Connection established!");

  socket.on('message', (message, isBinary) => {
    wss.clients.forEach((client) => {
      if(client.readyState === ws.OPEN && ws !== client){
        client.send(msg, { binary: isBinary });
      }
    });
    console.log(message)
  });
  socket.on('close', () => {
    console.log('connection closed');
  });
});


server.on('error', onError);
server.on('listening', onListening);

server.listen(port, () => {console.log("HTTP/S server listening on port: " + port.toString());});
function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

Important note; via the console, I can see the server listening messages (console logs) and the port displays from the console log. What irks me (and may be part of my issue) is that the address doesn’t display for some reason. I’ve tried hard-coding my site url to bind the server to, but it still doesn’t work (it didn’t before I tried binding via the host property).

here’s a snippet of what I get on the console:

2025-02-13 19:52:31 default[20250213t194835] WebSocket Server listening on port 8081
2025-02-13 19:52:31 default[20250213t194835] WS address: ::
2025-02-13 19:52:31 default[20250213t194835] WS family: IPv6

I had originally a .toString() at the end of the console.log that displays the address, but I took that out as part of troubleshooting, to no avail (the output doesn’t change)

I’m using POSTMAN and also WebSocketKing to try to test the connection, using several different ways (wss://www.openheroodyssey.com:8081 base, I’ve also tried ws://, I’ve tried without the www, without the port number [which I didn’t expect to work; it didn’t])

I have a swollen knot on my forehead from hitting a wall on this, anyone know what I’m doing wrong? Any help would be greatly appreciated.

I am trying to return the values from the database the values are getting printed in function but its returning “undefined” please find the code

export const getUsers = async (db) => {

  console.log('Fetching users ...');
  await db.transaction(tx => {
    tx.executeSql(
      'SELECT * FROM users;',
      [],
      (_, results) => {
        // console.log('Results:', results);
        let users = [];
        for (let i = 0; i < results.rows.length; i++) {
          users.push(results.rows.item(i));
          // console.log(i);
        }
        console.log('✅ Users fetched:', users.length);
        return users
      },
      error => console.error('Error fetching users:', error)
    );
  });
};

useEffect(() => { 
    getDBConnection().then((db) => {
        getUsers(db).then((users) => {
            console.log("This is chapter List::::::: " + users)
            setChapters(users);
            // console.log("This is chapter List::::::: " + users)
        });
    });
  }, []);

I’m developing a custom Angular builder to remove specific code blocks from both TypeScript and HTML files during the build process. While the TypeScript processing works correctly, I’m unable to get the HTML processing working.

What I Want to Achieve

1. Remove code blocks from TypeScript files that are wrapped in:
   //#REMOVE_BLOCK_START // some code here //#REMOVE_BLOCK_END

2. Remove code blocks from HTML files that are wrapped in:
   <!-- #REMOVE_BLOCK_START --> <!-- some html here --> <!-- #REMOVE_BLOCK_END -->

Project Structure

my-project/
├── client/                 # Angular application
│   ├── angular.json
│   └── src/
└── custom-builder/        # Custom builder implementation
    ├── src/
    │   ├── custom-builder.ts
    │   ├── HtmlContentModifierPlugin.ts
    │   └── remove_module.ts
    ├── builders.json
    └── package.json

Code Implementation

1. Custom Builder (custom-builder.ts):

import * as path from 'path';
import * as webpack from 'webpack';
import { BuilderContext, createBuilder } from '@angular-devkit/architect';
import { executeBrowserBuilder } from '@angular-devkit/build-angular';
import { HtmlContentModifierPlugin } from './HtmlContentModifierPlugin';

function transform(input: webpack.Configuration): webpack.Configuration {
  if (!input.module?.rules) return input;

  // Add rule for TypeScript and HTML files
  // __ditname refers as 'my-project/custom-builder/dist 
  // (since the remove_module.ts will be converted in remove_moduel.js we are passing it in loader)
  const newRule = {
    test: /.(ts|html)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: path.resolve(__dirname, 'remove_module.js'),
        options: {}
      }
    ]
  };

  input.module.rules.unshift(newRule);
  
  // Add HTML plugin
  if (!input.plugins) {
    input.plugins = [];
  }
  input.plugins.push(new HtmlContentModifierPlugin());

  return input;
}

function executeBuilder(options: any, context: BuilderContext) {
  return executeBrowserBuilder(options, context, {
    webpackConfiguration: transform
  });
}

export default createBuilder(executeBuilder);

2. HTML Plugin (HtmlContentModifierPlugin.ts):

import { Compiler, sources } from 'webpack';
import { Compilation } from 'webpack';

export class HtmlContentModifierPlugin {
  apply(compiler: Compiler): void {
    compiler.hooks.emit.tapAsync(
      'HtmlContentModifierPlugin',
      (compilation: Compilation, callback) => {
        // Process all compiled assets
        Object.keys(compilation.assets).forEach((filename) => {
          if (filename.endsWith('.html')) {
            console.log('Processing HTML file:', filename);
            const asset = compilation.assets[filename];
            const content = asset.source().toString();
            
            // Remove assessment blocks
            const modifiedContent = content.replace(
              /<!--s*#REMOVE_BLOCK_STARTs*-->[sS]*?<!--s*#REMOVE_BLOCK_ENDs*-->/g,
              ''
            );

            compilation.assets[filename] = new sources.RawSource(modifiedContent);
          }
        });
        callback();
      }
    );
  }
}

3. remove_module.ts:

import { LoaderDefinitionFunction } from 'webpack';

const removeAssessmentLoader: LoaderDefinitionFunction = function (source) {
  const filename = this.resourcePath;
  console.log("Code is running with loader for:", filename);

  // Replace all occurrences of "originalText" with an empty string

      if (filename.endsWith('.ts')) {
          return source.replace(///#REMOVE_BLOCK_START[sS]*?//#REMOVE_BLOCK_END/g, '');
      }

      // Remove HTML code between <!-- #REMOVE_BLOCK_START --> and <!-- #REMOVE_BLOCK_END -->
      else if (filename.endsWith('.html')) {
        console.log("HTML CHANGE");
          return source.replace(/<!--s*#REMOVE_BLOCK_STARTs*-->[sS]*?<!--s*#REMOVE_BLOCK_ENDs*-->/g, '');
      }

};

export default removeAssessmentLoader;

4. custom-builder/package.json:

{
  "name": "custom-builder",
  "version": "0.0.1",
  "builders": "./builders.json",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.1602.16",
    "@angular-devkit/build-angular": "^16.2.16",
    "@angular-devkit/core": "^16.2.16",
    "@types/karma": "^6.3.9",
    "@types/node": "~18.11.6",
    "karma": "^6.4.1",
    "rxjs": "~7.5.0",
    "typescript": "^5.1.6"
  },
  "dependencies": {
    "@angular-devkit/schematics": "^16.2.16",
    "@angular/cli": "^16.2.16"
  }
}

5. angular.json Configuration.

{
  "projects": {
    "client": {
      "architect": {
        "custom-target": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

What’s Working
The TypeScript processing works perfectly. All code blocks between //#REMOVE_BLOCK_START and //#REMOVE_BLOCK_END are successfully removed during build.

What is Not Working
The HTML processing is not working. The HTML files are not being processed, and the code blocks between <!– #REMOVE_BLOCK_START –> and <!– #REMOVE_BLOCK_END –> remain in the output

Questions

• Why isn’t the HTML plugin processing the HTML files?
• Is there a better approach to process HTML files during the Angular build process?
  ( I have heard about AngularWebpackPlugin but i’m not sure if it has anything like transform to perform function at compilation time)

I am trying to resolve a problem with the responsive design of my website. However, when I try to paste in the code to create a minimum reproducible example, the only way the problem can be reproduced is by posting a lot of code – way over the 30,000 character limit.

What do people do in this situation?