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.

This is working now in 2022 with create-react-app v 4. ESLint no longer complains. — Adam D
– Adam D, Commented Oct 6, 2022 at 19:03

Adam D · Accepted Answer · 2022-10-06 19:03:00Z

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.

answered Oct 6, 2022 at 19:03

Adam D

2,3272 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ruslan Elisha · Accepted Answer · 2020-08-10 20:26:53Z

0

Try absolute imports. It's, in general, a good habit to use absolute imports to solve nested imports hell.

In tsconfig.json file in the root of your project add the following code:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

reference: https://create-react-app.dev/docs/importing-a-component/

answered Aug 10, 2020 at 20:26

Ruslan Elisha

1311 silver badge5 bronze badges

1 Comment

Mike Cenker Over a year ago

Thank you for your answer. However using absolute imports does not solve the compilation error.

Mike Cenker · Accepted Answer · 2020-08-11 07:51:17Z

0

After more googling I found this issue: https://github.com/facebook/create-react-app/issues/4246

Looks like this approach is uncommon and not supported. I solved my problem by moving dependencies from nested node_modules to root package.json.

answered Aug 11, 2020 at 7:51

Mike Cenker

1252 silver badges9 bronze badges

1 Comment

Adam D Over a year ago

This is working now in 2022 with create-react-app v 4. ESLint no longer complains.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related