TypeError: nanoid is not a function when using react native web and styled components about nanoid HOT 11 OPEN

It looks like a bug in package manager.

PostCSS already requires only 3.x branch. Package manager should not provide 4.x for PostCSS.

from nanoid.

I was actually mentioning about 3.x branch only and here it points out to ^3.3.6 specifically: https://github.com/postcss/postcss/blob/main/package.json#L82. Further, the issue is found in 3.3.6 only

from nanoid.

I got the reason (sorry, I missed with postcss/postcss#1727 where we had broken lock file)! 3.3.5 was broken. You just need to update to 3.3.6.

from nanoid.

But the issue seems to be caused on 3.3.6 itself and working fine on 3.3.5 if you check the attached repo for reproduction along with the lock file in the same repo. I guess there was some breaking change in the 3.3.6 release as compared to 3.3.5. I noticed that when I was using 3.3.6, I was getting the link to the file instead of the object exposed by it when using:

const { nanoid } = require('nanoid/no-secure')

I tried finding the diff between the 3.3.5 and 3.3.6 but couldn't find the later tag 🧐

from nanoid.

Also just to mention again, I had to downgrade to 3.3.5 to make the code work.

from nanoid.

Very strange. The issue of 3.3.5 that it was released without dual CJS+ESM support (only CJS files), which we do on publish state.

Maybe you have some issues with building ESM for RN?

from nanoid.

Unfortunatelly, I can’t help you in debug since I have no RN and iOS dev tools.

The best way to check content is Code tab

• https://www.npmjs.com/package/nanoid/v/3.3.6?activeTab=code
• https://www.npmjs.com/package/nanoid/v/3.3.5?activeTab=code

from nanoid.

Very strange. The issue of 3.3.5 that it was released without dual CJS+ESM support (only CJS files), which we do on publish state.

Maybe you have some issues with building ESM for RN?

This maybe possible, I'll check and update here by tomorrow with an update.

from nanoid.

Unfortunatelly, I can’t help you in debug since I have no RN and iOS dev tools.

The best way to check content is Code tab

• https://www.npmjs.com/package/nanoid/v/3.3.6?activeTab=code
• https://www.npmjs.com/package/nanoid/v/3.3.5?activeTab=code

Oh, got it. I'll try to figure out on my own then. Just FYI, the RN repo I shared uses expo internally so you can run the app on web to the least with couple of yarn commands if you want but anyways thanks for providing the details.

from nanoid.

So just in order to confirm the working, I imported the nanoid using the import statement side by side with the existing require statement as in the attached screenshot:

I noticed that while the import statement was working fine, the regular import didn't work.

I'll try further to figure out if my setup is unable to bundle the ESM because the same set up of styled components works with a React based app out of the box.

from nanoid.

This doesn't seem to work at the moment. I have added

"resolutions": {
"**/nanoid": "3.3.5"
}

into the package.json file of my root directory, yet I still get this error. It's been almost a week now, and I'm yet to get a fix. I'll be glad if anyone could be of help

from nanoid.