[Bug] Failure to Compile

[ghost]

Version

1.10

Reproduction link

https://www.creative-tim.com/product/argon-design-system-react

Operating System

Windows 10

Device

N/A

Browser & Version

N/A

Steps to reproduce

1. Yarn Install
2. Yarn Start

The reason why I'm using Yarn is because if I use npm install it will throw tons of errors (I have GYP installed etc), installed node-sass, same thing, upgraded all dependencies, same thing, but with Yarn, it installs with no errors... I don't get why that is. Either way, the following error still happens. This is from a fresh download of argon, nothing changed.

What is expected?

The product should compile and start.

What is actually happening?

Failed to compile.

./src/assets/scss/argon-design-system-react.scss?v1.1.0 (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/assets/scss/argon-design-system-react.scss?v1.1.0)
SassError: argument $color of rgba($color, $alpha) must be a color
on line 451 of src/assets/scss/argon-design-system/variables.scss, in function rgba
from line 451 of src/assets/scss/argon-design-system/variables.scss
from line 23 of src/assets/scss/argon-design-system-react.scss

$input-btn-focus-color: rgba($component-active-bg, 1);

------------------------------^

---

Solution

Additional comments

[AgentPoles]

yea, same here

[AgentPoles]

fixed! used the solution recommended by @einazare

replace package.json with:

{
"name": "argon-design-system-react",
"version": "1.1.0",
"description": "React version of Argon Design System by Creative Tim",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/creativetimofficial/argon-design-system-react.git"
},
"keywords": [
"react",
"reactjs",
"argon",
"argon-react",
"design",
"design-react",
"argon-design",
"argon-design-react",
"kit",
"react-kit",
"argon-design-system",
"argon-design-system-react",
"design-system-react"
],
"author": "Creative Tim",
"license": "MIT",
"bugs": {
"url": "https://github.com/creativetimofficial/argon-design-system-react/issues"
},
"homepage": "https://demos.creative-tim.com/argon-design-system-react/",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && gulp licenses",
"test": "react-scripts test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"compile-sass": "node-sass src/assets/scss/argon-design-system-react.scss src/assets/css/argon-design-system-react.css",
"minify-sass": "node-sass src/assets/scss/argon-design-system-react.scss src/assets/css/argon-design-system-react.min.css --output-style compressed",
"map-sass": "node-sass src/assets/scss/argon-design-system-react.scss src/assets/css/argon-design-system-react.css --source-map true"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"dependencies": {
"bootstrap": "4.3.1",
"classnames": "2.3.1",
"headroom.js": "0.12.0",
"moment": "2.29.1",
"node-sass": "5.0.0",
"nouislider": "14.7.0",
"react": "17.0.2",
"react-datetime": "2.16.3",
"react-dom": "17.0.2",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"reactstrap": "8.9.0"
},
"devDependencies": {
"@types/googlemaps": "3.43.3",
"@types/markerclustererplus": "2.1.33",
"@types/react": "17.0.4",
"eslint-plugin-flowtype": "5.7.2",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.9",
"jquery": "3.6.0",
"typescript": "4.2.4"
}
}

you might also want to delete yarn.lock or packagelock.json and also delete node_modules.

[sajadevo]

Hi there,

The issue is fixed on the latest version of the product.

Regards,
Sajad