RequireJS + Algolia Docsearch throws mismatched anonymous define()..error

Question

I am trying to implement Algolia Docsearch with MadCap Flare. Flare is a technical documentation tool that generates HTML output.

Docsearch's underlying crawler is configured and works properly in codepen. However, I am having an issue integrating it with Flare. Flare has a number of inbuilt scripts, which I cannot access or change, including require.js. I get a bunch of errors, Uncaught Error: Mismatched anonymous define() module.., when I run the build.

So to fix this, I gave a stab at loading the Docsearch js using require.js, which I am doing completely wrong. My JS knowledge is limited!

Html search input:

<div class="input-group">
    <input id="<YOUR_CSS_SELECTOR>"  type="text" class="form-control" placeholder="Search" aria-label="Search Field" aria-describedby="infoSearch" />
</div>

Original Algolia Docsearch CDN js and snippet is something like this:

<!-- Before the closing </body> -->
    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js">
    </script>
    <script>
    docsearch({
        apiKey: '<API_KEY>',
        indexName: '<INDEX_NAME>',
        inputSelector: '<YOUR_CSS_SELECTOR>',
        debug: false
    });
    </script>

So to load these scripts using require.js I have done the following:

<script type="text/javascript">
require.config({
    enforceDefine: true,
    paths: {
        "docSearch": "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
    },
    waitSeconds: 40
});
require(['docSearch']);//This is probably not doing anything.
</script>
<script>
docsearch({
    apiKey: '<API_KEY>',
    indexName: '<INDEX_NAME>',
    inputSelector: '<YOUR_CSS_SELECTOR>',
    debug: false
}); //This throws "Uncaught Reference Error docsearch is not defined" error
</script>

I looked at other threads/questions and require.js docs as well, but couldn't find something that could figure out. Any help/guidance would be great!

Sylvai Sylvai · Accepted Answer · 2019-03-18T15:15:39

I think you should include something like

    <script>
/* <![CDATA[ */

require.config( {
    paths: {
        "docsearchLib": "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min"
    }
}

);
require(["docsearchLib"], function(docsearch) {
    docsearch( {
        apiKey: '<API_KEY>', indexName: '<INDEX_NAME>', inputSelector: '<YOUR_CSS_SELECTOR>', debug: false,
    }
    );
}

);
/* ]]> */

</script>

You might want to have a look to https://docs.solace.com/, they are actually using DocSearch and require.js altogether

RequireJS + Algolia Docsearch throws mismatched anonymous define()..error

1 Answers