TypeError: nanoid is not a function when using react native web and styled components
eshankvaish opened this issue · comments
This seems to be related to postcss/postcss#1727. So I was using react native on the web along with styled-components that use postcss. While everything was working as expected on Android and iOS but each time I tried using the app on the web, I kept on getting the error nanoid is not a function at https://github.com/postcss/postcss/blob/main/lib/input.js#L58. Upon debugging, I figured out that the nanoid version 3.3.6 was causing the issue due to breaking CJS support probably as mentioned in #422 as well. Upon adding the following resolutions to my package.json file, the error was finally resolved:
"resolutions": {
"**/nanoid": "3.3.5"
}Here is the link to a sample repository to reproduce the issue: https://github.com/eshankvaish/nanoid-issue and how I fixed the issue: https://github.com/eshankvaish/nanoid-issue/pull/1.
It looks like a bug in package manager.
PostCSS already requires only 3.x branch. Package manager should not provide 4.x for PostCSS.
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
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.
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 🧐
Also just to mention again, I had to downgrade to 3.3.5 to make the code work.
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?
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
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.
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
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.
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.
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