Angular compilation when importing ngx-markdown 'Error: export 'Renderer' (reexported as 'MarkedRenderer') was not found in 'marked' (module has no exports)'

[thomaspeugeot]

context 1: importing ngx-markdown into gongmarkdown

ngx-markdown is used for developping a go+ng fullstack application that display a markdown document

https://github.com/fullstack-lang/gongmarkdown

In this application, the <markdown> component is composed nicely. So far, so good.

Result below:

context 2: importing gongmarkdown into gongfly, another component

gongmarkdown is then imported into another component named 'gongfly', a basic simulation

https://github.com/fullstack-lang/gongfly

Problem: there is an ng compilation error 'Error: export 'Renderer' (reexported as 'MarkedRenderer') was not found in 'marked' (module has no exports)'

issue reproduction

clone gongfly on the branch of interest

git clone -b thomaspeugeot_issue9 https://github.com/fullstack-lang/gongfly

perform the compilation with node 16 and angular 13

cd gongfly/ng; npm i; ng build

./node_modules/ngx-markdown/fesm2015/ngx-markdown.mjs:5:0-52 - Error: export 'Renderer' (reexported as 'MarkedRenderer') was not found in 'marked' (module has no exports)       
./node_modules/ngx-markdown/fesm2015/ngx-markdown.mjs:85:20-28 - Error: export 'Renderer' (imported as 'Renderer') was not found in 'marked' (module has no exports)
./node_modules/ngx-markdown/fesm2015/ngx-markdown.mjs:110:21-27 - Error: export 'marked' (imported as 'marked') was not found in 'marked' (module has no exports)

initial investigation & question

There is a closed issue on markedjs that suggests

markedjs/marked#1692 (comment)

Use import { marked } from 'marked' like the error says marked doesn't have a default export.

since I do not import marked (this is ngx-markdown that imports marked), I do not know how to proceed. Any idea ?

[thomaspeugeot]

I started from scratch and the bug vanishes.... (see branch thomaspeugeot_issue10)

[simeyla]

I had this exact same issue trying to copy https://github.com/syabru/ngx-markdown fork to run locally.
I updated to marked 4 and got this exact error.

Hitting F12 would go to the correct place and nothing made sense.
In the end I ended up with this:

// marked-renderer.ts
export { Renderer as MarkedRendererX } from 'marked';

Which for some crazy reason worked.

I also had to change MarkedRenderer to MarkedRendererX<string> because it otherwise defaults to 'never'.

Still no clue why that worked as there didn't seem to be any other naming conflict.

[Naikno]

I have the same issue here with angular 15 building for production.

[aarhusgregersen]

