Client not working when importing CJS in ESM

[bidoubiwa]

In some circumstances the MeiliSearch packages was not importable.
It threw an error when trying to use it.

When does the problem occurs

When trying to import MeiliSearch in an es6 environments that imports the main package present in the package.json and not the module package, it imports the cjs version and not the esm.

This throws an error.

Exemple

Using NestJS :

import meilisearch from 'meilisearch'

const client = new meilisearch({
  host: '123'
})

const client = new meilisearch_1.default({
               ^

TypeError: meilisearch_1.default is not a constructor
...

What causes the problem

As explained in this comment.

your issue is due to the mismatch between how commonjs export stuff module.exports = something and how ES6 export stuff export default something.

To fix this it you just have to enable esModuleInterop in your tsconfig compile option, also enable allowSyntheticDefaultImports for typesystem compatibility

esModuleInterop was set as true in the tsconfig.json of the MeiliSearch packages but it was overide by the default typescript configuration of the rollup-typescript plugin.

As explained in this issue: ezolenko/rollup-plugin-typescript2#226

The default tsconfig option "include" is overridden by the index from the original tsconfig.json

Which in our case was not the incude option but the esModuleInterop option.

How to fix it

Overide the rollup default configuration using the tsconfigOverride in the plugin's option.

typescript({
    useTsconfigDeclarationDir: true,
    tsconfigOverride: {
      esModuleInterop: true,
    },
  }),

How to prevent it

We should make basic end-to-end tests on different environments (ESM, Node, Typescript, UMD,..) if the plugin is importable and usable.

[curquiza]

Well explained! Thanks and well done! 🎉 @bidoubiwa

[Flucadetena]

I case someone is having this problem and already has "esModuleInterop" in their "tsconfig.json". My solutions was to change the import thar inits meili from import MeiliSearch from "meilisearch"; to this import { MeiliSearch } from "meilisearch";

My problem occurred after updating using firebase functions with node 12. And going from meili: 0.16.1 to 0.18.1.
Hope it helps. ;)

[bidoubiwa]

Hey @Flucadetena. We made a breaking change in the 0.18.1 where
import { MeiliSearch } from "meilisearch is now the way to import meilisearch. Thanks a lot for answering this issue as it might help users come by here.
Here is the complete change log: https://github.com/meilisearch/meilisearch-js/releases/tag/v0.18.0