Publishing dependent components to Bit

[alexf2]

Hi colleagues!

We want to share several React components in a simplest way (export/import) across projects in the company. One component among of them depends on some others. Trying to convert them to Bit-components I encountered a couple of issues.

1. An unwanted need to convert aliased dependencies (imports) to Bit absolute format. I.e.:
   import { useDidUpdateEffect } from 'Src/hooks/cutsomHooks' to
   import { useDidUpdateEffect } from '@remote-scope/custom.hooks'
   The second import leads to node_modules and development environment (VSCode) navigates to there instead of the source.
   I tried configuring the alias, also, tried using relative links, but with no luck. Bit couldn't use such imports and asked me to use absolute ones, the second form.

`"teambit.dependencies/dependency-resolver": {
"packageManager": "teambit.dependencies/yarn",

"policy": {
"dependencies": {},
"peerDependencies": {
"react": "17.0.2",
"react-dom": "17.0.2"
}
},
"resolveModules": {
// "modulesDirectories": ["src"],
"aliases": {
"Src": "src"
}
}
}`

---

2. Needed to switch pnpm to yarn as pnpm didn't support basic auth (login + password) on a private registry.
   Is there a way to have pnpm working with Basic Auth?

---

3. I had successful "bit compile", "bit link" and "bit install", but failed at the end of the build.

bit tag custom/[email protected] --message "public release" - fails at the very last stage: "Generating preview" with a weird error:

ModuleNotFoundError: Module not found: Error:
Can't resolve 'typescript' in 'xxx\Local\Bit\capsules\d728f3bb2c2a39bf478940cab638d0b729627501\node_modules@lingui\conf'

I couldn't get rid of the error neither installing Typescript globally, nor locally. Our project does not use TS at all.

So, I couldn't make "bit export" in order to publish my components to Bit's repo. Eventually, I managed to do that only by means of:

bit tag --all 1.0.1 --force-deploy

I.e. - tagging with ignoring errors. Maybe someone could advice how to investigate and resolve this build error further, please?

[itaymendel]

Hi,

There are several things to unpack here, I'll try and go over all of them:

1. Bit only support absolute import statements between components. Other features (relative imports or even aliases) couple a component to a specific project structure. This will cause complications when using features like bit import, or for Bit's capsules to operate correctly.
2. Bit does not force you to use pnpm. If using bit install, you can have Bit use yarn behind the scenes (just replace the entry in workspace.jsonc). Moreover, it's mainly about managing your .npmrc file. If you have authentication there, it's ok. No need to re-authenticate with another client.
3. I don't fully understand this issue. This may be a result of other experimentations you ran to get aliases working? Can you reproduce this on a new project and share?

[alexf2]

Thanks, Itay!

1. Got it, have been using '@remote-scope/xxx' references everywhere, but added Webpack aliases in main project in order to develop components quickly, without "bit compile" after each code modification.

2. Switched to yarn and added global .yarnrc.yml where described all yarn settings and authentication we needed. Tried yarn 3.2, but now stick to 1.22.18. And, yes, yarn 1.22.x reads global .npmrc too.

3. This one was caused by incompletely removed and unused dependency. An another issue. Cleaning up this dependency off the project resolved the issue.