index.css:22 Uncaught Error: Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: $color: theme-color("primary") is not a color.
╷
451 │ $input-btn-focus-color: rgba($component-active-bg, 1);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\scss\argon-design-system\variables.scss 451:31 @import
src\assets\scss\argon-design-system-react.scss 23:9 root stylesheet
at ./node_modules/css-loader/dist/cjs.js??

Version

1.1.0

Reproduction link

https://github.com/mj1268/ArgonBugReport-NavbarCollapse

Operating System

Windows 10

Device

Laptop

Browser & Version

Google Chrome Version 81.0.4044.138 (Official Build) (64-bit)

Steps to reproduce

1. Adjust width of window
2. When adjusting past each breakpoint, observe when the NavItems disappear/reappear - independent of the appearance of the collapsed toggle hamburger menu

What is expected?

Expect elements of Navbar to be swapped out with the toggle menu as the screen size passes the specified breakpoint (elements disappear, toggle menu simultaneously appears at the same screen width).

What is actually happening?

1. Elements of the Navbar are disappearing after certain breakpoints, but before the toggle menu appears, leading to no visible navigational items in certain screen widths.

Solution

Additional comments

This is my first time submitting a bug report, please let me know if there's any other info you need. Thanks!

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

does anybody know how to set dropdown in sidebar navigation in react.js argon template facing issue since 2 days.
if anyone knows kindly help so i'll sort my issue as soon as possible.

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device:
• Operating System:
• Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Version

1.1.0

Reproduction link

https://www.dropbox.com/sh/85zrtorfmsj3hwu/AACpgIOxyFxfYvTHD3uWjsZMa?dl=0

Operating System

windows 10

Device

Acer aspire 5

Browser & Version

Brave 1.7

Steps to reproduce

1.github.com/Blackwatch1910/vysion
2.Download above code and run "npm run build"
3.deploy the build version.
4. The deployed site won't run.

What is expected?

The deployed site should render the page as in 'localhost/landing-page' on local machine

What is actually happening?

Nothing actually shows up.

Solution

tried configuring "homepage" attribute but didn't work.

Additional comments

I have a select field in form to chose password or key how can I set condition in form to filter the input form fields password or ssh-key,
Ip or DNS



User Name



Authentication Method
-- Search to Select -- Password SSH Key

                  <label for="userInputName">Password</label>
                  <input type="text" id="passwordInputName" className="form-control" placeholder="Enter Your Host password here" />
                  <br />
                  <label for="userInputName">SSH-Key</label>
                  <input type="textarea" id="ssh_keyInputName" className="form-control" placeholder="SSH-Key" />
                  <br />

I am new for react

I'm using Next.JS and Headroom.JS just doesn't work (ReferenceError: document is not defined). Any solution?

i want my react app to open this page as root directory ->
localhost/landing-page, but nothing gets loaded and netlify returns 404. Please Help

Version

1.1.0

Reproduction link

https://github.com/sc4224/typescript-graphql

Operating System

Mac OSX Catalina

Device

iMac

Browser & Version

Chrome 83.0.4103.61

Steps to reproduce

1. git clone the repo
2. execute yarn
3. execute yarn dev
4. Go to http://localhost:3000
5. Imported the scss and css files as instructed
   import 'argon-design-system-react/src/assets/vendor/nucleo/css/nucleo.css';
import 'argon-design-system-react/src/assets/vendor/font-awesome/css/font-awesome.min.css';
import 'argon-design-system-react/src/assets/scss/argon-design-system-react.scss';
6. Open Sans font is loading, but Icons on the Input field are not loading.

What is expected?

Icons to load for valid and invalid Input fields

What is actually happening?

Icons are not loading, square box placeholder is showing up where the icon should be

Solution

Additional comments

Version

Latest

Reproduction link

https://github.com/creativetimofficial/argon-design-system-react

Operating System

All

Device

All

Browser & Version

All

Steps to reproduce

Run npm audit against latest branch.

What is expected?

No vulnerabilities in dependencies

What is actually happening?

38 vulnerabilities (20 moderate, 18 high) in dependencies.
npm audit fix advises that upgrades required to address vulnerabilities are breaking.

Solution

Dependencies and any resulting breaking feature changes should be resolved
react-scripts to version 5.0.0+
node-sass to version 7.0.1+

Additional comments

npm audit log: https://pastes.io/tr6m6umkip

Version

1.0.0

Reproduction link

https://demos.creative-tim.com/argon-design-system-react/#/

Steps to reproduce

1. Get the collapsed Navbar by reducing the window width
2. Open the menu Toggler
3. Close it.

The behaviour is different from other Ui kit (BLK, non react Argon, Angular Argon....)

What is expected?

Instant closing of the menu

What is actually happening?

Delay, seems laggy.

Solution

Additional comments

