Multiple issues when using umd file

Disclaimer

🙋‍♀️ I’m so sorry if I missed something really obvious in JS to remove these errors, but I’m stuck…

With v0.11.0

In my index.html

<script src="https://cdn.jsdelivr.net/npm/meilisearch@0.11.0/dist/bundles/meilisearch.umd.js"></script>

I get in the console:

ReferenceError: require is not defined
    <anonyme> https://cdn.jsdelivr.net/npm/meilisearch@0.11.0/dist/bundles/meilisearch.umd.js:5

NB

No error message with:

<script src="https://cdn.jsdelivr.net/npm/meilisearch@0.10.1/dist/bundles/meilisearch.umd.js"></script>

With v0.10.1 (I use it because the v0.11.0 does not work)

I know this version is outdated but maybe there is the same issue in the v0.11.0 too.

In my index.html file:

<script src="https://cdn.jsdelivr.net/npm/meilisearch@0.11.0/dist/bundles/meilisearch.umd.js"></script>
<script src="./src/app.js"></script>

In .src/app.js

const meiliClient = new Meilisearch({
  host: 'http://127.0.0.1:7700',
  apiKey: 'masterKey'
})

I get this error in the console:

TypeError: instance is undefinedmeilisearch.umd.js:151:17
    MeiliAxiosWrapper https://cdn.jsdelivr.net/npm/meilisearch@0.10.0/dist/bundles/meilisearch.umd.js:151
    Meilisearch https://cdn.jsdelivr.net/npm/meilisearch@0.10.0/dist/bundles/meilisearch.umd.js:1098
    <anonyme> file:///Users/curquiza/.../src/app.js:69

Plus, you can notice I had to write new Meilisearch to get it worked (and not new MeiliSearch) which is really confusing comparing with the Getting Started.

Conclusion

These issues have to be fixed:

• The UMD file should be importable in an HTML (see the first point)
• The UMD file should be usable in a vanilla JS file passed as a script in an HTML file (see the second point)
• Meilisearch has to be renamed into MeiliSearch in the UMD file
• Add tests to check both of the first points if this is possible 😇

[bidoubiwa]

The reason why it was not importable between two version is because an overwrite of the umd bundle with the cjs bundle was done in rollup.config.js. This has been fixed.

For the next version this is how import will work in the client:

How to import MeiliSearch in v0.11.1 >

Node - CommonJs

const MeiliSearch = require('meilisearch')

Browser - vanilla JS

<script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.browser.js"></script>
<script>
  const client = new window.Meiliearch({
    host: 'http://127.0.0.1:7700',
    apiKey: 'masterKey',
  })
  client.listIndexes().then(res => {
    console.log({ res });
  })

EcmaScript module - esm

import MeiliSearch from 'meilisearch'

Important, if your bundler uses browser as primary entry key, please change it to module. Example in webpack:

resolve: {
    mainFields: ["module", "browser"] // the `module` field has priority on the browser field
  },

EcmaScript module Typescript - esm

import MeiliSearch, { Index, SearchResponse } from 'meilisearch'

[bidoubiwa]

To make it work with the UMD of the v0.10.1 you should add the axios CDN like this (order is important):

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meilisearch@0.10.1/dist/bundles/meilisearch.umd.js"></script>

<script>
  console.log(window.Meilisearch);
  const client = new window.Meilisearch({
    host: 'http://127.0.0.1:7700',
    apiKey: 'masterKey',
  })
  client.listIndexes().then(res => {
    console.log({ res });

  })
</script>