Category: javascript

Category Added in a WPeMatico Campaign

React: Images not rendering when using rich text from Contentful

I’m using React, Astro and Contenful. I need to render rich text with images. I tried to use documentToReactComponents function from Contentful’s @Contentful/rich-text-react-renderer package to render rich text content in my React application. While my text and headings are rendering correctly, any images within the content do not appear.

Here’s a simplified version of my component:

import React, { useState } from "react";
import { documentToReactComponents } from "@Contentful/rich-text-react-renderer";
import type { QuestionAndAnswerItem } from "../types/contentful";
interface TrendingArticlesProps {
  faqData: QuestionAndAnswerItem[];
  heading: string;
}
export const TrendingArticles: React.FC<TrendingArticlesProps> = ({ faqData, heading }) => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const handleToggle = (index: number) => {
    setOpenIndex((prevIndex) => (prevIndex === index ? null : index));
  };
  return (
    <section style={{ margin: "2rem 0" }}>
      <h2>{heading}</h2>
      <div>
        {faqData.map((item, index) => (
          <div
            key={index}
            style={{
              border: "1px solid #ccc",
              borderRadius: "4px",
              marginBottom: "0.5rem",
            }}
          >
            <button
              onClick={() => handleToggle(index)}
              style={{
                width: "100%",
                textAlign: "left",
                padding: "1rem",
                background: "F9F9F9_1",
                border: "none",
                cursor: "pointer",
              }}
            >
              {documentToReactComponents(item.question)}
            </button>
            {openIndex === index && (
              <div style={{ padding: "1rem", background: "#fff" }}>
                {documentToReactComponents(item.answer)}
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
};

Contenful content
output

documentToReactComponents function from Contentful’s @Contentful/rich-text-react-renderer package to render rich text content in my React application. While my text and headings are rendering correctly, any images within the content do not appear.
contentful content
output

Clipboard API: Leading spaces lost on first HTML paragraph when pasting into PowerPoint

I’m using the Clipboard API to copy styled HTML content with leading spaces into Microsoft PowerPoint, and I found that using a combination of &nbsp; and mso-spacerun:yes works well — except for the first line (based on this question). For some reason, the indentation of the first paragraph gets collapsed down into at most one space when pasted into PowerPoint.

Here’s the full source code of what I’m doing:

const htmlText =
  // Indented with non-breaking spaces and mso-spacerun
  '<p><span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;Three</span></p>' +
  '<p><span style="mso-spacerun:yes">&nbsp;&nbsp;Two</span></p>' +
  '<p><span style="mso-spacerun:yes">&nbsp;One</span></p>' +
  '<p><span style="mso-spacerun:yes">&nbsp;&nbsp;Two</span></p>'+
  '<p><span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;Three</span></p>';

async function copyToClipboard() {
  try {
    const data = [
      new ClipboardItem({
        'text/html': new Blob([htmlText], { type: 'text/html' })
      })
    ];
    await navigator.clipboard.write(data);
    console.log('HTML copied to clipboard');
  } catch (err) {
    console.error('Failed to copy HTML:', err);
  }
}

When I paste this into PowerPoint:

  • The second, third, and fourth lines all keep their leading spaces as expected.
  • But the first line loses its indentation and appears left-aligned.

The following shows the result in powerpoint:

Example of the wrong indentation for the first line

Has anyone else run into this?
Is there a workaround or specific formatting tweak that forces PowerPoint to respect the leading spaces on the first paragraph as well?

Thanks in advance!

Getting the XML declaration from a document

I’ve hit a conundrum whilst writing a custom serialize XMLDocument function. I can’t find the opening XML declaration anywhere. I know it’s there because new XMLSerializer().serializeToString(xml) can access it, and I’m fairly certain it doesn’t just generate a new one because it even includes the standalone=”no” of the original document.

However, the MDN documentation specifies:

XML – declaration is not a tag

and indeed I’ve looked through the DOM properties and the declaration is nowhere to be found. The processing instruction appears to be absent from the document structure. Is there a property I’m missing somewhere? Maybe one that contains the un-parsed document as a string? And failing that I would love to know how serializeToString() does it.

Here is my function as it stands:

const serialize = function(xml) {
    let string = "";
    const recursive = function(node,indent = 0) {
        if (node.nodeType === Node.ELEMENT_NODE) {
            string += "t".repeat(indent) + "<" + node.tagName;
            for (const attribute of node.attributes) {
                recursive(attribute,indent + 1);
            }
            if (node.childNodes.length) {
                string += ">";
                if (Array.from(node.childNodes).some(child => child.nodeType === Node.TEXT_NODE && child.data.match(/[^s]/))) {
                    for (const child of node.childNodes) {
                        recursive(child,0);
                    }
                } else {
                    string += "n";
                    for (const child of Array.from(node.childNodes).filter(child => child.nodeType === Node.ELEMENT_NODE)) {
                        recursive(child,indent + 1);
                    }
                    string += "t".repeat(indent);
                }
                string += "</" + node.tagName + ">";
            } else {
                string += "/>";
            }
            string += (indent ? "n" : "");
        }
        if (node.nodeType === Node.ATTRIBUTE_NODE) {
            string += (indent ? "n" : " ") + "t".repeat(indent) + `${node.name}="${node.value}"`;
        }
        if (node.nodeType === Node.TEXT_NODE) {
            string += node.data;
        }
        if (node.nodeType === Node.CDATA_SECTION_NODE) {
            string += "<!CDATA[[" + node.data + "]]>" + "n";
        }
        if (node.nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
            string += "<?" + node.target + " " + node.data + "?>" + "n";
        }
        if (node.nodeType === Node.COMMENT_NODE) {
            string += "<!-- " + node.data + " -->" + "n";
        }
        if (node.nodeType === Node.DOCUMENT_NODE) {
            for (const child of node.childNodes) {
                recursive(child);
            }
        }
    }
    recursive(xml);
    return string;
}

AG Grid Value Setter Not Updating Underlying Data

I’m trying to apply a basic formula that multiplies the “quantity” by “cost” to get a “total cost”. The user can change the “quantity” or “cost” which will update the “total cost”. I then want to retrieve that updated “total cost” from the underlying data in the grid. From my understanding of the documentation, I should be using “valueSetter”, but it does not work. Meaning, after the user changes the “cost” or “quanity”, I can see the data changed in the display of the grid. However, the underlying data does not change.

I’ve already tried the only other source found here under a similar thread, but it does not work.

Code example: This uses methods shown under the documentations examples.

let gridApi;

const gridOptions = {
    rowData: [ { item: "Shirt", quantity: 10, cost: 2.00 , total: 20.00 } ],
    columnDefs: [
        { field: "item", },
        { field: "quantity", headerName: 'Qty', editable: true, },
        { field: "cost", headerName: 'Cost', editable: true, },
        {
            field: "total",
            headerName: 'Total Cost',
            editable: false,
            valueGetter: params => params.data.quantity * params.data.cost,
            valueSetter: params => {
                params.data.total = params.newValue;
                return true;
            },
        },
    ],
};

document.addEventListener("DOMContentLoaded", function () {
    const gridDiv = document.querySelector("#myGrid");
    gridApi = agGrid.createGrid(gridDiv, gridOptions);
});

$("#ButtonDisplayData").click(function () {
    const allRowData = [];
    gridApi.forEachNode(node => allRowData.push(node.data));

    //Display data using node and directly. Nothing changes
    console.log(allRowData);
    console.log(gridOptions.rowData);
});

As I said above, I tried the suggestion from the similar thread found on this site and it didn’t work.

const colId = params.colDef.colId;
const paramsCopy = { ...params.data };
const paramsCopy = params.data ;
paramsCopy[colId] = params.newValue;
params.data = paramsCopy;
params.node.setData(paramsCopy);
return true;

Java – keep scroll positions on page by url [closed]

I am not good in Java, please help if you can.
Need to keep position on page, but different page means different position. Found a script for it and it works OK. There is problem, I have few pages with redirected to same page, but different URL (by RewriteRule), but the script takes it as one same URL.

RewriteRule page1.php detail.php
RewriteRule page2.php detail.php
RewriteRule page3.php detail.php

script:

document.addEventListener("DOMContentLoaded", function (event) {
    var scrollpos = localStorage.getItem("scrollpos");
    if (scrollpos) window.scrollTo(0, scrollpos);
});

window.onscroll = function (e) {
    localStorage.setItem("scrollpos", window.scrollY);
};

vue axios.post method is neither doing anything nor throwing an error

I have a vue frontend with a flask backend and in addition a c++ camera backend. All of this has been working before. Now I switched to another computer and I´m using a different camera backend and camera.
Now I run into this strange problem: When I press a frontend button, It first triggers the camera image acquisition, waits for the filepath and THEN it should do an axios.post to my backend api. But nothing happens. The Endpoint doesn´t get triggered and I don´t get any errors or responses.

When I enter the debugger and trigger the whole axios.post statement manually, It works fine!

Any ideas what I can do?

  • Working on a Windows Machine
  • npm version 10.9.2
  • vue version 3.3.4 (i think)
  • axios version 1.7.9
async function startImgAnalysis() {
  updateBusy(true);

  recordStore.setRecordName(recordName.value);
  await recordStore.createSnapshot(recordName.value, recordType);

  await sleep(500); // we need a pause here, to make sure the image was really written 
  var path = await recordStore.getLatestRecord(recordName.value, recordType);

  if(!path){
    errorStore.setError("Analysis could not be started!", "The file path is empty.")
  } else{
      //debugger;
      console.log(path);   // this works!
      axios.post("analyze/start", {'path': path})   // nothing happens till I do it manually via debugger
          .then((res) => {
            let statuspath = res.headers.get('statusid');
            analysisInProgress.value=true;
            updateProgress(statuspath);
          })
          .catch((err) => {       //No errors are logged
            console.error(err);
            updateBusy(false);
          });
    }
}

Angular 19 change innerHTML of an dynamic created DIV

i’ve following situation:
i’m create with an api dynamic div for drag and drop.

Drag & Drop works very well. now when i do a double Click i want to change the HTML content of this div. How can i do that in Angular?

in javascript you can use getElementById.innerHTML

But it seems this is not the Angular way.

How to display multiple data in HTML? [closed]

I have this code, which represents the data for one actor:

<section class="container">
        <div class="row row-cols-3 justify-content-center">
            <div class="row">
                <img src="../images/HoytevanHoytema.jpg" alt="Actor" />
                <div class="separador">
                    <h2>ACTOR</h2>
                    <button class="vote-button">VOTAR</button>
                </div>
                <p>By FILM NAME</p>
            </div>
        </div>
    </section>

And I need to show data for 6 actors, for example. How I do it? I thought 3 options:

  • Statically: Write manually the data for the 6 actors.
  • Dinamically: Use a JSON with the information of he actors but, Isn’t it very inefficient to ask the server for “static” information about each actor?
  • Another method. I thought that there must be a way to dynamically load the HTML data into the server before sending it to the client.

Creating JavaScript to make Hover function on iOS [duplicate]

I’m working on this website and I don’t currently know how to test this on iOS for free. I’m trying JavaScript out. Should this function? Sorry, I think I’m still a little new. Thanks

            const navbarElement = document.querySelectorAll('.navbar .subnav #raiseup img.catalogue-img');

            navbarElement.addEventListener('touchstart', function(e) {
              e.preventDefault(); // Prevents the default touch behavior
              this.classList.toggle('hovered');
            });

            // Optional: Remove the class on touchend or touchcancel
            navbarElement.addEventListener('touchend', function() {
              this.classList.remove('hovered');
            });

            navbarElement.addEventListener('touchcancel', function() {
                this.classList.remove('hovered');
            });

jqgrid inline edit conflicts with form editing

I’m using free jqGrid form editing (navGrid) with also inline editing (inlineNav) only for editing using Enter and Esc keys.

  $('#gridId').jqGrid('navGrid','#pagerId',
    {edit: true, add: true, del: true, search: true, view: true, refresh: true})
  
  .jqGrid('inlineNav','#pagerId',
    {edit: true, add: false, save: false, cancel: false, editParams: {keys: true}});

Some problems arise when the user enters inline editing and forgets to accept or cancel it with the proper key (Enter or Esc).

If the refresh button is pressed, nothing is refreshed from the server, which may be OK taking into account that the inline editing is still pending to be accepted.

But if delete or add button are pressed, the grid reacts as if no inline editing where pending: deleting the row or showing a form to add a record, respectively.

Also, if some columns have search attribute set to true, you can fill search fields in the tool bar but nothing happens when you accept them pressing Enter key ( nothing is sent to the server ).

All this may be confusing for the user who enters inline editing, but forgets to accept or cancel it and continues to operate on the grid.

I wonder if there is a way to prevent doing other operations on the grid when inline editing starts, the same way that when a form editing starts the modal dialog prevents doing other operations.

Thanks in advance for any clue.

What is the order of microtasks in multiple Promise chains?

Out of an academic interest I am trying to understand the order of microtasks in case of multiple Promise chains.

I. Two Promise chains

These execute in a predictable “zipped” way:

Promise.resolve()
  .then(log('a1'))
  .then(log('a2'))
  .then(log('a3'));

Promise.resolve()
  .then(log('b1'))
  .then(log('b2'))
  .then(log('b3'));
// a1 b1 ; a2 b2 ; a3 b3
// Here and in other output listings
// manually inserted semicolons ";" help illustrate my understanding.

II. The first “a1” returns a Promise:

Promise.resolve()
  .then(() => {
    log('a1')();
    return Promise.resolve();
  })
  .then(log('a2'))
  .then(log('a3'));

Promise.resolve()
  .then(log('b1'))
  .then(log('b2'))
  .then(log('b3'));
// a1 b1 ; b2 ; b3 a2 ; a3

As I understand, a new Promise returned from a then() has introduced a single extra microtask to resolve that Promise; which has also shifted the “A” then() to the end of the “loop”. This allowed both “b2” and “b3” to overtake.

III. Three Promise chains

Here’s the working code to try running, along with the helper functions:

const output = [];

const makeChain = (key, n = 5, trueStep = false) => {
  let p = Promise.resolve();
  const arrow = isArrow => isArrow ? '->' : '';
  for (let i = 1; i <= n; i++) {
    const returnPromise = trueStep === i;
    const afterPromise = trueStep === i - 1;
    p = p.then(() => {
      output.push(`${arrow(afterPromise)}${key}${i}${arrow(returnPromise)}`);
      if (returnPromise) return Promise.resolve();      
    });
  }
  return p.catch(console.error);
};

// ----- cut line for this and next tests -----

Promise
  .all([
    makeChain('a', 3),
    makeChain('b', 3),
    makeChain('c', 3),
  ])
  .then(() => console.log(output.join(' ')));

// a1 b1 c1 ; a2 b2 c2 ; a3 b3 c3

So far so good: a “zip” again.

IV. Return Promise at “a1” step

(skipping the helper funciton)

Promise
  .all([
    makeChain('a', 3, 1),
    makeChain('b', 3),
    makeChain('c', 3),
  ])
  .then(() => console.log(output.join(' ')));
// a1-> b1 c1 ; b2 c2 ; b3 c3 ->a2 ; a3

Looks like the same behavior: “A1” introduced a single extra microtask + jumped to the tail of the “loop”.

V. “c4” also returns a Promise:

Promise
  .all([
    makeChain('a', 7, 1),
    makeChain('b', 7),
    makeChain('c', 7, 4),
  ])
  .then(() => console.log(output.join(' ')));

// a1-> b1 c1 ; b2 c2 ; b3 c3 ->a2 ; b4 c4-> a3 ; b5 a4 ; b6 a5 b7 ->c5 ; a6 c6 ; a7 c7

Two questions

  1. In the last test I cannot explain the order after “dispatching” the “c4”: why did the “b7” overtook the “c5” then()?

  2. Where can I read about the rules behind the order of the microtasks in the PromiseJobs queue?

Error, exports in common package not found when upgrading typescript from 3.7.2 to 4.4.4

I am trying to upgrade my typescript version from 3.7.2 to 4.4.4. The reason for the upgrade is because I want to use winston 3.7.2 which uses logform 2.5.x which requires typescript version >= 4.4.

This is my tsconfig.json. I’ve tried modifying it in various ways, such as trying
different values for target, lib, moduleResolution, baseUrl, and paths.

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "moduleResolution": "node",
    "resolveJsonModule": true
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*", "tests/**/*"]
}

This is my package.json

{
  "name": "@corp/serverless",
  "version": "1.1.0",
  "description": "aws serverless infrastructure",
  "main": "index.js",
  "scripts": {
    "build": "rm -rf .build && yarn serverless package --package ./dist",
    "lint": "eslint --ext .ts src",
    "migrate": "rm -rf .build && yarn sls invoke local --function postgresMigration -d '{ "migration": true, "orgSync": true, "seed": true }'",
    "start": "NODE_ENV=local yarn serverless offline --skipCacheInvalidation start",
    "test": "yarn jest",
    "test:ci": "yarn lint && yarn type-check && yarn test --coverage --maxWorkers=1",
    "type-check": "tsc --traceResolution"
  },
  "keywords": [
    "amazon-web-service"
  ],
  "author": "versett inc",
  "license": "UNLICENSED",
  "dependencies": {
    "@corp/common": "^1.0.0",
    "@types/object-hash": "^1.3.1",
    "agentkeepalive": "^4.1.0",
    "async": "^3.1.1",
    "aws-lambda-graphql": "1.0.0-alpha.19",
    "dataloader": "^2.0.0",
    "graphql": "14.5.8",
    "graphql-subscriptions": "^1.0.0",
    "http-status-codes": "^1.4.0",
    "ioredis": "^4.19.4",
    "jsonwebtoken": "^8.5.1",
    "jwks-rsa": "^1.6.0",
    "jwt-decode": "^2.2.0",
    "knex": "^0.21.1",
    "mime-types": "^2.1.27",
    "moment-timezone": "^0.5.33",
    "nanoid": "^2.1.10",
    "object-hash": "^2.0.1",
    "pg": "^8.2.1",
      "winston": "^3.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-typescript": "^7.7.2",
    "@types/async": "^3.0.7",
    "@types/aws-lambda": "^8.10.36",
    "@types/http-status-codes": "^1.2.0",
    "@types/jest": "^24.9.0",
    "@types/nanoid": "^2.1.0",
    "@types/node": "^12.12.8",
    "@types/node-fetch": "^2.5.3",
    "@types/pg": "^7.14.1",
    "@types/request": "^2.48.4",
    "@typescript-eslint/eslint-plugin": "^2.6.1",
    "@typescript-eslint/parser": "^2.8.0",
    "@versett/eslint-plugin-versett": "^0.18.1",
    "ajv": "^6.11.0",
    "aws-sdk": "^2.799.0",
    "aws-sdk-mock": "^4.5.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.6.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-import-resolver-typescript": "^2.0.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^23.0.4",
    "eslint-plugin-prettier": "^3.1.1",
    "jest": "^24.9.0",
    "mssql": "^6.0.1",
    "mysql": "^2.17.1",
    "mysql2": "^2.1.0",
    "prettier": "^1.19.1",
    "serverless": "^1.57.0",
    "serverless-dotenv-plugin": "^2.1.1",
    "serverless-jetpack": "^0.11.2",
    "serverless-offline": "^5.12.0",
    "serverless-offline-dynamodb-streams": "^3.0.2",
    "serverless-offline-kinesis": "^3.0.1",
    "serverless-plugin-common-excludes": "^3.0.0",
    "serverless-plugin-include-dependencies": "^4.0.0",
    "serverless-plugin-typescript": "^1.1.9",
    "sqlite3": "5.1.7",
    "ts-jest": "^24.2.0",
    "typescript": "^3.7.2"
  }
}

In the bottom of this file, I tried changing "typescript": "^3.7.2" to "typescript": "^4.4.4" as well as other versions like 5.8.2. However, after making that change, I get errors where types defined in my common package @corp/common can no longer be found.

An example of this error is error EventNotification not found in '@corp/common'. The complete logs are shown below.

What I’ve done:

  • I’ve confirmed these dependencies exist and are being exported and imported correctly, and the issues only arise after changing the typescript version.
  • I added the following to my paths in tsconfig.json : "@corp/common": ["../common/src/*"]
  • I added the following to tsconfig.json : baseUrl : '.'
  • I tried changing target and lib in tsconfig.json to : ES2020
  • I tried setting moduleResolution to nodenext
  • I tried several other things as well, just iterating and seeing what would happen
@corp/serverless: $ yarn lint && yarn type-check && yarn test --coverage --maxWorkers=1
@corp/serverless: $ eslint --ext .ts src
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/generateHeartbeat.ts
@corp/serverless:   4:3  error  EventNotification not found in '@corp/common'      import/named
@corp/serverless:   5:3  error  PigNotification not found in '@corp/common'        import/named
@corp/serverless:   6:3  error  SignatureNotification not found in '@corp/common'  import/named
@corp/serverless:   7:3  error  TrainNotification not found in '@corp/common'      import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/mirrorEvent.ts
@corp/serverless:   2:10  error  EventNotification not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processEventData.ts
@corp/serverless:   2:10  error  EventNotification not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processEventSignatureData.ts
@corp/serverless:   2:10  error  SignatureNotification not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processPigData.ts
@corp/serverless:     2:3   error    PigNotification not found in '@corp/common'     import/named
@corp/serverless:     3:3   error    SubscriptionType not found in '@corp/common'    import/named
@corp/serverless:     4:3   error    PigStatusValues not found in '@corp/common'     import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processPigEvent.ts
@corp/serverless:     1:10  error    PigStatusValues not found in '@corp/common'  import/named
@corp/serverless:     1:27  error    PigNotification not found in '@corp/common'  import/named
@corp/serverless:     1:44  error    gqlType not found in '@corp/common'          import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processTrainData.ts
@corp/serverless:     2:3   error    TrainNotification not found in '@corp/common'   import/named
@corp/serverless:     3:3   error    SubscriptionType not found in '@corp/common'    import/named
@corp/serverless:     4:3   error    TrainStatusValues not found in '@corp/common'   import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processTrainEvent.ts
@corp/serverless:     1:10  error    TrainStatusValues not found in '@corp/common'  import/named
@corp/serverless:     1:29  error    TrainNotification not found in '@corp/common'  import/named
    @typescript-eslint/camelcase
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventMirror/index.ts
@corp/serverless:    4:10  error    EventTableRecord not found in '@corp/common/'     import/named
@corp/serverless:    4:28  error    EventMirrorComments not found in '@corp/common/' /home/circleci/repo/packages/serverless/src/graphqlApi/mutations/pigTracking.ts
@corp/serverless:   2:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/mutations/trainTracking.ts
@corp/serverless:   2:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/queries/events.ts
@corp/serverless:   1:30  error  Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/named
@corp/serverless:   2:10  error  gqlType not found in '@corp/common'                                                                             import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/queries/fakeLeak.ts
@corp/serverless:   1:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/queries/pig.ts
@corp/serverless:     2:10  error    gqlType not found in '@corp/common'                                                                             import/named
@corp/serverless:     2:19  error    PigStatusValues not found in '@corp/common'                                                                     import/named
@corp/serverless:     3:30  error    Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/named
@corp/serverless:   103:16  warning  Identifier 'run_id' is not in camel case                                                                           @typescript-eslint/camelcase
@corp/serverless:   103:31  warning  Identifier 'pipeline_id' is not in camel case                                                                      @typescript-eslint/camelcase
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/queries/reports.ts
@corp/serverless:    1:10  error    gqlType not found in '@corp/common'             import/named
@corp/serverless:   54:9   warning  Identifier 'organization_id' is not in camel case  @typescript-eslint/camelcase
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/queries/summary.ts
@corp/serverless:   1:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/queries/train.ts
@corp/serverless:     2:10  error    gqlType not found in '@corp/common'                                                                             import/named
@corp/serverless:     2:19  error    TrainStatusValues not found in '@corp/common'                                                                   import/named
@corp/serverless:     3:30  error    Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/named
@corp/serverless:   103:16  warning  Identifier 'run_id' is not in camel case                                                                           @typescript-eslint/camelcase
@corp/serverless:   103:31  warning  Identifier 'pipeline_id' is not in camel case                                                                      @typescript-eslint/camelcase
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/auditLog.ts
@corp/serverless:   1:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/events.ts
@corp/serverless:   1:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/fakeLeak.ts
@corp/serverless:   4:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/index.ts
@corp/serverless:   3:51  error  Parse errors in imported module './organizations': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/organizations.ts
@corp/serverless:   0:0  error  Parsing error: Cannot read properties of undefined (reading 'map')
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/pigTracking.ts
@corp/serverless:   2:10  error  SubscriptionType not found in '@corp/common'  import/named
@corp/serverless:   2:28  error  PigStatusValues not found in '@corp/common'   import/named
@corp/serverless:   2:45  error  gqlType not found in '@corp/common'           import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/reports.ts
@corp/serverless:   8:10  error  gqlType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/summary.ts
@corp/serverless:   1:10  error  gqlType not found in '@corp/common'           import/named
@corp/serverless:   1:19  error  SubscriptionType not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/resolvers/trainTracking.ts
@corp/serverless:   2:10  error  SubscriptionType not found in '@corp/common'   import/named
@corp/serverless:   2:28  error  TrainStatusValues not found in '@corp/common'  import/named
@corp/serverless:   2:47  error  gqlType not found in '@corp/common'            import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/types/resolverTypes.ts
@corp/serverless:   1:10  error  TokenUserInfo not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/graphqlApi/utils/queries.ts
@corp/serverless:   1:10  error  gqlType not found in '@corp/common'                                                                             import/named
@corp/serverless:   2:30  error  Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/heartbeatHandler/processHeartbeatData.ts
@corp/serverless:   3:10  error  HeartbeatNotification not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/heartbeatHandler/processSummaryData.ts
@corp/serverless:   2:10  error  SummaryNotification not found in '@corp/common'  import/named
@corp/serverless:   2:31  error  SubscriptionType not found in '@corp/common'     import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/postgresMigration/organizationSync/syncOrganizationSqlCmd.ts
@corp/serverless:   2:18  error    Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/no-named-as-default
@corp/serverless:   2:18  warning  Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/no-named-as-default-member
@corp/serverless: /home/circleci/repo/packages/serverless/src/postgresMigration/organizationSync/syncPipelineSqlCmd.ts
@corp/serverless:   2:18  error    Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/no-named-as-default
@corp/serverless:   2:18  warning  Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/no-named-as-default-member
@corp/serverless: /home/circleci/repo/packages/serverless/src/reportHandler/index.ts
@corp/serverless:   27:7  warning  Identifier 'organization_id' is not in camel case  @typescript-eslint/camelcase
@corp/serverless:   29:7  warning  Identifier 'size_in_byte' is not in camel case     @typescript-eslint/camelcase
@corp/serverless:   30:7  warning  Identifier 'content_type' is not in camel case     @typescript-eslint/camelcase
@corp/serverless: /home/circleci/repo/packages/serverless/src/services/createAuditLog.ts
@corp/serverless:   31:5  warning  Identifier 'event_id' is not in camel case  @typescript-eslint/camelcase
@corp/serverless:   38:5  warning  Identifier 'pig_id' is not in camel case    @typescript-eslint/camelcase
@corp/serverless: /home/circleci/repo/packages/serverless/src/services/pgClient.ts
@corp/serverless:   1:18  error    Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/no-named-as-default
@corp/serverless:   1:18  warning  Parse errors in imported module 'knex': Cannot read properties of undefined (reading 'map') (undefined:undefined)  import/no-named-as-default-member
@corp/serverless: /home/circleci/repo/packages/serverless/src/streamLog/formatLogs.ts
@corp/serverless:   2:10  error  LogLevel not found in '@corp/common'  import/named
@corp/serverless: ✖ 122 problems (57 errors, 65 warnings)
@corp/serverless: error Command failed with exit code 1.
@corp/serverless: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
@corp/serverless: error Command failed with exit code 1.
@corp/serverless: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run test:ci exited 1 in '@corp/serverless'
lerna WARN complete Waiting for 1 child process to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.@corp/serverless: $ yarn lint && yarn type-check && yarn test --coverage --maxWorkers=1
@corp/serverless: $ eslint --ext .ts src
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: `parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/generateHeartbeat.ts
@corp/serverless:   4:3  error  EventNotification not found in '@corp/common'      import/named
@corp/serverless:   5:3  error  PigNotification not found in '@corp/common'        import/named
@corp/serverless:   6:3  error  SignatureNotification not found in '@corp/common'  import/named
@corp/serverless:   7:3  error  TrainNotification not found in '@corp/common'      import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/mirrorEvent.ts
@corp/serverless:   2:10  error  EventNotification not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processEventData.ts
@corp/serverless:   2:10  error  EventNotification not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processEventSignatureData.ts
@corp/serverless:   2:10  error  SignatureNotification not found in '@corp/common'  import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processPigData.ts
@corp/serverless:     2:3   error    PigNotification not found in '@corp/common'     import/named
@corp/serverless:     3:3   error    SubscriptionType not found in '@corp/common'    import/named
@corp/serverless:     4:3   error    PigStatusValues not found in '@corp/common'     import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processPigEvent.ts
@corp/serverless:     1:10  error    PigStatusValues not found in '@corp/common'  import/named
@corp/serverless:     1:27  error    PigNotification not found in '@corp/common'  import/named
@corp/serverless:     1:44  error    gqlType not found in '@corp/common'          import/named
@corp/serverless: /home/circleci/repo/packages/serverless/src/eventHandler/processTrainData.ts
@corp/serverless:     2:3   error    TrainNotification not found in '@corp/common'   import/named
@corp/serverless:     3:3   error    SubscriptionType not found in '@corp/common'    import/named
@corp/serverless:     4:3   error    TrainStatusValues not found in '@corp/common'   import/named

Below is the package.json for my common package.

{
  "name": "@corp/common",
  "version": "1.0.0",
  "description": "Shared corp package",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "private": true,
  "author": "",
  "license": "ISC",
  "dependencies": {
    "uuid": "^3.3.3",
    "jwt-decode": "^2.2.0",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "build": "yarn clean && yarn build:type && tsc",
    "clean": "rm -rf dist",
    "postinstall": "yarn build",
    "build:type": "graphql-codegen --config graphql-codegen.yml"
  },
  "devDependencies": {
    "@types/uuid": "^3.4.6",
    "@graphql-codegen/add": "^1.13.1",
    "@graphql-codegen/cli": "^1.13.1",
    "@graphql-codegen/import-types-preset": "^1.13.1",
    "@graphql-codegen/introspection": "1.13.1",
    "@graphql-codegen/typescript": "1.13.1"
  }
}

I noticed there were fields for main and types which seemingly had files being placed into the dist folder. So, I went back to my other tsconfig.json and set the following for paths.

"baseUrl": ".",
    "paths": {
  "@corp/common" : ["../common/dist"]
}

After doing that, I’m still seeing the same errors.

Admittedly, I’m very new to typescript and javascript and I’m not sure how to tackle the issue. Guidance would be very appreciated. Thank you.

AG-Grid v33+: JavaScript: Install via CDN, but don’t use CDN for themes

How do I use predefined themes in the theme builder when using CDNs?

Background

  • AG-Grid docs specify that it is acceptable to use a CDN for ag-grid-community.
  • AG-Grid 33+ errors when using < div class="ag-theme-balham" and recommends using the Theme API.
  • AG-Grid does not find themeBalham for gridOptions = {theme: <theme>} from the any CDNs that I tried:
<!-- AG-Grid + Styles -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<link  href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.min.css" rel="stylesheet">
<link  href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-balham.min.css" rel="stylesheet">