ej2 imports failing

[Joel Watkins]

Hello,

Sorry the control option is wrong but there's nothing relevant there for this, I don't think. So, I did a minor update of the Next JS version of my app and suddenly I'm getting this build error that wasn't around before: 

SassError: Can't find stylesheet to import.

   ╷

16 │ @import '~@syncfusion/ej2-react-grids/styles/pager/material.scss';

I'll add in my complete imports at the top of my globals.scss after this, but any idea why this could be happening? Of course commenting that out solves the problem, but then my pagination is broken. Have added relevant package versions below also.

Many thanks for any help, as this confusing me a great deal...!

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

@import './_variables.scss';

@import '~@syncfusion/ej2-base/styles/material.scss';

@import '~@syncfusion/ej2-react-buttons/styles/button/material.scss';

@import '~@syncfusion/ej2-react-buttons/styles/check-box/material.scss';

@import '~@syncfusion/ej2-react-buttons/styles/radio-button/material.scss';

@import '~@syncfusion/ej2-react-buttons/styles/switch/material.scss';

@import '~@syncfusion/ej2-react-calendars/styles/calendar/material.scss';

@import '~@syncfusion/ej2-react-calendars/styles/datepicker/material.scss';

@import '~@syncfusion/ej2-react-calendars/styles/daterangepicker/material.scss';

@import '~@syncfusion/ej2-react-dropdowns/styles/drop-down-base/material.scss';

@import '~@syncfusion/ej2-react-dropdowns/styles/drop-down-list/material.scss';

@import '~@syncfusion/ej2-react-dropdowns/styles/combo-box/material.scss';

@import '~@syncfusion/ej2-react-grids/styles/grid/material.scss';

@import '~@syncfusion/ej2-react-grids/styles/pager/material.scss';

@import '~@syncfusion/ej2-react-inputs/styles/input/material.scss';

@import '~@syncfusion/ej2-react-inputs/styles/numerictextbox/material.scss';

@import '~@syncfusion/ej2-react-navigations/styles/sidebar/material.scss';

@import '~@syncfusion/ej2-react-navigations/styles/tab/material.scss';

@import '~@syncfusion/ej2-react-navigations/styles/toolbar/material.scss';

@import '~@syncfusion/ej2-react-navigations/styles/treeview/material.scss';

@import '~@syncfusion/ej2-react-popups/styles/material.scss';

@import '~@syncfusion/ej2-layouts/styles/avatar/material.scss';

@import '~@syncfusion/ej2-layouts/styles/card/material.scss';

@import '~@syncfusion/ej2-notifications/styles/badge/material.scss';

"dependencies": {

    "@fortawesome/fontawesome-svg-core": "^6.1.1",

    "@fortawesome/free-solid-svg-icons": "^6.1.1",

    "@fortawesome/react-fontawesome": "^0.1.18",

    "@reduxjs/toolkit": "^1.8.1",

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

    "@syncfusion/ej2-layouts": "^20.1.55",

    "@syncfusion/ej2-notifications": "^20.1.55",

    "@syncfusion/ej2-react-buttons": "^20.1.55",

    "@syncfusion/ej2-react-calendars": "^20.1.55",

    "@syncfusion/ej2-react-charts": "^20.1.55",

    "@syncfusion/ej2-react-dropdowns": "^20.1.55",

    "@syncfusion/ej2-react-grids": "^20.1.55",

    "@syncfusion/ej2-react-inputs": "^20.1.55",

    "@syncfusion/ej2-react-navigations": "^20.1.55",

    "@syncfusion/ej2-react-popups": "^20.1.55",

    "axios": "^0.27.2",

    "dayjs": "^1.11.2",

    "env-cmd": "^10.1.0",

    "formik": "^2.2.9",

    "next": "^12.3.5",

    "next-auth": "4.3.4",

    "next-pwa": "5.5.2",

    "react": "^17.0.2",

    "react-dom": "^17.0.2",

    "react-loader-spinner": "^5.1.4",

    "react-query": "^3.39.0",

    "react-redux": "^8.0.1",

    "sass": "^1.51.0",

    "sweetalert2": "11.4.14",

    "sweetalert2-react-content": "^4.2.0",

    "yup": "^0.32.11"

  },

  "devDependencies": {

    "@types/node": "^20.19.29",

    "@types/react": "^17.0.45",

    "autoprefixer": "^10.4.7",

    "cssnano": "^5.1.8",

    "eslint": "^8.15.0",

    "eslint-config-next": "^12.3.5",

    "postcss": "8.4.13",

    "tailwindcss": "^3.0.24",

    "typescript": "^5.9.3"

  }

[Sivaranjani Rajasekaran]

Hi Joel Watkins,

Greetings from Syncfusion support!

Thank you for sharing the detailed information. We reviewed the build error and the SCSS imports provided in your global.scss. The issue occurs because the Pager SCSS file is being imported from an incorrect package path.

The Pager component belongs to the EJ2 Navigations package, so the correct import should be:

@import '~@syncfusion/ej2-react-navigations/styles/pager/material.scss';

Screenshot:

Sample : Please find the sample attached.

If you still experience any issues, kindly share a reproducible sample, or try to replicate the issue in the sample we provided. This will help us validate further and provide a prompt and accurate solution.

Regards,

Sivaranjani R

Attachment: Next_Js_Scss_61e270e0.zip

[Joel Watkins]

Thanks for the response!

It does work - now I can build without errors and the pagination is working fine. However, now it says my Syncfusion license is invalid (if I revert back to the previous code, the license is fine). Slightly confusing as I haven't updated any Syncfusion packages. They are exactly the same as you see in the sample above.

Thanks for any help!

Joel

[Joel Watkins]

Actually don't worry, I think I've figured that part out. Many thanks for your help :)

[Dineshnarasimman Muthu]

Hi,

 

We were glad that the issue has been resolved from your end. Please get back to us for further assistance.

 

Regards,

Dineshnarasimman M