How to use NPM packages with esbuild?

[Arjan]

I've seen the threads saying we need a bundler to use NPM packages in a Zotero plugin, and Emiliano recommended esbuild for this. This worked for React, but now that I'm trying to use a package inside a component I run into problems. I've looked at what zotero-better-bibtex does, but the setup is quite different so I'm not sure what I need.

Here's my setup:

``` package.json

{

    "scripts": {
        "build": "node build.mjs"
    },

}

```

``` build.mjs

import * as esbuild from 'esbuild';

await esbuild.build({
    entryPoints: ['src/lib.js'],
    bundle: true,
    format: 'iife', // iife, cjs, esm?
    target: ['firefox60'], // needed?
    external: [ 'react', 'react-dom', 'react-select' ], // react and react-dom work without this
    loader: { '.js': 'jsx' },
    outfile: 'out.js',
});

```

``` MyComponent.js

import { useState } from "react";

import Select from 'react-select'

function MyComponent(props) {

...

  return (

    <div>

      <Select options={myoptions} />

    </div>

  );

}

```

This component works without the react-select part, but with it I get "TypeError: _this.container is undefined". I've tried various combinations of settings in build.mjs, but no luck, and not sure what it is supposed to look like. Any suggestions?