0

I am breaking my project into different repos. I have 3 different repos: base, utils and my project.

Base contains: CustomText
Utils contains: Wrapper & StyleHelper
My project contains: the app I'm working with.

The error occurs when I import Wrapper in my project like so:

import { Wrapper } from 'utils';

in Wrapper.js I import a CustomText Component

import { CustomText } from 'base';

in CustomText.js I import a StyleHelper

import { StyleHelper } from 'utils';

The error I get refers to the StyleHelper. The error says "cannot read 'create' of undefined" - create is a method on the StyleHelper component. So when I import Wrapper in my project StyleHelper is undefined. When I don't import Wrapper in my project StyleHelper is defined and no error occurs.

If they are not in separate repos the app works. Also, if I remove the CustomText import in Wrapper it works.

How do I get these to work if I want to break up the project into different repos? I'd assume some sort of circular dependency, but why is this happening? If it is some sort of circular dependency, what's the best practice to avoid this when breaking up a large project into many repos?

Turnipdabeets
  • 5,815
  • 8
  • 40
  • 63
  • Can you paste error what you are getting.. which help to provide solution. – BEJGAM SHIVA PRASAD Aug 22 '17 at 18:23
  • The error says "cannot read 'create' of undefined" - create is a method on the StyleHelper component. – Turnipdabeets Aug 22 '17 at 18:25
  • Why can't you place all your code in your project app in different directories? – koolkat Aug 22 '17 at 18:28
  • If `base` depends on `util` and `util` depends on `base`, doesn't that imply that these things are cyclically dependent and shouldn't be split up? Or should be refactored to avoid the cycle? – loganfsmyth Aug 22 '17 at 18:29
  • How are you exporting your other repos? What I mean is, are they named exports or default exports? My other question would be, what problem are you solving by using multiple repos? – rimraf Aug 22 '17 at 18:41
  • @archae0pteryx they are named exports – Turnipdabeets Aug 22 '17 at 18:42
  • Just a thought without seeing some of these methods, have you considered the order in which you are importing? Are you trying to use methods before they are defined i mean. – rimraf Aug 22 '17 at 18:52
  • @archae0pteryx I guess my thought is that if they are in my node_modules then importing them should be fine no matter what order – Turnipdabeets Aug 22 '17 at 18:53
  • That is not the case. Imports are async and your load order is not guaranteed. See this post: https://stackoverflow.com/questions/35551366/what-is-the-defined-execution-order-of-es6-imports It could be the case that your method is being called before it is loaded. – rimraf Aug 22 '17 at 19:56
  • Another good resource on this topic: https://www.nczonline.net/blog/2016/04/es6-module-loading-more-complicated-than-you-think/ – rimraf Aug 22 '17 at 19:58
  • Things in `node_modules` are usually independent, so they have no risk of dependency cycles. If you make cycles, the location of the modules makes no difference. You haven't given much to go on, but cycles are almost always a sign that you need to reorganize. Removing them should be your main priority. – loganfsmyth Aug 22 '17 at 21:14

0 Answers0