Prism: 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 [email protected] 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 [email protected] 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.

[mAAdhaTTah]

@Radiergummi No worries! The intention is to have users build their own Prism via the download page, which handles all of that for you. We did also update the Autoloader to work with CDNs, so that should also help with your use case.

[ctrleffive]

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.

Oh mann!! Saved my life.

[trungnhvn]

prismjs/components/prism-markup-templating.js

It works for me! Thank you so much.

[hsntngr]

@simpixelated

you are the hero we need