fs, os, path not found when building the components of the storybook example

[bebbi]

To bootstrap a library of visual components, I have

1. Started with the code in https://github.com/ben-rogerson/twin.examples/tree/master/storybook-emotion
2. Added this build script into package.json:

   "build": "NODE_ENV=production babel --extensions '.js,.jsx,.ts,.tsx' --source-maps --out-dir dist src"

3. Added a src/index.js file that merely re-exports the functions inside Button and Logo.
4. Added some more package.json fields:

   "name": "@myscope/emotiontest",
   "version": "0.1.0",
   "private": true,
   "babelMacros": {
   "twin": {
     "preset": "emotion"
   }
   },
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
   "dist"
   ],
   "babel": {
   "presets": [
     "@babel/preset-react",
     "@babel/preset-env",
     "@babel/preset-typescript"
   ]
   },

Finally I've run yarn build (yarn 3.2.3) and tried to import the resulting library in another workspace:

import { Button } from '@myscope/emotiontest'

Instead of a Button. I get errors such as: "Module not found: Error: Can't resolve 'fs'" (same with os, path).

Is this an issue with the example or am I missing something?

[ben-rogerson]

Here's a potential fix - have a read of that thread. I've seen this before, usually the fix is to adjust the webpack config to avoid including those node variables.

[bebbi]

Sorry for the late answer @ben-rogerson . I'm not sure this applies to the situation at hand: To run storybook, I don't have a problem.

The problem comes when building the code as a module using

NODE_ENV=production babel --extensions '.js,.jsx,.ts,.tsx' --source-maps --out-dir dist src

and then importing that module as a dependency in a (gatsby) project.

Maybe I am missing something I should try?

[ben-rogerson]

Have you tried setting the build targets? Sounds like its building for node by including the fs node helper.

[bebbi]

Sorry I have dropped twin for plain tailwind in that project in question and can't repro, I hope someone else can jump in!

[ben-rogerson]

It will be here when they search 👍