importing prism-php package breaks other packages

Information:

• Prism version: 1.23.0
• Plugins: line-numbers
• Environment: webpack

Description

Currently importing scripts in webpack ( due to the failure of the babel plugin ) as follows:

// settings
module.exports = {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    },
    copyright: '©2020 Percipio.London',
    entry: {
        'app': [
            'prismjs',
            'prismjs/components/prism-bash', 
            'prismjs/components/prism-css', 
            'prismjs/components/prism-docker', 
            'prismjs/components/prism-git', 
            'prismjs/components/prism-graphql', 
            'prismjs/components/prism-javascript', 
            'prismjs/components/prism-json', 
            'prismjs/components/prism-markdown', 
            'prismjs/components/prism-markup', 
            'prismjs/components/prism-sql', 
            'prismjs/components/prism-twig', 
            'prismjs/components/prism-typescript', 
            'prismjs/components/prism-yaml',
            //'prismjs/components/prism-php', 
            'prismjs/plugins/line-numbers/prism-line-numbers',
            '../src/fonts/open-sans-regular.woff',
            '../src/fonts/open-sans-regular.woff2',
            '../src/fonts/open-sans-italic.woff',
            '../src/fonts/open-sans-italic.woff2',
            '../src/fonts/open-sans-600.woff',
            '../src/fonts/open-sans-600.woff2',
            '../src/fonts/open-sans-700.woff',
            '../src/fonts/open-sans-700.woff2',
            '../src/fonts/open-sans-800.woff',
            '../src/fonts/open-sans-800.woff2',
            '../src/fonts/source-code-pro-regular.woff',
            '../src/fonts/source-code-pro-regular.woff2',
            '../src/js/app.ts',
            '../src/js/assets/icons.js',
            '../src/css/tailwind-base.pcss',
            '../src/css/tailwind-components.pcss',
            '../src/css/tailwind-utilities.pcss',
            '../src/css/app-components.pcss',
            '../src/css/app-utilities.pcss',
            '../src/css/vendor.pcss',
        ],
        'lazysizes-wrapper': '../src/js/utils/lazysizes-wrapper.ts',
    },
    extensions: ['.ts', '.js', '.vue', '.json'],
    name: 'percipio.london',
    paths: {
        dist: '../../cms/web/dist/',
    },
    urls: {
        criticalCss: 'https://sandbox.percipio.london/',
        publicPath: () => process.env.PUBLIC_PATH || '/dist/',
    },
};

You see the imports, and prism-php being commented out. Prism works fine ( loading with Prism.highlightAll() ) - inside of a Vue app:

mounted() {
            window.addEventListener('load', () => {
                Prism.highlightAll();
            })
        }

Code highlighting works as expected, line numbers show up.

Now the odd case: The moment prism-php is uncommented and brought into play, the code highlighting breaks completely. No elements added inside of the code block ( can’t find any spans or classes with tokens or whatsoever )

If I use Twig/CSS/Javascript/Docker/Git/GraphQL … they all work perfect, they all break once prism-php is added into play.

Without the php package

With the php package

I can’t find any errors in the console or in the buildchain whatsoever which could explain what is going on.

[jazanne]

This happens to me too - i’m vendoring PrismJS 1.26. It’s not an issue when i use 1.1.x of this plugin, but when I update to 1.2.x it breaks

Error

Error in function eval in ./.yarn/cache/prismjs-npm-1.26.0-15be1ab06b-6de058930c.zip/node_modules/prismjs/components/prism-php.js:339
Cannot read properties of undefined (reading 'tokenizePlaceholders')

./.yarn/cache/prismjs-npm-1.26.0-15be1ab06b-6de058930c.zip/node_modules/prismjs/components/prism-php.js:339
Open in Editor
  337 |
  338 | 	Prism.hooks.add('after-tokenize', function (env) {
> 339 | 		Prism.languages['markup-templating'].tokenizePlaceholders(env, 'php');
  340 | 	});
  341 |
  342 | }(Prism));

[michtio]

