Topic: SCSS Compile Error on Package
Expected behavior
react-scripts build packages build without error.
Actual behavior
react-scripts build fails with the error:
./src/styles/app.scss
ParserError: Syntax Error at line: 1, column 26
at runMicrotasks (<anonymous>)
Resources (screenshots, code snippets etc.)
The contents of app.scss is...
@import 'mdb.pro.scss';
The contents of mdb.pro.scss is...
// MDB FREE
@import '~mdb-react-ui-kit/dist/scss/mdb.free.scss';
// MDB PRO
@import '~mdb-react-ui-kit/dist/scss/pro/variables';
@import '~mdb-react-ui-kit/dist/scss/pro/modal';
@import '~mdb-react-ui-kit/dist/scss/pro/perfect-scrollbar';
@import '~mdb-react-ui-kit/dist/scss/pro/sidenav';
@import '~mdb-react-ui-kit/dist/scss/pro/animate';
@import '~mdb-react-ui-kit/dist/scss/pro/lightbox';
@import '~mdb-react-ui-kit/dist/scss/pro/rating';
@import '~mdb-react-ui-kit/dist/scss/pro/timepicker';
@import '~mdb-react-ui-kit/dist/scss/pro/navbar';
@import '~mdb-react-ui-kit/dist/scss/pro/datepicker';
@import '~mdb-react-ui-kit/dist/scss/pro/popconfirm';
@import '~mdb-react-ui-kit/dist/scss/pro/datatable';
@import '~mdb-react-ui-kit/dist/scss/pro/stepper';
@import '~mdb-react-ui-kit/dist/scss/pro/sticky';
@import '~mdb-react-ui-kit/dist/scss/pro/select';
@import '~mdb-react-ui-kit/dist/scss/pro/loading';
@import '~mdb-react-ui-kit/dist/scss/pro/autocomplete';
@import '~mdb-react-ui-kit/dist/scss/pro/theme/theming';
@import '~mdb-react-ui-kit/dist/scss/pro/chips';
@import '~mdb-react-ui-kit/dist/scss/pro/multi-range';
@import '~mdb-react-ui-kit/dist/scss/pro/date-time-picker';
Additional Notes:
- Using
react-scripts startruns without issues. - Removing the
@import 'mdb.pro.scss'line fixes the build. - Commenting out the entire contents of
mdb.pro.scssalso fixes the build. - Reducing
mdb.pro.scssto just the first line repro's the broken behavior.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 1.3.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: Yes
- Provided link: No
Krzysztof Wilk staff commented 3 years ago
We are working on fixing this issue. The fix should appear in about 1-2 weeks. For now, you can use one of the solutions provided here: https://mdbootstrap.com/support/react/mdb5-version-1-4-0-npm-run-build-error/. I'm sorry for that :(
Jean-Philippe Steinmetz free commented 3 years ago
The workaround appears to only be for npm based installs but we use yarn. Is there a workaround for those of us using yarn?
Jean-Philippe Steinmetz free commented 3 years ago
It looks like just adding 'resolutions' to my package file was enough to fix the problem using yarn. Thanks. I look forward to the real fix! :)