Блог

Я пытаюсь создать свою библиотеку веб-компонентов с использованием Vue. И есть этот журнал ошибок:

 -  Building for production as web component...

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                        2:43:08 PM

 error  in ./src/components/first-component.vue?vueamp;type=templateamp;id=5005d095amp;bindings={"data":"data"}?shadow

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Unexpected token ? in JSON at position 15

    at JSON.parse (<anonymous>)
    at Object.TemplateLoader (...vue-componentsnode_modulesvue-loader-v16disttemplateLoader.js:38:154)

 @ ./src/components/first-component.vue?vueamp;type=templateamp;id=5005d095amp;bindings={"data":"data"}?shadow 1:0-427 1:0-427
 @ ./src/components/first-component.vue?shadow
 @ ./node_modules/@vue/cli-service/lib/commands/build/entry-wc.js

  Building for production as web component...

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                        2:43:22 PM

 error  in ./src/components/first-component.vue?vueamp;type=templateamp;id=5005d095amp;bindings={"data":"data"}?shadow

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 1)
Unexpected token ? in JSON at position 15

    at JSON.parse (<anonymous>)
    at Object.TemplateLoader (...vue-componentsnode_modulesvue-loader-v16disttemplateLoader.js:38:154)

 @ ./src/components/first-component.vue?vueamp;type=templateamp;id=5005d095amp;bindings={"data":"data"}?shadow 1:0-427 1:0-427
 @ ./src/components/first-component.vue?shadow
 @ ./node_modules/@vue/cli-service/lib/commands/build/entry-wc.js

 ERROR  Build failed with errors.
  

Но замечаю странное в исходном коде.
Я использую команду из руководства по cli: vue-cli-service build —target wc —name my-element src/components/first-component.vue

Код компонента:

     <template>
    First component
    <igc-data-grid ref="grid"
        height="100%"
        width="100%"
        auto-generate-columns="true"
        default-column-min-width="100"
        summary-scope="Root"
        is-column-options-enabled="true"
        is-group-collapsable="true"
        group-header-display-mode="Combined"
        group-summary-display-mode="RowBottom"
        column-moving-mode="Deferred"
        column-moving-animation-mode="SlideOver"
        column-moving-separator-width="2"
        column-showing-animation-mode="slideFromRightAndFadeIn"
        column-hiding-animation-mode="slideToRightAndFadeOut"
        selection-mode="SingleRow"
        corner-radius-top-left="0"
        corner-radius-top-right="0">
    </igc-data-grid>
</template>

<script>
    import { ModuleManager } from 'igniteui-webcomponents-core';
    import { IgcDataGridModule } from 'igniteui-webcomponents-grids';

    ModuleManager.register(
        IgcDataGridModule
    );

    export default {
        name: 'first-component',

        data() {
            return {
                data: [{
                    Discontinued: false,
                    OrderDate: new Date("2012-02-12"),
                    ProductID: 1,
                    ProductName: "Chai",
                    QuantityPerUnit: "10 boxes x 20 bags",
                    ReorderLevel: 10,
                    UnitPrice: 18.0000,
                    UnitsInStock: 39
                }, {
                    Discontinued: false,
                    OrderDate: new Date("2003-03-17"),
                    ProductID: 2,
                    ProductName: "Chang",
                    QuantityPerUnit: "24 - 12 oz bottles",
                    ReorderLevel: 25,
                    UnitPrice: 19.0000,
                    UnitsInStock: 17
                }, {
                    Discontinued: false,
                    OrderDate: new Date("2006-03-17"),
                    ProductID: 3,
                    ProductName: "Aniseed Syrup",
                    QuantityPerUnit: "12 - 550 ml bottles",
                    ReorderLevel: 25,
                    UnitPrice: 10.0000,
                    UnitsInStock: 13
                }, {
                    Discontinued: false,
                    OrderDate: new Date("2016-03-17"),
                    ProductID: 4,
                    ProductName: "Chef Antony Cajun Seasoning",
                    QuantityPerUnit: "48 - 6 oz jars",
                    ReorderLevel: 0,
                    UnitPrice: 22.0000,
                    UnitsInStock: 53
                }, {
                    Discontinued: true,
                    OrderDate: new Date("2011-11-11"),
                    ProductID: 5,
                    ProductName: "Chef Antony Gumbo Mix",
                    QuantityPerUnit: "36 boxes",
                    ReorderLevel: 0,
                    UnitPrice: 21.3500,
                    UnitsInStock: 0
                }]
            }
        },

        mounted() {
            this.$refs.grid.dataSource = this.data;
        }
    }
</script>
  

Я новичок в Vue. Пожалуйста, посоветуйте.
Возможно, что-то с импортом сторонних компонентов.