How to fix the twin.macro ‘fs’ module error.

If you’re making use of twin.macro from version 3.1.0 upwards you should have definitely come across this package error whenever you import the “tw” module for use in a file in react.

And just like every other developer you’ve probably checked the internet (google, stack overflow, chatGPT…) for a solution but to no avail, here’s a quick fix to this issue if you get it as a result of twin.macro.

Solution

Step 1: we need to install a twin macro babel plugin file using this code.

This allows the use of the “tw” prop in any code file without importing it.

Step 2: Configuring the babel file; create a .babelrc file and add the following codes

And that’s all problem solved, this way you should be able to make use of twin macro the usual way but without the need of importing it in the file, it’s been used.