CODEWITHSUNDEEP
reactjstypescriptpackagenode-modulescreate-react-app
Mike Cenker
Mike Cenker

Reputation: 125

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

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.

Upvotes: 3

Views: 4417

Answers (3)

Adam D
Adam D

Reputation: 2197

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.

Upvotes: 1

Mike Cenker
Mike Cenker

Reputation: 125

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.

Upvotes: 0

Ruslan Elisha
Ruslan Elisha

Reputation: 131

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/

Upvotes: 0

Related Questions