Prism: handlebars templates highlighting doesn't work

[neginbasiri]

`

import $ from 'jquery';

import Prism from 'prismjs/components/prism-core';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-markup-templating';

import 'prismjs/components/prism-handlebars';
import loadLanguages from 'prismjs/components/index.js';

export class StyleHighlighter {

  constructor(){

      loadLanguages(['handlebars']);
      Prism.highlightAll();


  }

}

new StyleHighlighter();

`

The error is showing:
Uncaught Error: Cannot find module './prism-markup'

Do you have a working version of latest handlbars template highlighting?

[mAAdhaTTah]

loadLanguages is intended for node usage. We recommend the babel plugin for usage with webpack and other bundlers. Please see the documentation for more details: https://prismjs.com/#basic-usage

We've gotten this issue a lot; where did you see the suggestion to use loadLanguages? I'd like to adjust that source so we can help avoid this confusion in the future.

[neginbasiri]

I am using node and webpack

[mAAdhaTTah]

By "node", do you mean "I'm running a node server and need to highlight on the server" or "I'm using node to run my build tools"?

[neginbasiri]

node to run my build tools,
node/webpack4/es6/React

[mAAdhaTTah]

Yeah, then you need to follow the webpack instructions in the documentation. Let me know if there's anything in there that's unclear.

[neginbasiri]

I followed the instruction and I get this error:

`
ERROR in ../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css 1:9
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type.

pre[class*="language-"].line-numbers {
| position: relative;
| padding-left: 3.8em;
@ ./scripts/style.guide.js 28:0-62
@ multi ../node_modules/webpack-dev-server/client?http://localhost:8080 ./scripts/style.guide.js
`

I already use MiniCssExtractPlugin.loader, css-loader, postcss-loader and sass-loader

wondering how to pass this error?

[mAAdhaTTah]

This is probably a result of how your webpack is configured. If the css loaders only include css files within the project (e.g. Ignoring node_modules), it'll ignore css dependencies and throw this error.

[agm1984]

I found a solution for stubbing CSS files: https://stackoverflow.com/a/41851815/6141025

You can use moduleNameMapper to map *.css to the stub:

./jest.config.js

{
    "moduleNameMapper": {
        "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
}

./__mocks__/styleMock.js

module.exports = {};

I was getting an error related to this issue and Prismjs:

    Details:

    .../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css:1
    pre[data-line] {
                   ^

    SyntaxError: Unexpected token '{'