How to set up create-react-app with local packages in src folder while using TypeScript?

Question

I use TypeScript in my create-react-app project and use local private packages. The packages are meant to be shared between multiple apps and have their own repositories. I would like to have my local packages in src/packages folder.

Here is my current folder structure:

--create-react-app (root)
  --node_modules
  --package.json
  --src
    --App.tsx
    --index.tsx
    --packages
      --my-package (sub-repository)
        --ModuleA.ts
        --node_modules
        --package.json

my-package is installed as local like this:

// package.json
"dependencies": {
  "my-package": "file:src/packages/my-package"
}

This way I can import modules from my-package like this:

// src/App.tsx
import ModuleA from 'my-package/ModuleA'

However there is a compilation error when ModuleA imports a package from its own node_modules:

// src/packages/my-package/package.json
"dependencies": {
  "moment": "^2.27.0"
}

// src/packages/my-package/ModuleA.ts
import moment from 'moment'

Compilation error:

> npm run start
Failed to compile.

./src/packages/my-package/node_modules/moment/moment.js
  Line 9:37:  'define' is not defined  no-undef
  Line 9:50:  'define' is not defined  no-undef

Search for the keywords to learn more about each error.

I think the error is caused by ESLint because it checks node_modules of my-package.

I do not want to npm run eject. I do not want to publish my packages either privately or publicly. I want to be able to change source code of my-package and see the changes in realtime when my app is running.

Is there a way to make it work like this please?

Thank you for your help.

Answer 1

I just found this here in 2022 because I wanted to do the exact same thing. I tried it and it is working fine now using create-react-app ([email protected]). ESLint doesn't complain about the files in node_modules folders nested in src.