I'm kinda newbie but is it a css issue ? Transition ? What should I try to fix it ?

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:118:11)
at Object.join (path.js:1039:7)
at noopServiceWorkerMiddleware (/Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (/Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/express/lib/router/index.js:317:13)
at /Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/express/lib/router/index.js:335:12)
at next (/Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/express/lib/router/index.js:275:10)
at launchEditorMiddleware (/Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (/Users/saleemkhan/projects/reactjs/PickupNdrop2/node_modules/express/lib/router/layer.js:95:5)

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
at assertPath (path.js:39:11)
at Object.join (path.js:1218:7)
at noopServiceWorkerMiddleware (/media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (/media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/express/lib/router/index.js:317:13)
at /media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/express/lib/router/index.js:335:12)
at next (/media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/express/lib/router/index.js:275:10)
at launchEditorMiddleware (/media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (/media/disk1/crashCourse/react/argon-design-system-react-master/node_modules/express/lib/router/layer.js:95:5)

What is your enhancement?

This UI kit is awesome. But it could be even better if there's some possibility to integrate with TypeScript. A lot of React projects use TS and also a lot of react component libraries have their own types declaration files (for example, https://github.com/react-bootstrap/react-bootstrap and https://github.com/mui-org/material-ui).

Version

[1.1.0] 2020-02-14

Reproduction link

https://github.com/creativetimofficial/argon-design-system-react

Operating System

macOS Catalina 10.15.5 (19F101)

Device

iMac

Browser & Version

Chrome Version 83.0.4103.116 (Official Build) (64-bit)

Steps to reproduce

1. Git clone the repo
2. npm i
3. npm start
4. open localhost:3000 in chrome

What is expected?

The default landing page should be displayed.

What is actually happening?

The following error is displayed on the page:

TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app

Solution

I was able to resolve the issue by updating the version of react-scripts.
Updating the version from
"react-scripts": "3.3.1",
to
"react-scripts": "3.4.1",

Solution details are mentioned here -> https://stackoverflow.com/questions/60234640/typeerror-err-invalid-arg-type-the-path-argument-must-be-of-type-string-re

Additional comments

Hope this helps other developers who are planning to use your template. This template has been a big help for me!!!

Compiled with problems:X

ERROR in ./src/assets/scss/argon-design-system-react.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/assets/scss/argon-design-system-react.scss)

Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:

• path\node_modules\sass-loader\dist\utils.js

ERROR in ./src/assets/scss/argon-design-system-react.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/assets/scss/argon-design-system-react.scss)

Module build failed (from ./node_modules/resolve-url-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at process (C:\path\node_modules\resolve-url-loader\lib\engine\postcss.js:28:19)
at Object.resolveUrlLoader (C:\path\node_modules\resolve-url-loader\index.js:213:14)

Version

latest

Reproduction link

https://romantic-goodall-98a83e.netlify.app/auth/register

Operating System

windows 10 pro 64bit

Device

PC

Browser & Version

chrome latest

Steps to reproduce

1. Guidance on modifying the CSS property to get rid of that white space.

What is expected?

Full page gradient background with shapes and my register/login form.

What is actually happening?

I used the demo login page provided with the design system, I removed the footer component, now the footer component is removed but the white space still exist.

Solution

Additional comments

Please let me know which CSS property to edit get rid of that white space.
I've added a netlify link above kindly visit that link and scroll below to see the white space.

Hello,

I have a problem on npm run build because there is some var in compiled css
Did I miss something ?
Anyway, I used sass to compile scss files.

Thanks for this awesome design anyway!

Version

1.1.0

Reproduction link

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

Operating System

Windows 10

Device

Does not matter

Browser & Version

Does not matter

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.

Solution

Just replace the whole package.json file with:

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);

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

It throws runtime errors only after npm start:

Uncaught TypeError: Cannot read property 'close' of undefined
at Object. (index.js:72)
at Object../node_modules/react-dev-utils/node_modules/chalk/index.js (index.js:260)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Object../node_modules/react-dev-utils/formatWebpackMessages.js (formatWebpackMessages.js:11)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)
at Object../node_modules/react-dev-utils/webpackHotDevClient.js (webpackHotDevClient.js:23)
at webpack_require (bootstrap:781)
at fn (bootstrap:149)

Version

1.1.0

Reproduction link

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

Operating System

Does not matter

Device

Does not matter

Browser & Version

Does not matter

Steps to reproduce

1. Go to the attached link, and download the product
2. Run in terminal npm run install:clean

What is expected?

The product should start fairly quickly.

What is actually happening?

The product take a very long time to start.

Solution

Just replace the whole package.json file 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"
  }
}

Additional comments

Happy Hacking!

Hello! I want to know how to use this system in another existing repository. I really like the navigation bar but I don't know what to do to get that component into another project that doesn't have argon. Thanks!

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

Operating System
Windows 10

facing issue on argon react.js dashboard the issue is set dropdown in sidebar navigation if anyone knows kindly let mw know i'll update my work as soon as possible

Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉 https://www.creative-tim.com/bundles
👉 https://www.creative-tim.com

Version
Latest

Reproduction link
https://github.com/mekkim/donatemask

Operating System
All

Device
All

Browser & Version
All

Steps to reproduce
Run npm audit against latest branch.

What is expected?
No vulnerabilities in dependencies

What is actually happening?
38 vulnerabilities (20 moderate, 18 high) in dependencies.
npm audit fix advises that upgrades required to address vulnerabilities are breaking.

Solution
Dependencies and any resulting breaking feature changes should be resolved
react-scripts to version 5.0.0+
node-sass to version 7.0.1+

Additional comments
npm audit log: https://pastes.io/tr6m6umkip

Hi. Im cloning the repo down and run the npm install to set up the node_module but it throwing errors. can someone help thanks