@tsed/yarn-workspaces

An util inspired by react-workspaces . This package, allow you to configure a CRACO project and use yarn workspaces to create shared modules in the same mono repository.

Prerequisite

• A project configured with Yarn workspaces,
• CRACO

Installation

Install the @tsed/yarn-workspaces on the react project level generated with CRACO:

yarn add -D @tsed/yarn-workspaces

Then edit or add the craco.config.js:

const { configure, ensureReact } = require("@tsed/yarn-workspaces")

module.exports = {
  webpack: {
    configure: (webpackConfig, ctx) => {
      webpackConfig = ensureReact(configure(webpackConfig, ctx))
      // other things ...
      return webpackConfig
    }
  }
}

ensureReact function ensure that webpack only one version of react.

Now you can create a shared package in your packages directory. For example create a shared directory and add a new package.json:

{
  "name": "@project/shared",
  "version": "1.0.0",
  "main": "src/index.js"
}

Then, in the application package.json add the @project/shared as dependencies:

{
  "name": "@project/app",
  "version": "1.0.0",
  "main": "src/index.js",
  "dependencies": {
    "@project/shared": "1.0.0"
  }
}

Finally, imported a shared component in your App and start the application!