Search code examples
javascripthtmlrequirejsvue.jscustom-element

Resolving Unkown custom element: <star-rating> vue js

I am using Vue js in my javascript code. I downloaded the vue-star-rating npm package to have a rating system for one of my elements. I believe I have followed the instructions here correctly, but I am getting the error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link type="text/css" rel="../css/ProductEvaluation.css" />
</head>
<body>
    <button class="btn btn-sm" id="btnRun">Run</button>

    <div id="product-eval-areas">
        <ul>
            <li v-for="area in areas">
            {{area.EvaluationArea}} 
            // Error is occurring on this custom element
            <star-rating v-model="area.ProductEvaluationScore"></star-rating>
            </li>
        </ul>
    </div>

    <script src="https://url.com/WebResources/ccseq_/Scripts/jquery3.1.1.js"></script>
    <script src="../../Scripts/papaparse.js"></script>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../Scripts/require.js" data-main="../js/main/ProductEvaluation.js"></script>
</body>
</html>

.js

"use strict";

requirejs.config({
    bundles: {
        'https://url.com/WebResources/ccseq_/WebResources/js/lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
        //'../lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
    }
});

require(["Model/ProductEvaluation", "Model/ProductEvaluationArea", "API/ProductEvaluation", "API/ProductEvaluationArea", "../../../node_modules/vue-star-rating/dist/star-rating.min"], function (ProductEvaluationModel, ProductEvaluationAreaModel, ProductEvaluationAPI, ProductEvaluationAreaAPI, StarRating) {

    var currentProductEvaluation = new ProductEvaluationModel.ProductEvaluation(); 

    Vue.component('star-rating', StarRating);

    var areas = new Vue({
        el: '#product-eval-areas',
        data: { areas: currentProductEvaluation.ProductEvaluationAreas }
                    })

    $(document).ready(function () {        
        PopulatePage();
    });

    function PopulatePage() {
        $("#btnRun").click(function () {
            var productEvaluationAPI = new ProductEvaluationAPI.ProductEvaluation();
            productEvaluationAPI.Get(window.parent.Xrm.Page.data.entity.getId().replace(/({|})/g, "")).
                then(
                function (results) {
                    LoadProductEvaluation(results);
                    console.log("success");
                }).catch(function (results) {
                    console.log("Fail");
                });
        });        
    }

    function LoadProductEvaluation(productEvaluation) {
        productEvaluation.ccseq_ccseq_productevaluation_ccseq_producteval.forEach(function (pe) {
            var newProductEvaluationArea = new ProductEvaluationAreaModel.ProductEvaluationArea();
            newProductEvaluationArea.EvaluationArea = pe.ccseq_evaluationarea;
            newProductEvaluationArea.ProductEvaluationScore = pe.ccseq_productevaluationscore;
            newProductEvaluationArea.SelfEvaluation = pe.ccseq_selfevaluation;
            newProductEvaluationArea.ProductEvaluationID = pe.ccseq_productevaluationid;
            currentProductEvaluation.ProductEvaluationAreas.push(newProductEvaluationArea);
        });        
    }
});
Solution

  • This is my package, but I didn't document how to use it with requireJS as I haven't used it in quite a few years. It is however bundled as a named UMD module which is defined as "VueStarRating" so you need to add the following to your requirejs config:

    paths: {
  'VueStarRating': '../../../node_modules/vue-star-rating/dist/star-rating.min'
}

    Then you can do:

    require(['VueStarRating'], function(StarRating) {
  Vue.component('star-rating', StarRating.default);

  new Vue({
    el: '#app'
  })
});

    You can check it out on this JSFiddle: https://jsfiddle.net/2Lgz9vs4/

    If you run into further trouble then it might be worth tagging your questions with requirejs aswell. Most Vue developers use CommonJS (including myself) so you should get better responses there.