SassError migrating to V11

[PatrikHysky]

I'm trying to migrate from V10 to V11. Getting a SassError at compile time. Please advise.

SassError: Undefined function.
27 │ $grid-gutter: convert.rem(32px) !default;
___________________^^^^^^^^^^^^^^^^^_________
node_modules/@carbon/styles/node_modules/@carbon/grid/scss/_config.scss 27:15 @forward node_modules/@carbon/styles/scss/_config.scss 70:1 @forward node_modules/@carbon/styles/index.scss 8:1 @forward node_modules/@carbon/react/index.scss 9:1 @use styles/index.scss 6:1 root stylesheet

Here are my package.json dependencies:

"dependencies": {
    "@carbon/ibmdotcom-react": "^1.33.1",
    "@carbon/pictograms-react": "^11.26.2",
    "@carbon/react": "^1.3.0",
    "@carbon/styles": "^1.3.0",
    "axios": "^0.27.2",
    "html-react-parser": "^1.2.7",
    "lit-element": "^2.5.1",
    "lit-html": "^1.4.1",
    "next": "^12.1.6",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-google-recaptcha-v3": "^1.9.5",
    "sass": "^1.39.2",
    "swr": "^0.5.6"
  },

[joshblack]

Hi there! 👋

It may be that you need to configure Sass with Next.js to correctly load modules from node_modules.

I believe you can do this in your next.config.js file by writing the following:

'use strict';

const path = require('path');

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'node_modules')],
  },
};

Hope this helps!

[PatrikHysky]

I should point out that I have no issues compiling/running my project with the current configuration without @carbon/react. All the other @carbon packages (listed above) work fine, as does sass. I will try your suggestion and report back.

BTW I noticed that @carbon/ibmdotcom-react (latest 1.33.1) still uses V10. Will I run into conflicts? Would it be more prudent to wait until @carbon-ibmdotcom-react adopts V11?

Thanks.

[jnm2377]

Hi @PatrikHysky it's likely an incompatibility issue with the dotcom package since they're still on v10. We recommend waiting until dotcom adopts v11 to upgrade your carbon packages to v11. :)