search

syncfusion / ej2-vue-samples

Essential JS 2 demo samples for Vue
Other
32 stars 34 forks source link

Demo fails to build with 8 errors #13

Closed njwest closed 4 years ago

njwest commented 5 years ago

Looks like syntax errors / code errors from missing closing tags are preventing this demo from running:

npm run serve

> ej2-vue-samples@1.0.0 serve /Users/nick/Desktop/ej2-vue-samples
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 69% building 4816/4873 modules 57 active ...on/ej2-heatmap/src/heatmap/axis/axis.js[BABEL] Note: The code generator has deoptimised the styling of /Users/nick/Desktop/ej2-vue-samples/src/grid/data-source.ts as it exceeds the max of 500KB.
 98% after emitting CopyPlugin                                                  .   
 ERROR  Failed to compile with 8 errors                                   12:51:08

 error  in ./src/gantt/taskbar-temp.vue?vue&type=template&id=f424d772&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Cannot use <template> as component root element because it may contain multiple nodes.

  1  |  
     |   
  2  |  <template v-if="data.TaskName == 'Oscar moments'">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3  |    <div class="e-gantt-child-taskbar e-custom-moments" style="height:100%;border-radius:5px;">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4  |      <template v-if="data.taskDuration < 4">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5  |        <img class="moments" height="32px" width="32px">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  6  |      </template>
     |  ^^^^^^^^^^^^^^^
  7  |      <template v-else>
     |  ^^^^^^^^^^^^^^^^^^^^^
  8  |        <img class="moments" height="32px" width="32px">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  9  |        <span
     |  ^^^^^^^^^^^
  10 |          class="e-task-label"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  11 |          style="position:absolute;top:15px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  12 |        >{{data.Performance}}</span>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 |      </template>
     |  ^^^^^^^^^^^^^^^
  14 |    </div>
     |  ^^^^^^^^
  15 |  </template>
     |  ^^^^^^^^^^^
  16 |  <template v-else-if="data.TaskName == 'Oscar performance'">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  17 |    <div
     |  ^^^^^^
  18 |      class="e-gantt-child-taskbar e-custom-performance"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  19 |      style="height:100%;border-radius:5px;"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  20 |    >
     |  ^^^
  21 |      <template v-if="data.taskDuration <= 5">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  22 |        <img class="face-mask" height="32px" width="32px">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  23 |      </template>
     |  ^^^^^^^^^^^^^^^
  24 |      <template v-else>
     |  ^^^^^^^^^^^^^^^^^^^^^
  25 |        <img class="face-mask" height="32px" width="32px">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  26 |        <span
     |  ^^^^^^^^^^^
  27 |          class="e-task-label"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  28 |          style="position:absolute;top:5px;font-size:12px;text-overflow:ellipsis;height:90%;overflow:hidden;"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  29 |        >{{data.Performance}}</span>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  30 |      </template>
     |  ^^^^^^^^^^^^^^^
  31 |    </div>
     |  ^^^^^^^^
  32 |  </template>
     |  ^^^^^^^^^^^
  33 |  <template v-else>
     |  ^^^^^^^^^^^^^^^^^
  34 |    <div
     |  ^^^^^^
  35 |      class="e-gantt-parent-taskbar e-custom-parent"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  36 |      style="height:100%;border-radius:5px;text-overflow:ellipsis;"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  37 |    >
     |  ^^^
  38 |      <template v-if="data.taskDuration < 4">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  39 |        <img class="oscar" height="32px" width="32px">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  40 |      </template>
     |  ^^^^^^^^^^^^^^^
  41 |      <template v-else>
     |  ^^^^^^^^^^^^^^^^^^^^^
  42 |        <template v-if="data.Winner && data.Movie">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  43 |          <img class="oscar" height="32px" width="32px">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  44 |          <span
     |  ^^^^^^^^^^^^^
  45 |            class="e-task-label"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  46 |            style="position:absolute; top:13px;font-size:14px;"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  47 |          >{{data.Winner}}</span>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  48 |          <span
     |  ^^^^^^^^^^^^^
  49 |            class="e-task-label"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  50 |            style="position:absolute;top:33px;font-size:10px;text-overflow:ellipsis;"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  51 |          >{{data.Movie}}</span>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  52 |        </template>
     |  ^^^^^^^^^^^^^^^^^
  53 |        <template v-else-if="data.Movie">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  54 |          <img class="oscar" height="32px" width="32px">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  55 |          <span
     |  ^^^^^^^^^^^^^
  56 |            class="e-task-label"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  57 |            style="position:absolute; top:13px;font-size:12px;text-overflow:ellipsis;"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  58 |          >{{data.Movie}}</span>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  59 |        </template>
     |  ^^^^^^^^^^^^^^^^^
  60 |        <template v-else>
     |  ^^^^^^^^^^^^^^^^^^^^^^^
  61 |          <span class="e-task-label"></span>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  62 |        </template>
     |  ^^^^^^^^^^^^^^^^^
  63 |      </template>
     |  ^^^^^^^^^^^^^^^
  64 |    </div>
     |  ^^^^^^^^
  65 |  </template>
     |  ^^^^^^^^^^^

 @ ./src/gantt/taskbar-temp.vue?vue&type=template&id=f424d772& 1:0-386 1:0-386
 @ ./src/gantt/taskbar-temp.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/gantt/taskbar-template.vue?vue&type=script&lang=js&
 @ ./src/gantt/taskbar-template.vue?vue&type=script&lang=js&
 @ ./src/gantt/taskbar-template.vue
 @ ./src/router.config.ts
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

 error  in ./src/tree-grid/detail-temp.vue?vue&type=template&id=3a03cbcd&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  alt="{{data.FullName}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

  2  |  <div>
  3  |       <div style="position: relative; display: inline-block; float: left; font-weight: bold; width: 10%;padding:5px 4px 2px 27px;;">
  4  |          <img :src="image" alt="{{data.FullName}}"/>
     |                            ^^^^^^^^^^^^^^^^^^^^^^^
  5  |      </div>
  6  |      <div style="padding-left: 10px; display: inline-block; width: 66%; text-wrap: normal;font-size:13px;font-family:'Segoe UI';">

 @ ./src/tree-grid/detail-temp.vue?vue&type=template&id=3a03cbcd& 1:0-385 1:0-385
 @ ./src/tree-grid/detail-temp.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/tree-grid/detail-template.vue?vue&type=script&lang=ts&
 @ ./src/tree-grid/detail-template.vue?vue&type=script&lang=ts&
 @ ./src/tree-grid/detail-template.vue
 @ ./src/router.config.ts
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

 error  in ./src/App.vue?vue&type=template&id=7ba5bd90&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  duplicate attribute: tabindex

  86 |                      </div>
  87 |                      <div class='sb-header-item sb-table-cell sb-settings-wrapper'>
  88 |                          <div class='sb-setting-btn' role="button" tabindex="0" aria-label="toggle settings menu" tabindex="">
     |                                                                                                                   ^^^^^^^^^^^
  89 |                              <span class='sb-settings sb-icons sb-icon-Settings-Preferences'></span>
  90 |                          </div>

 @ ./src/App.vue?vue&type=template&id=7ba5bd90& 1:0-368 1:0-368
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

 error  in ./src/calendar/month-picker.vue?vue&type=template&id=618b53a3&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  tag <code> has no matching end tag.

  15 |  <div id="description">
  16 |          <p>
  17 |              The Calendar has the <code>Start</code> and the <code>Depth<code> properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade). </p>
     |                                                                         ^^^^^^
  18 |          <p>More information on the Calendar Start/Depth can be found in the
  19 |          <a href="https://ej2.syncfusion.com/vue/documentation/api/calendar/#start" target="_blank">Start</a>|<a href="https://ej2.syncfusion.com/vue/documentation/api/calendar/#depth" target="_blank">Depth</a> documentation section.</p>

  tag <code> has no matching end tag.

  15 |  <div id="description">
  16 |          <p>
  17 |              The Calendar has the <code>Start</code> and the <code>Depth<code> properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade). </p>
     |                                                              ^^^^^^
  18 |          <p>More information on the Calendar Start/Depth can be found in the
  19 |          <a href="https://ej2.syncfusion.com/vue/documentation/api/calendar/#start" target="_blank">Start</a>|<a href="https://ej2.syncfusion.com/vue/documentation/api/calendar/#depth" target="_blank">Depth</a> documentation section.</p>

 @ ./src/calendar/month-picker.vue?vue&type=template&id=618b53a3& 1:0-386 1:0-386
 @ ./src/calendar/month-picker.vue
 @ ./src/router.config.ts
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

 error  in ./src/schedule/calendar-export-import.vue?vue&type=template&id=181b6484&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  tag <ejs-uploader> has no matching end tag.

  35 |                      </td>
  36 |                      <td style="width: 50%;">
  37 |                          <ejs-uploader id='ics-import' :cssClass='cssClass' name="ics-import" :buttons="buttons"
     |                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  38 |                              :showFileList="showFileList" :multiple="multiple" :allowedExtensions="extensions"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  39 |                              :selected="onSelect">
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

 @ ./src/schedule/calendar-export-import.vue?vue&type=template&id=181b6484& 1:0-396 1:0-396
 @ ./src/schedule/calendar-export-import.vue
 @ ./src/router.config.ts
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

 error  in ./src/tree-grid/columnmenu.vue?vue&type=template&id=74439870&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  tag <li> has no matching end tag.

  18 |              <li><code>AutoFitAll</code> - Auto fit all columns.</li>
  19 |              <li><code>ColumnChooser</code> - Choose the column visibility.</li>
  20 |              <li><code>Filter</code> - Filter option is shown to filter the current column.
     |              ^^^^
  21 |      </ul>
  22 |      

 @ ./src/tree-grid/columnmenu.vue?vue&type=template&id=74439870& 1:0-384 1:0-384
 @ ./src/tree-grid/columnmenu.vue
 @ ./src/router.config.ts
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

 error  in ./src/dashboard-layout/predefinedlayouts.vue?vue&type=template&id=67e71560&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  tag <p> has no matching end tag.

  42 |      </div>
  43 |      <div id="description">
  44 |          <p>
     |          ^^^
  45 |              This sample demonstrates how to update the panels dynamically in the dashboard layout component.
  46 |      </div>

 @ ./src/dashboard-layout/predefinedlayouts.vue?vue&type=template&id=67e71560& 1:0-391 1:0-391
 @ ./src/dashboard-layout/predefinedlayouts.vue
 @ ./src/router.config.ts
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

 error  in ./src/dashboard-layout/api.vue?vue&type=template&id=02691a32&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  tag <p> has no matching end tag.

  54 |      </div>
  55 |      <div id="description">
  56 |          <p>
     |          ^^^
  57 |              This sample allows to configure the <code>cellSize</code>, <code>cellSpacing</code>, <code>allowFloating</code> and
  58 |      <code>allowPushing</code> properties of the dashboard layout component.

 @ ./src/dashboard-layout/api.vue?vue&type=template&id=02691a32& 1:0-377 1:0-377
 @ ./src/dashboard-layout/api.vue
 @ ./src/router.config.ts
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.109:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.ts

No type errors found
Version: typescript 3.5.3
Time: 24915ms
jesusarockias commented 4 years ago

Hi Customer,

We have checked the reported issue, but we can not reproduce it at our end, and we suggest that you run the command "gulp serve" instead of "npm run serve." But, we have other compilation failure and it will be refreshed with our Volume 2, 2020 release scheduled at the end of June.

Please get back to us if you need any further assistance on this.

Regards, Jesus Arockia Sankaran S

image

njwest commented 4 years ago

I have no intention of using this software :P My issue is nearly a year old...

Good luck!

Jayakumar-Duraisamy commented 4 years ago

Hi @njwest We are closing this thread now since there is no activity. Please contact us via live chat system or create a support ticket, if you need further assistance.