instance-oom/ngx-markdown-editor

Error: Module not found: Error: Can't resolve 'marked' in '***\node_modules\ngx-markdown-editor\fesm2020'

Tiberius-Flavius-Sinaricus-Leo opened this issue · 3 comments

Tiberius-Flavius-Sinaricus-Leo commented

Hello everyone,

I am using this library in an Angular project to build the MD editor and by running it seems to be fully functional without an error. However, during the unit test written in the spec.ts file, I keep getting the following error message:

./node_modules/ngx-markdown-editor/fesm2020/ngx-markdown-editor.mjs:7:0-28 - Error: Module not found: Error: Can't resolve 'marked' in '<path_to_the_project>\node_modules\ngx-markdown-editor\fesm2020'

17 07 2023 15:12:43.704:WARN [karma]: No captured browser, open http://localhost:9876/
17 07 2023 15:12:43.717:INFO [karma-server]: Karma v6.4.2 server started at http://localhost:9876/
17 07 2023 15:12:43.718:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
17 07 2023 15:12:43.732:INFO [launcher]: Starting browser Chrome
17 07 2023 15:12:44.313:INFO [Chrome 114.0.0.0 (Windows 10)]: Connected on socket m_9EaPCa6yLUHHq8AAAB with id 88750766
17 07 2023 15:12:44.351:WARN [web-server]: 404: /_karma_webpack_/main.js
Chrome 114.0.0.0 (Windows 10): Executed 0 of 0 SUCCESS (0.011 secs / 0 secs)
TOTAL: 0 SUCCESS

It seems that the ngx-markdown-editor package is trying to import the module marked, but it cannot find it in the specified path ('<path_to_the_project>\node_modules\ngx-markdown-editor\fesm2020').

I have added assets, styles, and scripts in my angular.json as told in the documentation, including adding <script src="/assets/ace-builds/ace.js"></script> to the index.html. I have also added these settings for the test in angular.json, as in the following:

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ace-builds/src-min",
                "output": "./assets/ace-builds/"
              }
            ],
            "styles": [
              "@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css"
            ],
            "scripts": [
              "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
              "node_modules/ngx-markdown-editor/assets/marked.min.js"
            ]
          }
        }

Do you have any suggestions about how this problem is caused and how may I fix it? Thanks in advance!

Tiberius-Flavius-Sinaricus-Leo commented

And by the way, I have tried the following attempts, but none can fix the issue.

  1. Add <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.7.0/marked.min.js" integrity="sha256-0Ed5s/n37LIeAWApZmZUhY9icm932KvYkTVdJzUBiI4=" crossorigin="anonymous"></script> to index.html.
  2. Add import marked from 'marked' directly in ./node_modules/ngx-markdown-editor/fesm2020/ngx-markdown-editor.mjs.
  3. Manually install the marked package. By doing this I received a different error message:
./node_modules/ngx-markdown-editor/fesm2020/ngx-markdown-editor.mjs:719:27-42 - Error: export 'default' (imported as 'marked') was not found in 'marked' (possible exports: Hooks, Lexer, Marked, 
Parser, Renderer, Slugger, TextRenderer, Tokenizer, defaults, getDefaults, lexer, marked, options, parse, parseInline, parser, setOptions, use, walkTokens)

./node_modules/ngx-markdown-editor/fesm2020/ngx-markdown-editor.mjs:906:19-25 - Error: export 'default' (imported as 'marked') was not found in 'marked' (possible exports: Hooks, Lexer, Marked, 
Parser, Renderer, Slugger, TextRenderer, Tokenizer, defaults, getDefaults, lexer, marked, options, parse, parseInline, parser, setOptions, use, walkTokens)


17 07 2023 14:10:20.938:WARN [karma]: No captured browser, open http://localhost:9876/
17 07 2023 14:10:20.951:INFO [karma-server]: Karma v6.4.2 server started at http://localhost:9876/
17 07 2023 14:10:20.951:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
17 07 2023 14:10:20.954:INFO [launcher]: Starting browser Chrome
17 07 2023 14:10:21.543:INFO [Chrome 114.0.0.0 (Windows 10)]: Connected on socket 9tbRadIuJvr14r6VAAAB with id 38210786
17 07 2023 14:10:21.581:WARN [web-server]: 404: /_karma_webpack_/main.js
Chrome 114.0.0.0 (Windows 10): Executed 0 of 0 SUCCESS (0.01 secs / 0 secs)
TOTAL: 0 SUCCESS
Tiberius-Flavius-Sinaricus-Leo commented

Replacing "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js" with "node_modules/ace-builds/src/ace.js" in the test section of angular.json seems to be a fix for my problem.

bohrasankalp commented

Did you solve this issue?