I recently had this upgrading to Angular 15, but turns out I was just sloppy.
If you follow the documentation for ngx-markdown (https://www.npmjs.com/package/ngx-markdown) you can see that they updated it to include a dependency marked that we need to install. Installing it and its types quelched the error for me 👍🏻

[thugcee]

I have the same error after migrating my application to Angular 15. marked and @types/marked are installed in proper versions. I've tried many proposed solutions and some of my own and nothing helps. I've checked configuration 10 times and everything seems to be right. It's a big app with many dependencies and after migration only this one problem is left.

The exact errors are:

./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs:8:0-52 - Error: export 'Renderer' (reexported as 'MarkedRenderer') was not found in 'marked' (module has no exports)

./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs:127:31-39 - Error: export 'Renderer' (imported as 'Renderer') was not found in 'marked' (module has no exports)

./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs:141:20-28 - Error: export 'Renderer' (imported as 'Renderer') was not found in 'marked' (module has no exports)

./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs:236:72-80 - Error: export 'Renderer' (imported as 'Renderer') was not found in 'marked' (module has no exports)

./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs:331:20-38 - Error: export 'marked' (imported as 'marked') was not found in 'marked' (module has no exports)

./node_modules/ngx-markdown/fesm2020/ngx-markdown.mjs:331:62-74 - Error: export 'marked' (imported as 'marked') was not found in 'marked' (module has no exports)

The above line numbers are not corresponding to any imports. Errors seem to be not matching the given file.

Any idea how to troubleshoot this problem?

[jfcere]

Hi @thugcee,

The above line numbers are not corresponding to any imports. Errors seem to be not matching the given file.

Try deleting the .angular cache folder at the root of the project and rebuild the application to see if it fixes the issue.

Otherwise, post your package.json file aussi I can see what dependencies you are using.

[thugcee]

Try deleting the .angular cache folder at the root of the project and rebuild the application to see if it fixes the issue.

I've already done this. Problem has been reproduced on separate machines starting from git clone.

Here is the package.json. Beside dependencies there are only metadata and few script aliases.

{
  "dependencies": {
    "@angular/animations": "^15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",
    "@angular/elements": "^15.2.9",
    "@angular/forms": "^15.2.9",
    "@angular/material": "^15.2.9",
    "@angular/material-moment-adapter": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "^15.2.9",
    "@angular/pwa": "^15.2.9",
    "@angular/router": "^15.2.9",
    "@angular/service-worker": "^15.2.9",
    "@fortawesome/fontawesome-free": "5.13.0",
    "@ngx-translate/core": "^14.0.0",
    "@swimlane/dragula": "3.8.0",
    "@swimlane/ngx-dnd": "9.0.0",
    "@types/hammerjs": "^2.0.36",
    "@types/lodash": "4.14.195",
    "@types/uuid": "3.4.4",
    "ace-builds": "1.4.2",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "angular-auth-oidc-client": "^15.0.5",
    "antlr4ts": "^0.5.0-alpha.3",
    "assert": "^2.0.0",
    "bootstrap": "^4.3.1",
    "brace": "^0.11.1",
    "convert-units": "^3.0.0-beta.5",
    "core-js": "3.25.5",
    "crypto-js": "^4.0.0",
    "deepmerge": "^3.3.0",
    "dom-autoscroller": "^2.3.4",
    "dotize": "0.3.0",
    "file-saver": "^1.3.8",
    "hammerjs": "^2.0.8",
    "highcharts": "10.1.0",
    "highcharts-angular": "3.0.0",
    "highcharts-custom-events": "^3.0.10",
    "html2pdf.js": "^0.10.1",
    "image-capture": "^0.4.0",
    "jquery": "^3.4.1",
    "jsonpath": "^1.0.2",
    "jspdf": "2.3.1",
    "lodash": "^4.17.21",
    "marked": "^4.3.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.28",
    "ngx-color-picker": "^14.0.0",
    "ngx-cookie-service": "^3.0.3",
    "ngx-device-detector": "5.0.1",
    "ngx-indexed-db": "^12.0.0",
    "ngx-markdown": "^15.1.2",
    "photoswipe": "^4.1.3",
    "primeicons": "6.0.1",
    "primeng": "^15.4.1",
    "quagga": "0.12.1",
    "quill": "^1.0.0",
    "rete": "^1.5.2",
    "rete-angular-render-plugin": "^0.3.0",
    "rete-connection-plugin": "^0.9.0",
    "rete-vue-render-plugin": "^0.5.0",
    "rxjs": "~7.8.0",
    "simplebar": "5.1.0",
    "svg.js": "^2.7.1",
    "svg2pdf.js": "^2.2.1",
    "systemjs": "^0.21.3",
    "tslib": "^2.3.0",
    "uuid": "3.3.3",
    "xlsx": "^0.15.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.9",
    "@angular-devkit/core": "^15.2.9",
    "@angular-eslint/builder": "^15.2.1",
    "@angular-eslint/eslint-plugin": "^15.2.1",
    "@angular-eslint/eslint-plugin-template": "^15.2.1",
    "@angular-eslint/schematics": "^15.2.1",
    "@angular-eslint/template-parser": "^15.2.1",
    "@angular/cli": "~15.2.9",
    "@angular/compiler-cli": "~15.2.9",
    "@angular/language-service": "^15.2.9",
    "@types/jasmine": "~4.3.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jsonpath": "^0.2.0",
    "@types/marked": "^4.0.8",
    "@types/node": "~12.11.1",
    "@typescript-eslint/eslint-plugin": "5.59.8",
    "@typescript-eslint/parser": "5.59.8",
    "antlr4ts-cli": "^0.5.0-alpha.3",
    "codelyzer": "^6.0.0",
    "copyfiles": "^2.3.0",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-prettier": "^4.2.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^15.2.2",
    "popper.js": "^1.16.0",
    "prettier": "^2.8.4",
    "prettier-eslint": "^15.0.1",
    "protractor": "~7.0.0",
    "renamer": "^2.0.1",
    "ts-node": "^8.0.2",
    "tsickle": "0.39.1",
    "typescript": "~4.9.5",
    "versiony": "^2.0.1",
    "wrench": "^1.5.9"
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES2022",
    "module": "es2015",
    "esModuleInterop": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "*": [
        "./node_modules/*"
      ]
    },
    "useDefineForClassFields": false
  }
}

and npm list

$ npm list @types/marked marked ngx-makrdown
sample_app@0.0.0
├── @types/marked@4.0.8
├── marked@4.3.0
└─┬ ngx-markdown@15.1.2
  ├── @types/marked@4.0.8 deduped
  └── marked@4.3.0 deduped

[thugcee]

It looks like removing

    "paths": {
      "*": [
        "./node_modules/*"
      ]
    },

from tsconfig.json solved the problem.