how to fix Error in render "TypeError: (0 , _components.default) is not a function"

[steven-lury]

I'm using Vuejs & webpack. I installed markdown-it.js & markdown-it-prism together and use them inside MEditor.vue
Inside MEditor.vue I have like this:

<script>
 import MarkdownIt from 'markdown-it'
 import prism from 'markdown-it-prism'
 import AutoSize from 'autosize'
 import "prismjs/components/prism-clike"
 import "prismjs/components/prism-java"
 import "prismjs/components/prism-php"
 import "prismjs/components/prism-javascript"
 const md = new MarkdownIt();
 md.use(prism);
 export default {
  // ...
  computed: {
       preview() {
         return md.render(this.body)
       }
 }

when I write php public function foo() { return false; } I get errors below:
[Vue warn]: Error in render: "TypeError: (0 , _components.default) is not a function"
at loadPrismLang (app.js:36167)
at selectLanguage (app.js:36206)
at highlight (app.js:36232)
at Object.markdownit.options.highlight (app.js:36280)
at Object../node_modules/markdown-it/lib/renderer.js.default_rules.fence (app.js:38275)
at Renderer../node_modules/markdown-it/lib/renderer.js.Renderer.render (app.js:38551)
at MarkdownIt../node_modules/markdown-it/lib/index.js.MarkdownIt.render (app.js:37560)
at VueComponent.preview (app.js:16085)
at Watcher.get (app.js:63325)
at Watcher.evaluate (app.js:63430)

[jGleitz]

Hi @steven-lury, thanks for reporting this! At first glance, this looks like a bug in markdown-it-prism. However, I will need to investigate to tell you more. Is your code in some repository that I could use to debug this?

I am quite busy at the moment, so please excuse if it takes a little longer until you hear back. I’ll try to investigate as soon as I find the time.

[steven-lury]

@jGleitz Hi. Thanks for your reply. Sure myProjec available.

[GrimmKull]

Hi @jGleitz and @steven-lury I've encountered the same problem. Managed to make a workaround as in #28 by adding imports for all languages I need:

import "prismjs/components/prism-bash"
import "prismjs/components/prism-json"
import "prismjs/components/prism-go"
import "prismjs/components/prism-clike"
import "prismjs/components/prism-javascript"
import "prismjs/components/prism-java"

Unfortunately there is still a problem of unimported or unsupported languages. After some googling found this link:

https://youtrack.jetbrains.com/issue/KTOR-1331

stating:

The react-scripts uses webpack 4.44.2 that will wrongly resolve the above path to node_modules/prismjs/components.js instead of node_modules/prismjs/components/index.js because of a bug. Since file components.js does exist, require will return the exported object from that file. We cannot call an object as a function, therefore TypeError.

Hope this helps.

[jGleitz]

@GrimmKull do I understand you correctly, that

1. importing the dependent languages in the right order fixes the problem completely for you, and
2. if dependent languages are not imported correctly, you get the TypeError due to a bug in webpack?

@steven-lury does that help you fix the issue?

[GrimmKull]

@jGleitz Not completely. Only if I do not use any other language other than the ones listed and if I do not make a mistake like typing jsn instead of json. The problem that _components resolves to an object which creates the error in line 47 of markdown-it-prism/build/index.js:

(0, _components.default)([lang]);

Tried 2 more things today and this works well enough for me:

1. Made sure to explicitly fallback to clike for all unimported languages in markdown-it-prism/build/index.js:

if (langObject === undefined) {
	// (0, _components.default)([lang]);
	// langObject = _prismjs.default.languages[lang];
	langObject = _prismjs.default.languages['clike'];
}

2. In my code made sure default language is set:

let md = new MarkdownIt().use(MarkdownItPrism, {defaultLanguage: 'clike'})

This takes care of both missing imports and unsupported languages.

[jGleitz]

@GrimmKull the second option is how this plugin is meant to be used if you need a fallback. Hence, I will go ahead and close this issue. Please feel free to open another issue if you have further suggestions for improvement!