Problem with rebuilding/reloading extension changes

Hi,

I’m trying to create a new extension for SuiteCRM.
I followed this documentation and completed all the required steps correctly, but after reloading the SuiteCRM localhost site, nothing changed.

Then, I followed this one.

and added it to modules > Accounts > detailviewdefs.php > sidebarWidgets, but still, no changes appear on the site.

After making any changes, I tried this:
yarn build
yarn run build-dev:defaultExt
Admin > Repair > Quick Repair and Rebuild

Here are the steps for a simple hello world sidebar widget I tried in my system.

  1. extensions\defaultExt\app\src\containers\sidebar-widget\hello-world\hello-world-sidebar-widget.component.html
<scrm-widget-panel [title]="'Example Widget'">
    <div class="hello-world-sidebar-widget" widget-body>
        Hello World!
    </div>
</scrm-widget-panel>

2.extensions\defaultExt\app\src\containers\sidebar-widget\hello-world\hello-world-sidebar-widget.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import {
    BaseWidgetComponent,
} from 'core';

@Component({
    selector: 'scrm-hello-world-sidebar-widget',
    templateUrl: './hello-world-sidebar-widget.component.html',
    styles: []
})
export class HelloWorldSidebarWidgetComponent extends BaseWidgetComponent implements OnInit, OnDestroy {
    constructor() {
        super();
    }
	
	ngOnDestroy():void{
	}
	ngOnInit(): void{
	}
}

3. extensions\defaultExt\app\src\containers\sidebar-widget\hello-world\hello-world-sidebar-widget.module.ts


import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HelloWorldSidebarWidgetComponent} from './hello-world-sidebar-widget.component';
import {LoadingSpinnerModule, WidgetPanelModule} from 'core';

@NgModule({
    declarations: [HelloWorldSidebarWidgetComponent],
    exports: [
        HelloWorldSidebarWidgetComponent
    ],
    imports: [
        CommonModule,
        LoadingSpinnerModule,
        WidgetPanelModule,
    ]
})
export class HelloWorldSidebarWidgetModule {
}

