issue with custom component

Hello I created an small custom component that contains a grid, but Im having an error, Im not sure if it is because of the grid, here is my code:

  private class GridDOFieldsComponent  extends CustomField<Field[]> {
        private final Grid<Field> grid = new Grid<>();
        private final List<Field> fieldList = new ArrayList<>();
        private final ListDataProvider<Field> dataProvider = new ListDataProvider<>(fieldList);
        private final HorizontalLayout hlGridtoolBar = new HorizontalLayout();
        private final VerticalLayout vlGridContent = new VerticalLayout();

        public GridDOFieldsComponent(){
            buildGrid();
            add(vlContent);
            vlContent.setHorizontalComponentAlignment(FlexComponent.Alignment.CENTER, vlGridContent);
        }

        private void buildGrid(){

                grid.setDataProvider(dataProvider);

                Grid.Column<Field> colName = grid.addColumn(Field::getLabel).setHeader("Label").setWidth("20%").setResizable(true);
                Grid.Column<Field> colDesc = grid.addColumn(Field::getDescription).setHeader("Descripción").setWidth("35%").setResizable(true);
                Grid.Column<Field> colDataType = grid.addColumn(Field::getDataType).setHeader("Data Type").setWidth("20%").setResizable(true);
                //Grid.Column<DataObjectResponse> colActions =  grid.addComponentColumn(item -> createRemoveButton(dataObjectGrid, item)).setHeader("Actions").setWidth("25%").setResizable(true);


                grid.setSelectionMode(Grid.SelectionMode.NONE);

                HeaderRow topRow = grid.prependHeaderRow();
                HeaderRow.HeaderCell buttonsCell = topRow.join( colName, colDesc, colDataType  );
                buttonsCell.setComponent(hlGridtoolBar);
            vlGridContent.add(grid);
            vlGridContent.setWidth("1024px");
                // gridContainer.setHeight("");
              //  vlyContent.add(gridContainer);


        }


        @Override
        protected Field[] generateModelValue() {

            Field[] f = fieldList.toArray(  new Field[fieldList.size()]
 );

            return f;
        }

        @Override
        protected void setPresentationValue(Field[] fields) {
                fieldList.clear();
                fieldList.addAll(  Arrays.asList( fields) );
        }



    }

This is the error:

2019-10-18 00:03:58.934 ERROR 99044 — [ webpack]
dev-webpack: ERROR in …/target/frontend/generated-flow-imports.js
2019-10-18 00:03:58.934 ERROR 99044 — [ webpack]
dev-webpack: Module not found: Error: Can’t resolve ‘@vaadin/vaadin-custom-field/src/vaadin-custom-field.js’ in ‘…/designer/target/frontend’
2019-10-18 00:03:58.934 ERROR 99044 — [ webpack]
dev-webpack: @ …/target/frontend/generated-flow-imports.js 54:0-64

2019-10-18 00:03:58.934 ERROR 99044 — [ webpack]
dev-webpack: ERROR in …/target/frontend/generated-flow-imports.js
2019-10-18 00:03:58.934 ERROR 99044 — [ webpack]
dev-webpack: Module not found: Error: Can’t resolve ‘@vaadin/vaadin-custom-field/src/vaadin-custom-field.js’ in ‘…/designer/target/frontend’
2019-10-18 00:03:58.934 ERROR 99044 — [ webpack]
dev-webpack: @ …/target/frontend/generated-flow-imports.js 54:0-64
2019-10-18 00:03:58.934 ERROR 99044 — [ webpack]
dev-webpack: ? ?wdm?: Failed to compile.

Is like is something missing, btw I created the project using https://start.vaadin.com/

Thank you in advance