Today I learnt
- #nextjs
- #rollup
Today was a horrible day. I spent around 6-8 hours on this saturday struggling to import a component from a library.
TLDR If you are exporting commonjs files in your library, suffix them with the .cjs extension instead of a .js extension. Yes, i am looking at you - index.js
The world of module loading in javascript is still a nightmare and I had another misfortune to have to deal with it today. Here's how it all went down.
I built a design system library with some react components and utility functions. I use the library, with a gatsby app, import components, utilities etc and everything works like a charm.
I was experimenting with next.js for my next project (no pun intended). I try to import the same library and I get an error
Cannot use import statement outside a module
So I do what every sane/insane developer does - ask google for help. Because, contrary to popular opinion/expecations, I wasnt born knowing how to figure out everything.
This leads me to a manhunt of all sorts.
- Upgrading nodejs to v14 which led me to
[ERR_REQUIRE_ESM]: Must use import to load ES Module
. - Adding a
type: module
to my library package.json - Switching from webpack to rollup - because thats what the cool kids are doing these days.
- Re-learning how to configure rollup with babel so it can understand jsx
- Learning that you have to explicitly ask rollup to not bundle node_modules in your library(What!)
- And then finally realizing that I my dist folder should have a file called
index.cjs
instead ofindex.js
for the commonjs bundle. And instead of usingimport
my app, I must use require. It seems like the issue is because nextjs tried to do a server side render even though node14 is fully capable of using imports, for some strange reason, the package.json in @babel/runtime has atype: module
which messes up everything. Now thats a heavy statement, but god only knows what the real issue is and after these many hours, i was just relieved to get it working. Something in this thread hinted at a solution.
I am aware of a lot of people that would criticize me for not enjoying the process. But those very same people dont enjoy working out every day and dont enjoy drinking bitter gourd juice every day, while fully being aware that its good for them.
After crushing all my dreams of being productive and building something fun this saturday, here I am, sitting in front of my computer at night, wondering what did I do today.
I have been having a difficult time, emotionally and mentally the past few months, perhaps years. I sometimes find my mental health deteriorating. My will power crumbling. Today, after solving this problem, I asked myself -
I am tired, exhausted. Making sacrifices. Doing things I don't know and don't understand. Time that I could have spent living in a world outside of this screen. How many struggles/failures/hardships do I have to endure to keep going?
I don't know if its right or wrong, but my mind instantly yelled back at me with an answer.
As many as it takes.