4.extensions\defaultExt\app\src\extension.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {SidebarWidgetRegistry} from 'core';
import {HttpClientModule} from '@angular/common/http';
import {HelloWorldSidebarWidgetModule} from './containers/sidebar-widget/hello-world/hello-world-sidebar-widget.module';
import {HelloWorldSidebarWidgetComponent} from './containers/sidebar-widget/hello-world/hello-world-sidebar-widget.component';
@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        HttpClientModule,
		HelloWorldSidebarWidgetModule,
    ],
    providers: []
})
export class ExtensionModule {
    constructor(protected sidebarWidgetRegistry: SidebarWidgetRegistry) {
		console.log('hello world - changed');
		console.log('sidebar widget register');
        sidebarWidgetRegistry.register('default', 'hello-world', HelloWorldSidebarWidgetComponent);

        console.log('loaded');
    }
    init(): void {
    }
}
  1. Add new type for the sidebar widege in public/legacy/custom/modules/Accounts/metadata/detailviewdefs.php
 'sidebarWidgets' => [
         		[
		'type' => 'hello-world',
		  ],

6. Run the following command from the root path to run the code from defaultExt extension

yarn run build-dev:default --watch

  1. Run the suite8 in browser to open an account detail view page. It should show this hello world widget in sidebar widgest list.

image

1 Like

Thanks for your reply.

After run yarn run build-dev:name –watch
I got this error:
Error: Unknown argument: –watch
error Command failed with exit code 1.

So I used this:
yarn run build:name
composer install
And in the account detail view page
Widget not found
Screenshot 2025-01-22 163001

Double dash before watch:

yarn run build-dev:default–watch

Hi,

Yes, I tried this, but it’s still the same.

yarn run build-dev:name –-watch

$ ng build name --configuration dev –-watch
Error: Unknown argument: –-watch
error Command failed with exit code 1.

Please check you have enabled the extension in the file: extensions/defaultExt/config/extension.php by setting 'enabled' => true,

Run php bin/console cache:clear from the root directory of suitecrm files/folders

$extensions['defaultExt'] = [
    'remoteEntry' => '../extensions/defaultExt/remoteEntry.js',
    'remoteName' => 'defaultExt',
    'enabled' => true,

Can you try without monitoring changes. Just run
yarn run build-dev:defaultExt from the root directory.

Hi,

  • Yes, its ‘enabled’ => true

  • After php bin/console cache:clear the main SuiteCRM is not loading at all. The PHP server is running, but nothing happens when accessing the site.

  • Using yarn run build-dev:defaultExt return this error
    $ ng build defaultExt --configuration dev
    An unhandled exception occurred: Configuration ‘dev’ is not set in the workspace.
    So I’m using yarn run build:defaultExt

You must be getting errors in browser console. Which suitecrm version are you using? There is slight change as well in 8.7.1 and 8.8-beta

If there are errors related to 403, most probably the error is due to file permission (faced this a few times, after build, i had to reset permissions in /public folder because compiled files are inside public folder.

If you are facing 404 errors, probably file is not generated.

Try checking php_error logs or suitecrm logs in root folder.

There must be a hint somewhere.

Hi,
using: SuiteCRM-8.7.1-dev

After I run yarn run build:name
It worked fine without any errors, but it didn’t generate the public folder in the extension folder like we have in the defaultExt folder

Then, when I tried to access the SuiteCRM main site, I encountered these errors
GET http://localhost:8080/suitecrm/public/extensions/name/remoteEntry.js net::ERR_ABORTED 404 (Not Found)
ERROR TypeError: Failed to fetch dynamically imported module: http://localhost:8080/suitecrm/public/extensions/name/remoteEntry.js

I am not sure but can you try again by changing the name of extension something like nameExt. I think ‘name’ could be the issue. :slight_smile:

Hi,
I’m using ‘name’ here just as an example; it has a different name of course.

So Initially, I started this thread with one problem about how to reload the changes in the extension. But now, I have two problems because the main SuiteCRM site is not loading at all after clearing the cache.

Is it the case the defaultExt works but other extension doesn’t?

Hi,
I removed the new extension, and SuiteCRM is working again.

However, we’re back to step 1.
When I make any changes to the defaultExt component in ‘sidebar-widget.component.html’ or the account page ‘detailviewdefs.php,’ nothing updates on the SuiteCRM site.

I tried this command after making changes:
yarn run build:common
yarn run build:core
yarn run build:shell
yarn build:defaultExt
composer install

Please check this. This and online document helped me to make changes in php and angular and run the suitecrm application.

1 Like

Hi Harshad,
Thanks so much for following up :wave:

I reviewed all the steps again, and after running yarn run build-dev:defaultExt --watch, it is now working for the extension, and the changes are updating correctly :+1:

However, the other part is still the same—updating changes in the PHP files.
For example, in the file detailviewdefs.php, I removed ['type' => 'hello-world'] from the sidebarWidgets, but it is still shown in the UI and not updated.

Please can you check the changes in the detailviewdefs.php in both modules and custom/modules folders.

We should run php bin/console cache: clear if we make php code changes and reload the application after completing the command. Also try clearing the browser cache. :slight_smile:

  • detailviewdefs.php is located in the modules only and not in custom/modules
  • I tried running php bin/console cache: clear but nothing was updated
  • I clear the browser cache after making any changes

Try deleting the folders from the following directories manually and do quick repair and rebuild from the admin OR run php bin/console cache:clear command and test again.

cache/prod OR cache/qa depending upon the environment type.

public/legacy/cache

Customization done in custom folder are upgrade safe so can you take backup and undo modules changes and copy the detailviewdefs.php in custom/modules/{modname}/metadata folder and change the code.

Hope this works :slight_smile:

1 Like