SCSS Compile Error on Package


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:

  1. Using react-scripts start runs without issues.
  2. Removing the @import 'mdb.pro.scss' line fixes the build.
  3. Commenting out the entire contents of mdb.pro.scss also fixes the build.
  4. Reducing mdb.pro.scss to just the first line repro's the broken behavior.

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 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 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! :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.3.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No
Tags