I can already confirm:

    entry: {
        'app': [
            'prismjs',
            'prismjs/components/prism-markup-templating', 
            'prismjs/components/prism-bash', 
            'prismjs/components/prism-css', 
            'prismjs/components/prism-docker', 
            'prismjs/components/prism-git', 
            'prismjs/components/prism-graphql', 
            'prismjs/components/prism-javascript', 
            'prismjs/components/prism-json', 
            'prismjs/components/prism-markdown', 
            'prismjs/components/prism-markup', 
            'prismjs/components/prism-sql', 
            'prismjs/components/prism-twig', 
            'prismjs/components/prism-typescript', 
            'prismjs/components/prism-yaml',
            'prismjs/components/prism-php', 
            'prismjs/plugins/line-numbers/prism-line-numbers',
            '../src/fonts/open-sans-regular.woff',
            '../src/fonts/open-sans-regular.woff2',
            '../src/fonts/open-sans-italic.woff',
            '../src/fonts/open-sans-italic.woff2',
            '../src/fonts/open-sans-600.woff',
            '../src/fonts/open-sans-600.woff2',
            '../src/fonts/open-sans-700.woff',
            '../src/fonts/open-sans-700.woff2',
            '../src/fonts/open-sans-800.woff',
            '../src/fonts/open-sans-800.woff2',
            '../src/fonts/source-code-pro-regular.woff',
            '../src/fonts/source-code-pro-regular.woff2',
            '../src/js/app.ts',
            '../src/js/assets/icons.js',
            '../src/css/tailwind-base.pcss',
            '../src/css/tailwind-components.pcss',
            '../src/css/tailwind-utilities.pcss',
            '../src/css/app-components.pcss',
            '../src/css/app-utilities.pcss',
            '../src/css/vendor.pcss',
        ],
        'lazysizes-wrapper': '../src/js/utils/lazysizes-wrapper.ts',
    },

All these entry points ( with prism-markup-templating added, do work for php now )

not using those entrypoints and relying on babel:

import { createStore } from './stores/store.js';

import Prism from 'prismjs';
Prism.highlightAll();

// App main
const site = async () => {
    // Async load the vue module
    const [ Vue ] = await Promise.all([
        import(/* webpackChunkName: "vue" */ 'vue'),
    ]).then(arr => arr.map(({ default: defaults }) => defaults));

    const store = await createStore(Vue);

    const vm = new Vue({

        el: '#page-container',
        store,
        components: {
            'navigation--main': () => import(/* webpackChunkName: "navigation--main" */ '../vue/organisms/navigations/navigation--main.vue'),
            'notification--cookie': () => import(/* webpackChunkName: "notification--cookie" */ '../vue/molecules/notifications/notification--cookie.vue'),
        },

        data: () => ({}),

        methods: {

            // Pre-render pages when the user mouses over a link
            // Usage: <a href="" @mouseover="prerenderLink">
            prerenderLink: function (e : Event) {
                const head = document.getElementsByTagName("head")[0];
                const refs = head.childNodes;
                const ref = refs[refs.length - 1];

                const elements = head.getElementsByTagName("link");
                Array.prototype.forEach.call(elements, function (el, i) {
                    if (("rel" in el) && (el.rel === "prerender")) {
                        el.parentNode.removeChild(el);
                    }
                });

                if (ref.parentNode && e.currentTarget) {
                    const target : HTMLAnchorElement = <HTMLAnchorElement>e.currentTarget;
                    const prerenderTag = document.createElement("link");
                    prerenderTag.rel = "prerender";
                    prerenderTag.href = target.href;
                    ref.parentNode.insertBefore(prerenderTag, ref);
                }
            },

            printPage() {
                window.print();
            }

        },

        mounted() {
            window.addEventListener('load', () => {
                //Prism.highlightAll();
            })
        }

    })
};

// Execute async function
site().then( (value) => {
});

// Accept HMR as per: https://webpack.js.org/api/hot-module-replacement#accept
if (module.hot) {
    module.hot.accept();
}

with the above babel config, doesn’t highlight the code.