Share components between packages?

[aaronadamsCA]

I've got a few different front end apps, and I'm trying to build a core set of shared components between them, so I can stop repeating the same components in every app.

My package.json for the new shared component library includes the following dependencies:

  "peerDependencies": {
    "react": "^16.14.0",
    "theme-ui": "^0.3.4"
  },
  "devDependencies": {
    "react": "^16.14.0",
    "theme-ui": "^0.3.4"
  },
  "dependencies": {
    "react-helmet": "^6.1.0",
    "react-lottie-player": "^1.1.0"
  }

The package is then installed (via lerna add in a monorepo) into a few of my Gatsby apps, which seem to be properly configured otherwise.

As soon as I try to import and use a simple component from the library, the app crashes:

Error in function resolveDispatcher

Invalid hook call. Hooks can only be called inside of the body of a function component.

Per #283, I've double-checked with npm ls that react, react-dom, and theme-ui are each installed only once; per #334, I've tried deleting and recreating my node_modules/ directories and my package-lock.json files, without success.

I've tried adjusting the component and the dependencies too; removing the JSX pragma, making Theme UI a standard dependency... I can't seem to find a combination that works.

Is this a Theme UI limitation? A React problem? A Gatsby problem? A Lerna problem? Just a really bad idea? What's the best way to share components between multiple Gatsby apps in a monorepo?

[aaronadamsCA]

Naturally, after struggling for an hour or two and writing this up, I now have a good idea of where the problem lies:

• Putting react in devDependencies means react-components/node_modules/react/ exists
• Lerna symlinks react-components/ into each Gatsby app's node_modules/
• This means components will variously use node_modules/react/ or node_modules/react-components/node_modules/react/, causing the error
• This is just an unfortunate limitation of Lerna: Lerna should ignore peer/dev dependencies of symlinked packages.  lerna/lerna#2605

I thought I could work around this by moving react from the component library devDependencies to the root package devDependencies, but this didn't actually seem to work!

What did seem to work is to add this to my gatsby-node.js in each of the apps where I'm sourcing the components:

const path = require("path");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        react: path.resolve(__dirname, "node_modules/react"),
      },
    },
  });
};

That's not a Gatsby thing, it's a Webpack thing. But really at the end of the day, it's all a Lerna thing, I think.

So for now, I think I answered my own question! But I would welcome any other suggestions, further reading, or example repositories when it comes to building a shared component library with Theme UI. Thanks!

[atanasster]

Thanks for sharing. I am myself using a lerna monorepo and have the react version pinned in the "resolutions" of the root package.json.

"resolutions": {
  ...
  "**/react": "17.0.1",
  "**/react-dom": "17.0.1"
}

[aaronadamsCA]

That's interesting, but I think that's a yarn thing, right? Our project uses NPM + Lerna, I know Yarn + Lerna manages workspaces quite differently.

[atanasster]

ah yes - you are right. Happy new year :)

[lachlanjc]

For anyone here in the future, our docs link to a number of open source component kits for perusal: https://dev.theme-ui.com/resources/#component-kits

[aaronadamsCA]

Thanks @lachlanjc, some of those are quite helpful!

[aaronadamsCA]

If anyone's struggling with why imported components don't use the local theme, again this might be a Lerna monorepo artifact. If Theme UI resolves to two different installations, you'll run into problems.

I'm now using this in gatsby-node.js:

const path = require('path')

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        react: path.resolve(__dirname, 'node_modules/react'),
        'theme-ui': path.resolve(__dirname, 'node_modules/theme-ui')
      }
    }
  })
}

Now that both React and Theme UI always resolve to my local project, everything works great.

(If I understand correctly, this is what lerna hoist is meant to resolve; but Lerna is effectively dead and the alternatives are unappetizing, so I'm working around the problems for now, and staking my future on Node.js 16 with NPM 7 workspaces later this year.)

[Stvad]

Came here when trying to figure out why my theme wasn't applied. Thanks 🙏
What's annoying is that it does not seem to be posting any errors/etc

[aaronadamsCA]

It's my understanding now that this annoyance is ultimately mostly attributable to Emotion:

emotion-js/emotion#1107

And yes, the errors can be very hard to figure out! Glad this was effective search bait. 👍

[cmavelis]

I was also having issues with this, but only needed the alias resolution for theme-ui from what I can tell 👍 👍
(don't think it's a lerna artifact though)