TypeError: (0 , _nanoid.nanoid) is not a function on v3.3.1

[acelaya]

I have just installed latest nanoid (to replace the heavier uuid package on a webpack-based web app), and it seems to work fine at build time and runtime, but when running the tests with jest, it does not seem to properly resolve the module, resulting in TypeError: (0 , _nanoid.nanoid) is not a function.

I have seen this was already reported here #205, but I have tried every workaround proposed there and none of them seem to work now. Since that issue is a bit old, maybe the error is back with a different root cause this time.

I have also tried using jest's moduleNameMapper to manually map to one of the modules from this package. I have tried index.js, index.cjs, index.browser.js and index.browser.cjs, and also, none of them fix the error.

The errors can be seen here https://github.com/shlinkio/shlink-web-client/runs/5708689479?check_suite_focus=true

[ai]

How do you run your app to get this error?

Is it webpack app? What webpack version do you use?

Do you have this error in browser?

What is your webpack and jest config?

[acelaya]

I only get the error with jest. When building it with webpack, it works fine, both dev and prod builds.

I use webpack 5.70, and react-scripts, so the config is whatever they set.

For jest, I do the run myself, with this config https://github.com/shlinkio/shlink-web-client/blob/develop/jest.config.js

[ai]

Jest has an big. They hack Node.js resolver, but their resolver doesn't respect package.export which leads to errors like this.

[acelaya]

True, but that can usually be worked around by using jest's moduleNameMapper config option (you'll notice I'm already doing it for another package, reactstrap).

I have tried manually mapping all the files from this package (at least the ones on the root folder), and it still fails. Is there maybe some other way to map it that I might be missing?

[ai]

moduleNameMapper is not enough.

Try to create custom resolver jestjs/jest#9771 (comment)

[acelaya]

Thanks! I will give that a try

[acelaya]

Sadly it does not work with the resolver as it is defined in that comment. I have tried tweaking it a bit, with little success.

Now I'm trying to update to Jest 28 alpha, as supposedly, it now supports package exports. However, other errors are arising. I will report back here if I manage to make it work.

[nemosmithasf]

I have the same issue. I've found that the proposed work-around from the earlier thread works:

import { nanoid } from 'nanoid';

However

import { nanoid } from 'nanoid/non-secure';

does not work

[ai]

Seems like it should be fixed in Jest 28

[nemosmithasf]

@ai Just a heads up, the error I'm encounter was outside the context of Jest.

[billouboq]

Yep having same issue in webpack 5. non-secure has "nanoid" is not a function

[Matilop15]

@billouboq did you find the solution?

[billouboq]

Well I passed a name props so that portal does not call that nanoid function, so no more crash

[Matilop15]

Well I passed a name props so that portal does not call that nanoid function, so no more crash

The solution I found was not to use the latest version (4.x) and use a 3.x.x and that's it

[yatessss]

this works for me
facebook/create-react-app#11889 (comment)