Add further component library examples

[JPrisk]

nwb & neutrinojs are two popular tools used by component library authors to create and publish react components for distribution.

I experimented with adding twin.macro but received the following errors:

in ./node_modules/path-type/index.js
Module not found: Error: Can't resolve 'fs' in '.../node_modules/path-type'

in ./node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'fs' in '.../node_modules/resolve-from

in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in '.../node_modules/resolve/lib'

in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in '.../node_modules/resolve/lib'

in ./node_modules/twin.macro/macro.js
Module not found: Error: Can't resolve 'fs' in '.../node_modules/twin.macro'

in ./node_modules/twin.macro/node_modules/cosmiconfig/dist/readFile.js
Module not found: Error: Can't resolve 'fs' in '.../node_modules/twin.macro/node_modules/cosmiconfig/dist'

in ./node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in '.../node_modules/resolve-from'

would love to help out but my knowledge is limited in this space

[ben-rogerson]

I haven't used those frameworks before but I've fixed the same error in Next.js (fs isn't available in the client bundle). You may also need the same fix for module by the look of the last error.

I'm expanding the examples so perhaps I'll add neutrino to the list (not sure about nwb yet, it doesn't have much activity anymore).

Also, I've got an existing component example using Rollup using ES Modules as the output - check it out for some inspiration.

[JPrisk]

Ah, thanks @ben-rogerson - had I seen the Rollup example it would have saved me a bit of time. I ended up using create-react-library which was compatible with the module structure that you are using with twin

[ben-rogerson]

that's probably the better option anyway, more features :)

[mmmoli]

I'm utterly stumped on trying get twin.macro + emotion + nx-workspaces to play nice with each other.

I've tried following the advice of @ben-rogerson to no avail:

The trick is to use Babel to compile typescript (rather than rollup-plugin-typescript and rely on typescript for type checking and generation of declaration files.

Here's my checklist

• [x] Add "macros" to every .babelrc file I can find
• [x] Match the .babelrc from the "component-library-styled-components" example
• [x] Follow the twin setup guide for every "app" in the nx workspace – currently app:web (React) and lib:ui (React)
• [x] Try making the nx react lib (called "ui") "buildable"
• [x] Use the tsconfig.js from the "component-library-styled-components" example

I seem to get the same error:

MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros.

Ideally, I'd like to contribute an nx workspace example to this repo for future reference so what's the best way to start?

• discuss more?
• Add a (broken) example as a PR and iterate there?

I'm in Twin's Discord too if that's easier: mmoli#0581

[mmmoli]

Figured it out by following the advice here: https://github.com/kentcdodds/babel-plugin-macros/issues/135#issuecomment-761079720

Would you like me to add an example as I mentioned? twin.macro is super awesome – we should make it as useful to as many people as possible, no?

[ben-rogerson]

@mmmoli Great to hear you got around that error! I'd really like your idea of adding a nx-workspace example!

Would you be happy to add a PR for twin.examples/nx-workspace-emotion with minimal code then I can finish it off with a readme?