Custom env has unresolved ramda dependencies

[gmichael27]

We're running into dependency issues when using a custom Angular env so that we can use Angular Material. Unfortunately, installation of it is not as simple as basic dependencies; the ng add schematic does some other behind-the-scenes work and must be run in an Angular app (which we are not using here). This lead us to find a couple existing issues with Angular Material and custom envs which we have used as a guide: https://github.com/teambit/bit-angular/issues/32 https://github.com/teambit/bit-angular/issues/35

To start, we've set up a brand-new Angular workspace out-of-the-box: https://bit.cloud/teambit/angular/angular

bit new ng-workspace bit-demo -a teambit.angular/angular
cd bit-demo
bit create ng-module ui/my-button
bit install
bit start

Everything here seems to work fine. Next, we add a custom Angular env:

bit create ng-env angular-material-env

Following #35 above, we now edit our workspace.jsonc to link everything up properly:

/**
 * this is the main configuration file of your bit workspace.
 * for full documentation, please see: https://bit.dev/docs/workspace/workspace-configuration
 **/{
  "$schema": "https://static.bit.dev/teambit/schemas/schema.json",
  /**
   * main configuration of the Bit workspace.
   **/
  "teambit.workspace/workspace": {
    /**
     * the name of the component workspace. used for development purposes.
     **/
    "name": "bit-demo",
    /**
     * set the icon to be shown on the Bit server.
     **/
    "icon": "https://static.bit.dev/bit-logo.svg",
    /**
     * default directory to place a component during `bit import` and `bit create`.
     * the following placeholders are available:
     * name - component name includes namespace, e.g. 'ui/button'.
     * scopeId - full scope-id includes the owner, e.g. 'teambit.compilation'.
     * scope - scope name only, e.g. 'compilation'.
     * owner - owner name in bit.dev, e.g. 'teambit'.
     **/
    "defaultDirectory": "{scope}/{name}",
    /**
     * default scope for all components in workspace.
     **/
    "defaultScope": "company.scope"
  },
  /**
   * main configuration for component dependency resolution.
   **/
  "teambit.dependencies/dependency-resolver": {
    /**
     * choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
     */
    "packageManager": "teambit.dependencies/yarn",
    "policy": {
      "dependencies": {
        "@teambit/angular": "1.1.3"
      },
      "peerDependencies": {}
    }
  },
  /**
   * workspace variants allow to set different subsets of configuration for components in your
   * workspace. this is extremely useful for upgrading, aligning and building components with a new
   * set of dependencies. a rule can be a directory or a component-id/namespace, in which case,
   * wrap the rule with curly brackets (e.g. `"{ui/*}": {}`)
   * see https://bit.dev/docs/workspace/variants for more info.
   **/
  "teambit.workspace/variants": {
    "angular-material-env": {
      "teambit.harmony/aspect": {}
    },
    "*": {
      "scope/angular-material-env": {}
    }
  },
  "teambit.angular/angular@1.1.3": {},
  "teambit.generator/generator": {
    "aspects": [
      "scope/angular-material-env"
    ]
  }
}

To be safe, we now delete node_modules, yarn.lock, and run bit capsule delete --all to clean up all existing dependencies. After, we run:

bit install
bit start

Opening and viewing angular-material-env in the client results in the following errors in the console; something appears to be dependent on ramda / ramda-adjunct, and fails out-of-the-box. We're wondering if there is a missing dependency somewhere, or if we have misconfigured our custom env.

ERROR in ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es/renameKeys.js 1:0-35
Module not found: Error: Can't resolve 'ramda' in '/Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es'
resolve 'ramda' in '/Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es'
  Parsed request is a module
  using description file: /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/package.json (relative path: ./es)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules
        single file module
          No description file found in /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.ts doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.tsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.js doesn't exist
          .mdx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.mdx doesn't exist
          .md
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.md doesn't exist
          .web.mjs
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.mjs doesn't exist
          .mjs
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.mjs doesn't exist
          .web.js
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.js doesn't exist
          .cjs
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.cjs doesn't exist
          .web.ts
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.ts doesn't exist
          .web.tsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.tsx doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.json doesn't exist
          .web.jsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.jsx doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.jsx doesn't exist
        /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda doesn't exist
      /Users/developer/Library/Caches/Bit/capsules/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/Bit/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/node_modules doesn't exist or is not a directory
      /Users/developer/Library/node_modules doesn't exist or is not a directory
      /Users/developer/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es/index.js 170:0-53 170:0-53
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/@teambit/react.ui.docs-app/dist/base.js 21:24-48
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/@teambit/react.ui.docs-app/dist/docs-app.js 11:15-32
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/@teambit/react.ui.docs-app/dist/index.js 8:19-40
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/teambit.angular_dev-services_compiler_angular-elements@0.0.4/dist/preview/docs.js 13:38-75
 @ ./node_modules/.cache/bit/teambit.preview/preview/company.scope/angular-material-env/overview-1656617556034.js 4:0-201 9:2-12

Some additional OS information:

• BVM: 0.1.1
• Bit: 0.0.777
• Angular CLI: 14.0.3
• Node: 14.17.6
• OS: darwin x64 (macOS)

[jkeczan]

We are also seeing the same issue, following the same git issue @gmichael27 listed above. Additionally, We have tried targeting specific angular versions with -v13/v12 with no success either.

[ocombe]

Hello, if I remember correctly @GiladShoham fixed the ramda issue in react ui docs app a month ago, so this shouldn't appear anymore (as it's not longer used at all). Just to be sure, I've bumped the version of the dependency on react.ui.docs-app to the latest version and I've released new versions of all envs, can you update and check if it fixes the issue for you now?

[jkeczan]

That did it.

Ramda and angular were shown as changed when I ran bit update and everything started without issue.

Thank you for your response

[gmichael27]

Thanks @ocombe, that did resolve the errors on startup and things boot up fine now.

I did want to mention one issue I'm seeing that seems like it may be related, since you mentioned react.ui.docs-app. The code blocks out-of-the-box don't seem to have syntax highlighting when using the custom ENV. Here are screenshots of what I mean: when creating a new ng-workspace / ng-module and starting the server, code blocks look like this:

After creating the ng-env, updating workspace.jsonc as above / installing and starting again, code blocks now look like this:

Again, this is separate from the original problem but thought it may be related to the fix.

[ocombe]

Interesting, I never noticed that, thanks