Search code examples
orocrmorocommerce

Oro JavaScript Modularity is not working


sadly, my oro custom javascript components are not loading

my reuiqrejs.yml is here

Company/Bundle/BarcodeBundle/Resources/config/requirejs.yml

config:
    paths:
         'companybarcode/js/app/components/custom-component': 'bundles/companybarcode/js/app/components/custom-component.js'

Company/Bundle/BarcodeBundle/Resources/public/js/app/components/custom-component.js

my custom-component.js is as follow

define(function (require) {
   'use strict';

   var CustomComponent = BaseComponent.extend({
       initialize: function (options) {
           alert("Hello Component");
       }
   })

    return CustomComponent;
});

my view for loading the component is

Company/Bundle/BarcodeBundle/Resources/views/Barcode/test.html.twig

<div data-page-component-module="companybarcode/js/app/components/custom-component"></div>

I don't know what's wrong with the code

Oro Referece: https://oroinc.com/orocrm/doc/2.3/cookbook/how-to-replace-inline-javascript-with-component


Solution

  • in your code their is missing part, in order to use a component you have to import it first

    define(['path/to/BaseComponent'], function (BaseComponent) {
       'use strict';
    
       var CustomComponent = BaseComponent.extend({
           initialize: function (options) {
               alert("Hello Component");
           }
       })
    
        return CustomComponent;
    });
    

    http://requirejs.org/docs/api.html#i18n