How can I create a shared package in a React / Typescript monorepo?

Viewed 138

I'm inheriting a large monorepo codebase of React code, mostly Typescript, in a couple of packages. There's duplicated utility code in both packages, which includes both ts and js files:

dinner/
  packages/
    pizza/
      index.tsx  // import {shake} from './src/shake' ...
      src/
        shake.ts
        bake.js
      package.json
      tsconfig.json
    pasta/
      index.tsx  // import {bake}  from './src/bake'  ...
      src/
        shake.ts
        bake.js
      package.json  
      tsconfig.json

I want to move duplicated code into a shared pantry package:

dinner/
  packages/
    pizza/
      index.tsx  // import {shake} from '@app/pantry/src/shake' ...
      package.json
      tsconfig.json
    pasta/
      index.tsx  // import {bake}  from '@app/pantry/src/bake'  ...
      package.json  
      tsconfig.json
    pantry/
      index.ts
      src/
        shake.ts
        bake.js
      package.json  
      tsconfig.json

My attempts so far have been unsuccessful, with various different compilation errors. Assuming the original two repos compiled and ran correctly (with react-scripts start), what minimal configuration changes are necessary to move the shared code to its own package?

0 Answers
Related