Error during build stage. RollupError: "GridPlugin" is not exported by "node_modules/@syncfusion/ej2-vue-grids/src/grid/grid.component.js"

[Ali]

Hi,

My app deployment gor failed during the Build stage with the following error. I would appreciate it if you let me know what went wrong here and how I can fix it.

2023-02-20T22:21:44.350Z [WARNING]: "GridPlugin" is not exported by "node_modules/@syncfusion/ej2-vue-grids/src/grid/grid.component.js", imported by "node_modules/@syncfusion/ej2-vue-grids/src/index.js".

file: /codebuild/output/src386949278/src/para/node_modules/@syncfusion/ej2-vue-grids/src/index.js:6:24

4: export { AggregateColumnsDirective, AggregateColumnDirective, AggregateColumnsPlugin, AggregateColumnPlugin } from './grid/aggregate-columns.directive';

5: export { AggregatesDirective, AggregateDirective, AggregatesPlugin, AggregatePlugin } from './grid/aggregates.directive';

6: export { GridComponent, GridPlugin } from './grid/grid.component';

^

7: export { PagerComponent, PagerPlugin } from './pager/pager.component';

2023-02-20T22:21:44.351Z [WARNING]: error during build:

RollupError: "GridPlugin" is not exported by "node_modules/@syncfusion/ej2-vue-grids/src/grid/grid.component.js", imported by "node_modules/@syncfusion/ej2-vue-grids/src/index.js".

at error (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:1967:30)

at Module.error (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:12962:16)

at Module.getVariableForExportName (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:13116:29)

at getVariableForExportNameRecursive (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:12788:19)

at Module.getVariableFromNamespaceReexports (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:13544:50)

at Module.getVariableForExportName (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:13144:22)

at getVariableForExportNameRecursive (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:12788:19)

at Module.traceVariable (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:13343:35)

at ModuleScope.findVariable (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:11826:39)

at Identifier.bind (file:///codebuild/output/src386949278/src/para/node_modules/rollup/dist/es/shared/rollup.js:7782:40)

2023-02-20T22:21:44.413Z [ERROR]: !!! Build failed

2023-02-20T22:21:44.413Z [ERROR]: !!! Non-Zero Exit Code detected

I am using nodejs version is 16, and following is my package.json file.

{

"name": "ista_para",

"version": "1.1.0",

"private": true,

"scripts": {

"dev": "vite",

"build": "vite build",

"preview": "vite preview"

},

"dependencies": {

"@aws-amplify/ui-vue": "^3.1.5",

"@aws-sdk/util-base64": "^3.208.0",

"@popperjs/core": "^2.11.6",

"@stencil/core": "^3.0.0",

"@syncfusion/ej2-data": "^20.4.48",

"@syncfusion/ej2-vue-dropdowns": "^20.4.48",

"@syncfusion/ej2-vue-grids": "^20.4.48",

"@vitejs/plugin-vue-jsx": "^3.0.0",

"@vuelidate/core": "^2.0.0",

"@vuelidate/validators": "^2.0.0",

"aws-amplify": "^5.0.11",

"bootstrap": "^5.2.3",

"bootstrap-vue-3": "^0.5.1",

"chart.js": "^4.1.2",

"pinia": "^2.0.29",

"uuidv4": "^6.2.13",

"vee-validate": "^4.7.3",

"vue": "^3.2.45",

"vue-chartjs": "^5.1.0",

"vue-class-component": "8.0.0-rc.1",

"vue-cookieconsent-component": "^1.2.0",

"vue-router": "^4.1.6"

},

"devDependencies": {

"@iconify/vue": "^4.1.0",

"@vitejs/plugin-vue": "^4.0.0",

"sass": "^1.57.1",

"unplugin-vue-components": "^0.22.12",

"vite": "^4.0.4"

}

}

[Rajapandiyan Settu]

Hi Ali,

Thanks for contacting Syncfusion support.

We are unable to replicate the issue, the Vue 3 Grid is working fine from our side. Please find the attached sample for your reference.

Kindly follow the below documentation to get started with Vue 3 Grid.

Vue 3 Grid:

https://ej2.syncfusion.com/vue/documentation/grid/getting-started-vue/

https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/

To use the Syncfusion component with Vue 3, we need the following prerequisites

Prerequisites

• vue : 3+
• node : 10.15+
• vue-class-component : 8.0.0-rc.1

 

[package.json]

  "dependencies": {

    "@syncfusion/ej2-vue-calendars": "^20.4.48",

    "@syncfusion/ej2-vue-grids": "^20.4.48",

    "core-js": "^3.8.3",

    "vue": "^3.2.13",

    "vue-class-component": "8.0.0-rc.1"

  },

 

The way of defining the features like Paging, Filtering, etc., in the EJ2 Grid is same in both Vue 2 and Vue 3. The only difference between Vue 2 and Vue 3 is component registration and template registration. Other than that all are same in both Vue 2 and Vue 3. Kindly refer to the below documentation for more information.

Migration from Vue2 to Vue3: https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#migration-from-vue-2-to-vue-3

Still, if you face the issue, kindly share the issue reproducible sample or try to replicate it in the given sample.

Regards,

Rajapandiyan S

Attachment: vue3_grid_F180659_6d92b9ef.zip