[material/list] math div function not found ~ Laravel ^8

[mark1828]

Whenever I use @use "@material/list"; in my cms.scss file, I get the following error.

Compile error:

ERROR in ./resources/sass/cms.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
   ╷
33 │   $normalized-channel-value: math.div($channel-value, 255);
   │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@material\theme\_theme-color.scss 33:30   -linear-channel-value()
  node_modules\@material\theme\_theme-color.scss 44:9    luminance()
  node_modules\@material\theme\_theme-color.scss 54:13   contrast()
  node_modules\@material\theme\_theme-color.scss 73:19   tone()
  node_modules\@material\theme\_theme-color.scss 86:14   contrast-tone()
  node_modules\@material\theme\_theme-color.scss 137:17  @use
  node_modules\@material\list\_variables.scss 22:1       @forward
  node_modules\@material\list\_index.scss 1:1            @use
  resources\sass\cms.scss 4:1                            root stylesheet
    at processResult (C:\xampp\htdocs\websites\Laravel-website\node_modules\webpack\lib\NormalModule.js:758:19)
    at C:\xampp\htdocs\websites\Laravel-website\node_modules\webpack\lib\NormalModule.js:860:5
    at C:\xampp\htdocs\websites\Laravel-website\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\xampp\htdocs\websites\Laravel-website\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\xampp\htdocs\websites\Laravel-website\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at C:\xampp\htdocs\websites\Laravel-website\node_modules\sass-loader\dist\index.js:62:7
    at Function.call$2 (C:\xampp\htdocs\websites\Laravel-website\node_modules\sass\sass.dart.js:91729:16)
    at _render_closure1.call$2 (C:\xampp\htdocs\websites\Laravel-website\node_modules\sass\sass.dart.js:80373:12)
    at _RootZone.runBinary$3$3 (C:\xampp\htdocs\websites\Laravel-website\node_modules\sass\sass.dart.js:27269:18)
    at _FutureListener.handleError$1 (C:\xampp\htdocs\websites\Laravel-website\node_modules\sass\sass.dart.js:25797:19)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

Package.json:

  "devDependencies": {
    "axios": "^0.21",
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.12.1",
    "laravel-mix": "^6.0.43",
    "lodash": "^4.17.19",
    "popper.js": "^1.16.1",
    "postcss": "^8.1.14",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2"
  },

"dependencies": {
    "@material/list": "^14.0.0",
    "autoprefixer": "10.4.5",
    "material-components-web": "^14.0.0"
  }

Package-lock.json:

  "devDependencies": {
    "axios": "^0.21",
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.12.1",
    "laravel-mix": "^6.0.43",
    "lodash": "^4.17.19",
    "popper.js": "^1.16.1",
    "postcss": "^8.1.14",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2"
  }

  "dependencies": {
    "@material/list": "^14.0.0",
    "autoprefixer": "10.4.5",
    "material-components-web": "^14.0.0"
  },

Got the latest versions everything, what is the problem here?