Error when calling nanoid in browser (from 5.0.5)

[TomPradat]

When calling nanoid from the browser, I get the following error in the console :

Here is a minimal repro :

import { nanoid } from "nanoid";

document.getElementById("app").innerHTML = `
<h1>Hello : ${nanoid()} </h1>
`;

https://codesandbox.io/p/devbox/tender-perlman-forked-9c35qx?embed=1&file=%2Fsrc%2Findex.mjs&showConsole=true

NB : If the error doesn't appear in the embed page console, open the main console

[lkaisers]

I just experienced the same issue. In my case it is inside a React app any only in watch mode (using Parcel).

[ai]

Ask Parcel team. Seems like there is something wrong with import support.

The example works fine in Vite or webpack.

[WilhelmYakunin]

Developers,

Paprcel delets ALL unused exports and imports during tree-shaking. This indicated in documention

This behaviour cased of deleting variable of urlAlphabet which actually is in use in generating nanoid.
Please visit this lines
https://github.com/ai/nanoid/blob/main/index.browser.js#L4
https://github.com/ai/nanoid/blob/main/index.browser.js#L6
https://github.com/ai/nanoid/blob/main/index.browser.js#L59

So because the urlAlphabet is not in use in the example the Parcel loses the file acronim name in bundle. Actually it seems as error during a load. I can show more detailes if you want to. But here I expilicetly use the 'urlAlphabet' variable and the nanoid is generated as expected.

However, I tend to see a problem of the common agreements betweeen the delovepers. Same name for imported variable while it is aslo exported in the same file is not forbiden in JS. But it can misconfused while static analisize is on.

@ai do you mind if create pull from my repo?

[ai]

@WilhelmYakunin great research. Can you send pull request? (PR UI is better for a few extra checks like benchmark and size limit)

[ai]

@WilhelmYakunin fixed the issue in 5.0.7.

[louh]

Hi all,
I've been facing this exact error since 5.0.5, with a Parcel build, and it still isn't fixed for me in 5.0.7. However, I'm a little stumped because my build works just fine locally and in a production environment (even before 5.0.7), but it only fails when building in a Cypress testing environment on GitHub actions. (If I run Cypress locally against my local build, it's fine.) I'm not seeing any differences in my configuration that would possibly be forcing Parcel to improperly or aggressively tree-shake in this one environment, but I might be missing something. Might there be anyone out there that has faced this same issue as well?

UPDATE:
I am still not sure just exactly what the difference is, but I changed our "start" command in CI from starting a development server to bundling specifically for production, and it is now fine.