Symfony 3.4 - Webpack Encore and DOMPurify

Question

I'm trying to integrate DOMPurify into my Symfony project, but I keep getting

DOMPurify isn't defined

In my browser's console. In my app.js I have:

import '../scss/custom.scss';
import $ from 'jquery';
import DOMPurify from 'dompurify';

global.$ = global.jQuery = $;

window.Popper = require('popper.js');
require('bootstrap');

And in my template:

{% block js %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

<script type="text/javascript">
    $('form[name=search_full]').submit(function(event) {
        let search = $('input[name=search]');
        search.value = DOMPurify.sanitize(search.value);
    });
</script>

I'm not sure how to correctly integrate it into my project. Any ideas?

Answer 1

For anyone else having a similar issue, the solution appears to be adding the following line to your app.js file:

window.DOMPurify = require('dompurify');