Compositions fail to render

[CodeNameNinja]

It seems compositions are failing to render

I am using Angular 12.1.3

import { Component } from '@angular/core';

@Component({
  selector: 'bit-composition',
  template: `
      <p>
        Composition component 1
      </p>
        `,
  styles: [
  ]
})
export class StandaloneCompositionComponent {
}

But I get an error when going to bit compositions

"Failed to Render"

[ocombe]

Hello, I'm going to need more than that to figure out what's wrong there, can you provide a repro? Or at least the content of your workspace.jsonc file

[CodeNameNinja]

@ocombe workspace.jsonc file

/**
 * 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": "workspace",
    /**
     * set the icon to be shown on the Bit server.
     **/
    "icon": "https://static.bit.dev/bit-logo.svg",
    /**
     * default directory for all components in workspace, 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": "codenameninja.secret-components"
  },
  /**
   * 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": {},
      "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://harmony-docs.bit.dev/aspects/variants for more info.
   **/
   "teambit.angular/angular-v12": {},
   "teambit.workspace/variants": {
     "*": {
       // Replace `v12` by the version of Angular that you want to use
       "teambit.angular/angular-v12": { }
     }
   },
   "teambit.generator/generator": {
     "aspects": [
       // Replace `v12` by the version of Angular that you want to use
       "teambit.angular/angular-v12"
     ]
   }
}

Repo -> Github Repo Please checkout feature/tree

[ocombe]

You're missing the versions after teambit.angular/angular-v12, it should be teambit.angular/angular-v12@0.0.15:

  "teambit.workspace/variants": {
    "*": {
      "teambit.angular/angular-v12@0.0.15": {}
    }
  },
  "teambit.angular/angular-v12@0.0.15": {},
  "teambit.generator/generator": {
    "aspects": [
      "teambit.angular/angular-v12@0.0.15"
    ]
  }

[CodeNameNinja]

After doing that, I get the following message

✔ teambit.component/isolator, create capsules network (completed in 49ms)
✖ error: unable to load the extension "teambit.angular/angular-v12@0.0.15", please use the '--log' flag for the full error.
✖ error: unable to load the extension "teambit.angular/angular@0.0.13", please use the '--log' flag for the full error.
✖ error: unable to load the extension "teambit.angular/ng-packagr@0.0.4", please use the '--log' flag for the full error.
template "ng-lib" was not found

"teambit.angular/angular-v12@0.0.15": {},
   "teambit.workspace/variants": {
     "*": {      
       "teambit.angular/angular-v12@0.0.15": { }
     }
   },
   "teambit.generator/generator": {
     "aspects": [       
       "teambit.angular/angular-v12@0.0.15"
     ]
   }

Edit

After some digging,

I changed the workspace.jsonc to

 "teambit.workspace/variants": {
     "*": {
       "teambit.angular/angular-v12@0.0.15": { }
     }
   },
   "teambit.generator/generator": {
     "aspects": [      
       "teambit.angular/angular-v12@0.0.15"
     ]
   }

And then I could create a component, however now when I run bit compile or bit start. I get the following error Cannot read property 'createCompiler' of null

and I have already ran bit install

[ocombe]

You also need to add "teambit.angular/angular-v12@0.0.15": {}, at the root of your workspace.json file

[CodeNameNinja]

You also need to add "teambit.angular/angular-v12@0.0.15": {}, at the root of your workspace.json file

even after adding that again to the root, in workspace.jsonc. I still get this error Cannot read property 'createCompiler' of null

[ocombe]

Can you update angular-v12 to "0.0.22" please, then run bit install again and retry

[CodeNameNinja]

PS C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components> bit install      
√ running pre install subscribers
√ deduping dependencies for installation
...ff13983f4d237ebd1ba39840a4dd8e31590af |  WARN  @angular-devkit/build-webpack@0.1201.0 requires a peer of webpack-dev-server@^3.1.4 but version 4.0.0-beta.2 was installed.
...ff13983f4d237ebd1ba39840a4dd8e31590af | Progress: resolved 785, reused 785, downloaded 0, added 0, done
  -------------------------
√ installing dependencies using pnpm
√ running post install subscribers
√ linking components
√ teambit.component/isolator, create capsules network (completed in 2m)
  Resolving component dependencies for workspace: 'CodeNameNinja'
  installing dependencies in workspace using teambit.dependencies/pnpm
√ running pre install subscribers
√ deduping dependencies for installation
 WARN  Moving @angular/compiler-cli that was installed by a different package manager to "node_modules/.ignored
 WARN  Moving @angular/compiler-cli that was installed by a different package manager to "node_modules/.ignored
EPERM: operation not permitted, rename 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\@angular\compiler-cli' -> 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\.ignored\@angular\compiler-cli'

and then after running bit compile

C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\secret-components\ui\button
TypeError: Cannot read property 'id' of undefined, 'error'
compilation failed. see the following errors from the compiler
C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\secret-components\ui\button
TypeError: Cannot read property 'id' of undefined

  STATUS        COMPONENT ID
✗ FAILURE       ui/button

✗ 1/1 components failed to compile.
Finished. (1s)

[ocombe]

Ah we're getting somewhere, you need to update bit to >0.0.469

[CodeNameNinja]

workspace.json has been changed. Rebuilding UI assets for 'CodeNameNinja in target directory: public/bit'

ERROR in ../../../../../../../Documents/Learning/AngularComponents/testing-components/node_modules/.cache/bit/teambit.preview/preview/teambit.angular/angular-v12@0.0.22/__compositions-1627469235983.js 7:16-204
Module not found: Error: Can't resolve 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\@codenameninja\secret-components.ui.button\src\compositions\button.composition.ts' in 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\.cache\bit\teambit.preview\preview\teambit.angular\angular-v12@0.0.22'

ERROR in ../../../../../../../Documents/Learning/AngularComponents/testing-components/node_modules/.cache/bit/teambit.preview/preview/teambit.angular/angular-v12@0.0.22/__overview-1627469235983.js 7:16-183
Module not found: Error: Can't resolve 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\@codenameninja\secret-components.ui.button\src\button.docs.md' in 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\.cache\bit\teambit.preview\preview\teambit.angular\angular-v12@0.0.22'

webpack compiled with 2 errors

ERROR in ../../../../../../../Documents/Learning/AngularComponents/testing-components/node_modules/.cache/bit/teambit.preview/preview/teambit.angular/angular-v12@0.0.22/__compositions-1627469235983.js 7:16-204
Module not found: Error: Can't resolve 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\@codenameninja\secret-components.ui.button\src\compositions\button.composition.ts' in 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\.cache\bit\teambit.preview\preview\teambit.angular\angular-v12@0.0.22'

ERROR in ../../../../../../../Documents/Learning/AngularComponents/testing-components/node_modules/.cache/bit/teambit.preview/preview/teambit.angular/angular-v12@0.0.22/__overview-1627469235983.js 7:16-183
Module not found: Error: Can't resolve 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\@codenameninja\secret-components.ui.button\src\button.docs.md' in 'C:\Users\mwhyu\Documents\Learning\AngularComponents\testing-components\node_modules\.cache\bit\teambit.preview\preview\teambit.angular\angular-v12@0.0.22'

webpack compiled with 2 errors
ENVIRONMENT NAME                            URL                                         STATUS
teambit.angular/angular-v12@0.0.22          http://localhost:3300                       RUNNING

You can now view 'CodeNameNinja' components in the browser.

Edit

the solution for me was to delete the node_modules and not use npm i but to use bit install

[ocombe]

ah yes, never use npm or yarn in a bit workspace, always use bit install! Glad you could figure it out