CRA 5 + yarn workspaces + shared typescript packages

André Castelo — Thu, 09 Jun 2022 21:01:20 +0000

TL;DR:

create-react-app doesn't play nice with shared packages inside a monorepo if you have to compile them (which is the case of my typescript shared types package)
craco doesn't work officially with CRA 5, but Craco 7 alpha does, at least it works enough for it to fix this issue.
craco config:

const fs = require('fs');
const path = require('path');
const cracoBabelLoader = require('craco-babel-loader');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [resolveApp('../packages')],
      },
    },
  ],
};

This is a quick one. I've been struggling a lot today to use a shared types package in my monorepo. My structure is the following:

/.git
/app  // react application with CRA 5
  /src
  package.json
/gateway
  /src
  package.json
/packages
  /types
    ...
    package.json
package.json

I'm using:

create-react-app 5
yarn workspaces
typescript

The problem

Here I have my gateway and app both depending on packages/types. While gateway worked fine, app complains that I'm importing files outside of app/src, since this is a limitation in CRA configuration.

The solution

I tried ejecting, but went down a rabbit hole where nothing worked. So I reverted those commits and proceeded with craco@7.0.0-alpha.3. Inside app I ran:

$ yarn add craco@7.0.0-alpha.3

And then I found this answer from @robertcoopercode, and edited to suit my needs:

const fs = require('fs');
const path = require('path');
const cracoBabelLoader = require('craco-babel-loader');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [resolveApp('../packages')],
      },
    },
  ],
};

Thanks man, you saved my day. Now I'm going to create a ticket to drop create-react-app in favor of next.js, and add it to the next technical debt meeting.

Prop forwarding with Emotion, Material-UI and Material-UI-system

André Castelo — Mon, 30 Aug 2021 18:38:48 +0000

Material-ui-system is an awesome library, but when using with @emotion/styled there might be a few annoying warnings, complaining that you're passing an invalid property to a DOM node. Here's a quick function to prevent that:

And an example overriding an existing Material-UI component:

Forem: André Castelo

CRA 5 + yarn workspaces + shared typescript packages

The problem

The solution

Prop forwarding with Emotion, Material-UI and Material-UI-system