Error while running bit compile after creating custom environment

[rishikeshjadhav]

Steps followed:

bit new ng-workspace checkone -a teambit.angular/angular-v13

bit create ng-module ui/autocomplete

bit create ng-env angmatenv

---

On running bit compile getting below error

[rishikeshjadhav]

@ocombe Anything missing in steps here?

[ocombe]

You will need to update your workspace.jsonc to use that custom env:

• add @teambit/angular-v13 as a dependency
• change teambit.workspace/variants to use angmatenv instead of angular-v13
• specify that your custom env is an aspect by adding this in the workspace variants:

"scope/angmatenv": {
      "teambit.harmony/aspect": {}
    }

[rishikeshjadhav]

Sorry but i did not clearly understand that,

Can you help by updating on repository if possible?

Repo:
https://github.com/rishikeshjadhav/angbitenv

Contribute access:
https://github.com/rishikeshjadhav/angbitenv/invitations

[ocombe]

workspace.jsonc should look something like that:

/**
 * this is the main configuration file of your bit workspace.
 * for full documentation, please see: https://harmony-docs.bit.dev/workspace/configurations
 **/{
  "$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": "checkone",
    /**
     * 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/pnpm",
    "policy": {
      "dependencies": {
        "@teambit/angular-v13": "0.0.17"
      },
      "peerDependencies": {}
    },
    "nodeLinker": "hoisted"
  },
  /**
   * 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://harmony-docs.bit.dev/aspects/variants for more info.
   **/
  "teambit.workspace/variants": {
    "scope/angmatenv": {
      "teambit.harmony/aspect": {}
    },
    "*": {
      "scope/angmatenv": {}
    }
  },
  "teambit.angular/[email protected]": {},
  "teambit.generator/generator": {
    "aspects": [
      "scope/angmatenv"
    ]
  }
}

[ocombe]

Also keep in mind that when you change your custom env, you will need to compile it before it actually compiles the component with the new changes, this means either using bit watch or running bit compile twice

[rishikeshjadhav]

After updating workspace.jsonc as above getting below error, tried bit compile twice as well

Updated code is available at the repo,
https://github.com/rishikeshjadhav/angbitenv

[ocombe]

it works for me with the current code of your repo, maybe there's some artifact in your .git/bit folder? (you can remove it, it will be recreated)

[rishikeshjadhav]

Deleted .git/bit
Ran bit compile

Same error occurred.

Delete node_modules folder
Deleted capsule using bit capsule delete --all
Ran bit install
Ran bit compile

Still same error occurred.

Cloned the repo into new folder
Ran bit install
Ran bit compile

Still same error occurred.

Something strange is happening on my machine. may be something specific to my machine.

@ocombe , did you follow any additional steps after cloning the repo?

[ocombe]

I cloned it, ran bit install, then bit compile
What do you see with bit compile --log ?

[rishikeshjadhav]

So i restarted my machine.

Took fresh clone of repo, ran bit install, then bit compile, it compiled without errors

Ran bit compile again, got below error

Ran bit compile --log,

[ocombe]

Well there you go, bit install @teambit/toolbox.performance.v8-cache and it should work. I'll fix the env to have it as a direct dependency

[ocombe]

teambit/[email protected] should hopefully fix the issue

[rishikeshjadhav]

Ran bit install @teambit/toolbox.performance.v8-cache

Ran bit compile

Compiled successfully without errors.

Ran bit start

Failed with below error,

[ocombe]

No idea, I'll check tomorrow

[rishikeshjadhav]

Tried from scratch with latest version, teambit/[email protected]

bit new ng-workspace checkone -a teambit.angular/angular-v13

bit create ng-module ui/autocomplete

bit create ng-env angmatenv

Updated workspace.jsonc file as per stated in previous comments

Ran bit compile --log

Below is detailed error snapshot,

@ocombe , Let me know if you got chance to look at this. Thanks!

[ashishkrtewari]

@rishikeshjadhav
Can you please also share your workspace.jsonc here?

[rishikeshjadhav]

@ashishkrtewari

Here is the code repo,
https://github.com/rishikeshjadhav/angbitcustomenv

I have added you as collaborator,

https://github.com/rishikeshjadhav/angbitcustomenv/invitations

[ashishkrtewari]

@rishikeshjadhav
I see that you have not added

"@teambit/angular-v13": "0.0.19"

to the dependencies.

I added it and removed

"@teambit/toolbox.performance.v8-cache": "0.0.18",

to make it work for me.

ran these commands

bit install

bit compile

bit start

[rishikeshjadhav]

@ashishkrtewari

I will give this a try tomorrow morning and will run some tests with material UI components.

Will update the ticket, thanks for looking into this!

[rishikeshjadhav]

Adding"@teambit/angular-v13": "0.0.19"dependency has resolved the issue with bit start.

However when i try to add a reference to load material style in custom environment as below,

const angularOptions = angular.overrideAngularOptions({
      styles: [
        require.resolve('@angular/material/prebuilt-themes/indigo-pink.css')
      ]
    });

On running bit compile --log, getting below error

I have created a new repository for the same, please see below URL
https://github.com/rishikeshjadhav/bitangenvmaterial

Material style reference is added in below file of custom environment,
https://github.com/rishikeshjadhav/bitangenvmaterial/blob/main/scope/angmatenv/angmatenv.extension.ts

You are invited as collaborater,
https://github.com/rishikeshjadhav/bitangenvmaterial/invitations

@ocombe @ashishkrtewari, Can you please check this and let me know if anything is missing?

[ocombe]

This is an issue with require.resolve, it doesn't accept to return paths that are explicitly not available in the exports, but only if the package is ESM.
The best alternative I think is to create your own scss file that will import the angular material theme file. The scss loader should not be subject to this limitation.
You could also search for an alternative to require.resolve that doesn't throw with ESM packages, like enhanced-resolve from webpack for example (usable outside of webpack), you shouldn't even need to install it since we use webpack for bit-angular, it should already be available