TypeError: Cannot read property 'tokenizePlaceholders' of undefined

[marc136]

Hello,

When I use version 1.14.0 in node.js, I get an undefined error (which is not present when I use 1.13.0)
I would guess it is a problem with the php component. Can someone reproduce it?

example:

const Prism = require('prismjs')
require('prismjs/components/prism-php')
require('prismjs/components/prism-python')

console.log('Available languages:')
console.log(JSON.stringify(Object.keys(Prism.languages)))

let code = 'just a string'
let lang = 'php'
lang = 'python'

console.log(`${lang}: "${Prism.highlight(code, Prism.languages[lang])}"`)

When I use prismjs@1.14.0 I receive this output:

Available languages:
["extend","insertBefore","DFS","markup","xml","html","mathml","svg","css","clike","javascript","js","php","python"]
D:\test\node_modules\prismjs\components\prism-php.js:121
                Prism.languages['markup-templating'].tokenizePlaceholders(env, 'php');
                                                     ^

TypeError: Cannot read property 'tokenizePlaceholders' of undefined
    at D:\test\node_modules\prismjs\components\prism-php.js:121:40
    at Object.run (D:\test\node_modules\prismjs\prism.js:456:5)
    at Object.highlight (D:\test\node_modules\prismjs\prism.js:287:11)
    at Object.<anonymous> (D:\test\problem.js:13:32)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)

If I remove the line require('prismjs/components/prism-php'), I get the desired output:

Available languages:
["extend","insertBefore","DFS","markup","xml","html","mathml","svg","css","clike","javascript","js","python"]
python: "just a string"

I also get the same output if I use prismjs@1.13.0 instead

Maybe it was introduced with #1367 ?

Regards,
marc

[mAAdhaTTah]

Related to #1395.

Also, you can use the new loadLanguages function added in #1359 to load the languages with the correct dependencies in Node. That PR has an example.

[marc136]

Thank you @mAAdhaTTah, that solves my problem.

Updated example:

const Prism = require('prismjs'),
    loadLanguages = require('prismjs/components/index')

loadLanguages(['php', 'python'])

console.log('Available languages:')
console.log(JSON.stringify(Object.keys(Prism.languages)))

let code = 'just a string'
let lang = 'php'
lang = 'python'

console.log(`${lang}: "${Prism.highlight(code, Prism.languages[lang])}"`)

[simpixelated]

For anyone who comes here and is not using node or Webpack, you have to include prismjs/components/prism-markup-templating.js before prismjs/components/prism-php.js to fix the error in this issue.

[wannamakeudance]

For anyone who comes here and is not using node or Webpack, you have to include prismjs/components/prism-markup-templating.js before prismjs/components/prism-php.js to fix the error in this issue.
it works! thx a lot!

[adamdoe]

For anyone who comes here and is not using node or Webpack, you have to include prismjs/components/prism-markup-templating.js before prismjs/components/prism-php.js to fix the error in this issue.

Thank you!

[avin-shum]

For anyone who comes here and is not using node or Webpack, you have to include prismjs/components/prism-markup-templating.js before prismjs/components/prism-php.js to fix the error in this issue.

It works! You saved my day!

[Radiergummi]

It would be really helpful if this was somehow visible in the docs. I just wasted fifteen minutes chasing down this error until stumbling upon the comment from @simpixelated ...

[mAAdhaTTah]

@Radiergummi We don't have documentation for "manually importing language definitions" generally. I'd be interested in knowing more about your use case for this so we could address it that way.

[RunDevelopment]

Isn't "manually importing language definitions" kind of a bad idea because you have to handle dependencies yourself? Isn't that one of the reasons we have the Autoloader?

Also, autoloader.loadLanguages is exposed since #1898, so if we were to add an option to disable to auto part of the Autoloader, we'd get a browser equivalent for loadLanguages = require('prismjs/components/index').

You could then use the Autoloader like this:

<script src="path/to/components/prism-core.min.js"></script>
<script src="path/to/plugins/autoloader/prism-autoloader.min.js"></script>
<script>
Prism.plugins.autoloader.enabled = false;
Prism.plugins.autoloader.loadLanguages(["php", "sql"], (languages) => {
    console.log("Finished loading languages");

    console.log('Available languages:');
    console.log(JSON.stringify(Object.keys(Prism.languages)));

    // use Prism as usual.
}, (erroredLanguage) => {
    console.log("Failed to load: " + erroredLanguage);
});
</script>

[mAAdhaTTah]

Isn't "manually importing language definitions" kind of a bad idea because you have to handle dependencies yourself?

Yes–this is why I'm interested in the use case that caused them to head in that direction and see why our current solutions didn't work.

[Radiergummi]

@mAAdhaTTah I have lots of cases for internal dashboards, an exception handler, quick one-off things in general, where I'll just include files using script tags from cdnjs, without ever using a build pipeline.
If you arrive on the prism.js website, it sounds as though it'd suffice to include prism, prism-php and the stylesheet to be good to go. The fact that the additional markup-templating and clike scripts are required isn't really obvious.

I wasn't aware of the autoloader though, so this is entirely my fault... I wasn't reading the documentation carefully enough. I'd like to apologize for the comment.