Wrong "import" in UMD bundle of UMD package

[stereobooster]

I converted itemsjs to ES modules and use microbundle to bundle it for npm. ES bundle works ok. But umd bundle throws an error

Uncaught TypeError: u.default is not a function

I checked generated UMD, it seems u.default is referring to lunr. lunr itself is published as UMD. I guess this is an issue, but hard to tell

git clone https://github.com/stereobooster/itemsjs
git checkout js
npm ci
npm run build

Related: itemsapi/itemsjs#135

[rschristian]

That shouldn't be an issue, so long as lunr is distributed/attached to the window with that name.

Are you importing lunr before itemsjs? You seem to have left out the actual reproduction of the issue.

[stereobooster]

Sorry, my bad. I should have posted it right away.

git clone https://github.com/stereobooster/itemsjs
git checkout js-umd-bug
npm ci
npm run build
open bug.html

Reproduction is basically this:

    <script src="./dist/index.umd.js"></script>
    <script>
      var configuration = { searchableFields: ['name'] };
      var rows = [{ name: 'name' }];
      itemsjs(rows, configuration);
    </script>

And error in console is

Uncaught TypeError: u.default is not a function
    e fulltext.js:11
    <anonymous> index.js:7
    <anonymous> bug.html:13

[rschristian]

You don't load any of the dependencies, lunr or otherwise. The error is saying that it doesn't exist.

Did you intend to inline all deps into your bundle? If so, you can set --external none or move all dependencies into devDependencies. Microbundle will only inline devDependencies by default, the rest are expected to exist (via node_modules or, as in this case, a <script>)

[stereobooster]

Oh. I didn't realized that. Thank you. I will try it

[rschristian]

Just to clarify, in UMD, dependencies are expected to exist on the global -- window.lunr and the like. Without inlining, this means that script needs to be loaded first, like this:

<script src="./lunr.js"></script>
<script src="./my-lib.js"></script>

And so on for every dep. this allows them to attach to the global, and your script to access them after they've done so.

lunr is simply the one that gets accessed first, from the sounds of it. They'd all fall over in the same way.

[stereobooster]

Yeah I got it. Thanks. As soon as you wrote, about dependencies it all clicked. It totally makes sense, I just haven't thought of it earlier

[stereobooster]

Everything works as expected. Thank you for the help

[rschristian]

Glad to hear it! Let me know if you run into any further issues.