manastalukdar / markdown-it-textual-uml Goto Github PK

Problem Statement

Importing this module in node 13 leads to ERR_REQUIRE_ESM error.

Description

Seems to be related to this:
nodejs/node#29492
'require' is no longer allowed when "type":"module" is set in package.json.

Platform

Node v13.3.0

Expected behavior

No error occurs.

Observed behavior

The following error occurs:

(node:5061) Warning: require() of ES modules is not supported.
require() of ./node_modules/markdown-it-textual-uml/src/plantuml-parser.js from ./node_modules/markdown-it-textual-uml/src/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename plantuml-parser.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ./node_modules/markdown-it-textual-uml/package.json.
internal/modules/cjs/loader.js:1163
      throw new ERR_REQUIRE_ESM(filename);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ./node_modules/markdown-it-textual-uml/src/plantuml-parser.js
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1163:13)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (./markdown-it-textual-uml/src/index.cjs:3:24)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14) {
  code: 'ERR_REQUIRE_ESM'
}

Steps to reproduce behavior

Import the package:

import MarkdownItTextualUml from 'markdown-it-textual-uml';

Run with node.

Other notes

This can be fixed by deleting the line

"type":"module"

from package.json.

Overview

Mermaid has a direct dependency on window.load event to start rendering. This is triggered when a page initially loads, or when the page is refreshed. In applications based on many javascript frameworks, entering a page using a router usually does not invoke the window.load event. As a result mermaid does not render the text definitions.

A workaround is to initialize mermaid using the (deprecated) mermaid.init() method and point it to a specific container. There are few disadvantages of this approach:

1. mermaid.init() is deprecated and kept around only for backwards compatibility. Their documentation clearly recommends not to use it.
2. If the goal is to render all containers in a page decorated with the class name mermaid, this approach does not work. It works only when the page contains a single container where the text definitions needs to be rendered.

There is a related issue in the mermaid repo.

This issue is to explore a solution to this behavior.

Potential Solutions

1. https://github.com/yuzutech/kroki
2. https://mermaid.ink

Update all npm packages to new versions.

This is just list of some offerings out there. Does not imply that the plugin will support any, or not.

• AsciiToSVG
• BlockDiag
  • BlockDiag
  • SeqDiag
  • ActDiag
  • NwDiag
• Ditaa
• Erd
• GraphViz
• Mermaid
• Msc
• PlantUML
• Shaape
• SvgBob
• Syntrax
• UMLet
• Vega
• Vega-Lite
• WaveDrom
• UMLGraph
• ariel-diagrams

References:

• https://asciidoctor.org/docs/asciidoctor-diagram/

Add types to mitigate: Could not find a declaration file for module.

Implement CI-CD pipelines with the following functionality. Consider using GitHub actions.

Committing code

• Code should be pushed into master only by using PRs. Disable direct push functionality into master.
• Disable PRs into master lacking reference to any issue.
• Disable commits and PRs into develop lacking reference to any issue.

Versioning of packages

Versioning of packages published by different branches:

• master deploys stable production code. latest tag should be used for the corresponding npm package.
• develop deploys under-development code. next tag should be used for the corresponding npm package.

Builds

Automated builds should be triggered on:

• Pushing code to develop.
• Creating new PR into develop.
• Creating new PR into master.

Deployments

Automated deployments should be triggered on:

• Successful build triggered by direct push of code into develop.
• Successful merge of a PR into develop.
• Successful merge of a PR into master.

Deployment pipeline should:

1. Tag the branch with the correct semantic version number. Investigate using some open-source automated semver tooling.
2. Create GitHub release. The Release text can be initially (and automatically) populated by issues (title and link) referenced by the direct push commit or the PR that just got merged in.
3. Publish package to npm.
   • On develop package should be tagged as next.
   • On master package should be tagged as latest.
   • Question: What about release candidates? rc tags? Which branch does this go from? Typically this goes from an intermediate release branch. How would this tie into the automation?

It is worth considering if steps 1, 2 and 3 above:

• should be automated by a deployment pipeline, or
• should be left as manual, or
• should be automated but manual deployments should also be allowed.

Status badges

CI/CD status badges should be provided in the README.md file for builds and deployments from both develop and master branches.

mermaid-js/mermaid#485

Step 1: Add the library

npm install @airbrake/browser

Step 2: Configure the library

(You can find your project ID and API key in your project's settings)

import { Notifier } from '@airbrake/browser';

const airbrake = new Notifier({
  projectId: <Your project ID>,
  projectKey: '<Your project API Key>',
  environment: 'production'
});

To test that Airbrake has been installed correctly in your project, open up the JavaScript console in your browser and paste in:

window.onerror("TestError: This is a test", "path/to/file.js", 123);

Visit our official GitHub repo for more info on alternative configurations and advanced options.