Explore all Bootstrap open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Bootstrap

bootstrap

4.6.1

AdminLTE

AdminLTE v3.2.0

layui

2.6.8

mdb-ui-kit

react-bootstrap

v2.3.0

Popular Libraries in Bootstrap

bootstrap

by twbs doticonjavascriptdoticon

star image 156587 doticonMIT

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

AdminLTE

by ColorlibHQ doticonjavascriptdoticon

star image 40777 doticonMIT

AdminLTE - Free admin dashboard template based on Bootstrap 4

layui

by sentsin doticonjavascriptdoticon

star image 24021 doticonMIT

采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写形式,极低门槛,拿来即用。

mdb-ui-kit

by mdbootstrap doticonjavascriptdoticon

star image 21896 doticonNOASSERTION

Bootstrap 5 & Material Design 2.0 UI KIT

react-bootstrap

by react-bootstrap doticontypescriptdoticon

star image 20645 doticonMIT

Bootstrap components built with React

gentelella

by ColorlibHQ doticonhtmldoticon

star image 20286 doticonMIT

Free Bootstrap 4 Admin Dashboard Template

fe-interview

by haizlin doticonjavascriptdoticon

star image 18805 doticonMIT

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),4000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……

Skeleton

by dhg doticoncssdoticon

star image 18379 doticonMIT

Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

Flat-UI

by designmodo doticonjavascriptdoticon

star image 14862 doticonMIT

Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.

Trending New libraries in Bootstrap

vanillawebprojects

by bradtraversy doticonjavascriptdoticon

star image 10938 doticon

Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

pattern.css

by bansal-io doticonhtmldoticon

star image 3350 doticon

CSS only library to fill empty background with beautiful patterns.

halfmoon

by halfmoonui doticoncssdoticon

star image 2375 doticonMIT

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

volt-bootstrap-5-dashboard

by themesberg doticonhtmldoticon

star image 2032 doticonMIT

⚡️ Volt - Bootstrap 5 Admin Dashboard Template with vanilla Javascript

tail-kit

by Charlie85270 doticontypescriptdoticon

star image 1576 doticonMIT

Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.

projector-server

by JetBrains doticonkotlindoticon

star image 1107 doticonNOASSERTION

Server-side library for running Swing applications remotely

ShiroExploit-Deprecated

by feihong-cs doticonjavadoticon

star image 1066 doticon

Shiro550/Shiro721 一键化利用工具,支持多种回显方式

mazer

by zuramai doticonhtmldoticon

star image 1028 doticonMIT

Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page

django-jazzmin

by farridav doticonhtmldoticon

star image 983 doticonMIT

Jazzy theme for Django

Top Authors in Bootstrap

1

StartBootstrap

37 Libraries

star icon27394

2

mdbootstrap

33 Libraries

star icon39375

3

app-generator

32 Libraries

star icon1139

4

technext

30 Libraries

star icon173

5

creativetimofficial

27 Libraries

star icon23551

6

bassjobsen

27 Libraries

star icon2470

7

ajaymarathe

26 Libraries

star icon95

8

BootstrapDash

24 Libraries

star icon3212

9

PacktPublishing

21 Libraries

star icon388

10

themefisher

19 Libraries

star icon833

1

37 Libraries

star icon27394

2

33 Libraries

star icon39375

3

32 Libraries

star icon1139

4

30 Libraries

star icon173

5

27 Libraries

star icon23551

6

27 Libraries

star icon2470

7

26 Libraries

star icon95

8

24 Libraries

star icon3212

9

21 Libraries

star icon388

10

19 Libraries

star icon833

Trending Kits in Bootstrap

No Trending Kits are available at this moment for Bootstrap

Trending Discussions on Bootstrap

The unauthenticated git protocol on port 9418 is no longer supported

Invalid CSS value error while Customizing Bootstrap 5 colors with sass 3

Uncaught ReferenceError: Buffer is not defined

Bootstrap 5 - Custom theme-colors not updating classes

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:

How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular

Create new color scheme for dark-light mode in bootstrap sass

Bootstrap 5 floating labels in an input group

django rest Error - AttributeError: module 'collections' has no attribute 'MutableMapping'

Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"

QUESTION

The unauthenticated git protocol on port 9418 is no longer supported

Asked 2022-Mar-27 at 13:23

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7

Upon investigation, it appears that below section in my yml file is causing the issue.

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9

I have looked into this change log but can't seem to comprehend the issue.

Additional Details: Server: EC2 Instance Github actions steps:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55

package.json file

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234

ANSWER

Answered 2022-Mar-16 at 07:01

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.


For GitHub Actions:

As in actions/checkout issue 14, you can add as a first step:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
236

That will change any git://github.com/ into https://github.com/.

For local projects

For all your repositories, you can set:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237

You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.

So this (with the right key) would work:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237git config --global url."git@github.com:".insteadOf git://github.com/
238

That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).

Source https://stackoverflow.com/questions/70663523

QUESTION

Invalid CSS value error while Customizing Bootstrap 5 colors with sass 3

Asked 2022-Mar-22 at 12:49

I want to change bootstrap's default theme-colors with SASS , the problem is when I change a color and compile , it gives me invalid CSS value error.

I've read the docs and saw some tutorials on YouTube but I can't see where is the problem

I'm using bootstrap 5.1.0 , sass 3 this is my scss file:

1@import "../../node_modules/bootstrap/scss/variables";
2
3$theme-colors: (
4"primary": //some color here,
5);
6
7@import "../../node_modules/bootstrap/scss/bootstrap";
8

and this is the error I get in terminal

1@import "../../node_modules/bootstrap/scss/variables";
2
3$theme-colors: (
4"primary": //some color here,
5);
6
7@import "../../node_modules/bootstrap/scss/bootstrap";
8PS F:\Coding\projects\sepehr\client\src\styles> sass style.scss custom.css
9Error: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, 
10"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid 
11CSS value.
121394 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
14   │                             ^^^^^^^^^^^^^
1516

ANSWER

Answered 2021-Aug-24 at 14:36

You need to import functions and mixins too...

1@import "../../node_modules/bootstrap/scss/variables";
2
3$theme-colors: (
4"primary": //some color here,
5);
6
7@import "../../node_modules/bootstrap/scss/bootstrap";
8PS F:\Coding\projects\sepehr\client\src\styles> sass style.scss custom.css
9Error: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, 
10"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid 
11CSS value.
121394 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
14   │                             ^^^^^^^^^^^^^
1516@import "../../node_modules/bootstrap/scss/functions";
17@import "../../node_modules/bootstrap/scss/variables";
18@import "../../node_modules/bootstrap/scss/mixins";
19

Source https://stackoverflow.com/questions/68909199

QUESTION

Uncaught ReferenceError: Buffer is not defined

Asked 2022-Mar-17 at 15:41

Our application kept showing the error in the title. The problem is very likely related to Webpack 5 polyfill and after going through a couple of solutions:

  1. Setting fallback + install with npm
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5
  1. Setting alias
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9

We are still seeing the dreadful error:

1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
10    at Object.4142 (rfc6979.js:3)
11    at r (bootstrap:19)
12    at Object.5892 (js.js:4)
13    at r (bootstrap:19)
14    at Object.4090 (bip32.js:5)
15    at r (bootstrap:19)
16    at Object.7786 (index.js:3)
17    at r (bootstrap:19)
18    at Object.1649 (MnemonicKey.js:50)
19    at r (bootstrap:19)
20

Our setup is vanilla NodeJS + TypeScript + Webpack for multi-target: node + browser. Any help would be great!

ANSWER

Answered 2021-Aug-10 at 08:15

Answering my own question. Two things helped to resolve the issue:

  1. Adding plugins section with ProviderPlugin into webpack.config.js
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
10    at Object.4142 (rfc6979.js:3)
11    at r (bootstrap:19)
12    at Object.5892 (js.js:4)
13    at r (bootstrap:19)
14    at Object.4090 (bip32.js:5)
15    at r (bootstrap:19)
16    at Object.7786 (index.js:3)
17    at r (bootstrap:19)
18    at Object.1649 (MnemonicKey.js:50)
19    at r (bootstrap:19)
20const webpack = require('webpack');
21
22module.exports = {
23    // ...
24
25    plugins: [
26        // Work around for Buffer is undefined:
27        // https://github.com/webpack/changelog-v5/issues/10
28        new webpack.ProvidePlugin({
29            Buffer: ['buffer', 'Buffer'],
30        }),
31        new webpack.ProvidePlugin({
32            process: 'process/browser',
33        }),
34    ],
35
36
  1. Also add in resolve.fallback into webpack.config.js:
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
10    at Object.4142 (rfc6979.js:3)
11    at r (bootstrap:19)
12    at Object.5892 (js.js:4)
13    at r (bootstrap:19)
14    at Object.4090 (bip32.js:5)
15    at r (bootstrap:19)
16    at Object.7786 (index.js:3)
17    at r (bootstrap:19)
18    at Object.1649 (MnemonicKey.js:50)
19    at r (bootstrap:19)
20const webpack = require('webpack');
21
22module.exports = {
23    // ...
24
25    plugins: [
26        // Work around for Buffer is undefined:
27        // https://github.com/webpack/changelog-v5/issues/10
28        new webpack.ProvidePlugin({
29            Buffer: ['buffer', 'Buffer'],
30        }),
31        new webpack.ProvidePlugin({
32            process: 'process/browser',
33        }),
34    ],
35
36    resolve: {
37        extensions: [ '.ts', '.js' ],
38        fallback: {
39            "stream": require.resolve("stream-browserify"),
40            "buffer": require.resolve("buffer")
41        }
42    },
43
44

Source https://stackoverflow.com/questions/68707553

QUESTION

Bootstrap 5 - Custom theme-colors not updating classes

Asked 2022-Mar-06 at 15:16

I have just started a new project using Bootstrap 5 and I am trying to set up theme-colors with some custom values. However doing it the way that I have always done it is giving me some issues.

I have created three colors: $primary, $secondary, $tertiary. However if I add any classes such as bg-tertiary, then nothing changes as if it doesn't exist. bg-primary simply uses the default color defined by Bootstrap.

My code below:

1@import "bootstrap/_functions";
2@import "bootstrap/_variables";
3
4$primary: #ec008c;
5$secondary: #1ab7ea;
6$tertiary: #3fb247;
7
8$theme-colors: (
9    "primary": $primary,
10    "secondary": $secondary,
11    "tertiary": $tertiary,
12    "light": $light,
13    "dark": $dark,
14);
15
16@import "bootstrap/bootstrap";
17

If I change a default value such as "dark" to use $tertiary then any code within the scss file using $dark changes to use the value from $tertiary. Like below:

1@import "bootstrap/_functions";
2@import "bootstrap/_variables";
3
4$primary: #ec008c;
5$secondary: #1ab7ea;
6$tertiary: #3fb247;
7
8$theme-colors: (
9    "primary": $primary,
10    "secondary": $secondary,
11    "tertiary": $tertiary,
12    "light": $light,
13    "dark": $dark,
14);
15
16@import "bootstrap/bootstrap";
17$theme-colors(
18    "dark": $tertiary
19);
20
21#pageFooter {
22   background: $dark; //This becomes #3fb247 the value from $tertiary
23}
24

What am I doing wrong? I can't understand why the variables in the scss file are being affected by the change to $theme-colors, but classes are not.

Edit:

Using chrome inspector I can see that .bg-primary uses a css variable --bs-primary-rgb. Looking at the available variables --bs-primary has changed to the color that I have set, but not --bs-primary-rgb.

How can I have this variable be changed. Should it be done automatically?

With further research these rgb variables appear to have been introduced in Bootstrap 5.1. I can't find much information about how to get the variable to update to my set values probably because it is too new. So I have chosen to revert back to 5.0.2 and everything is now working as I expect it to.

ANSWER

Answered 2021-Aug-12 at 10:19

If you want to override the bootstrap's variabvles, you do not need to use the following code.

1@import "bootstrap/_functions";
2@import "bootstrap/_variables";
3
4$primary: #ec008c;
5$secondary: #1ab7ea;
6$tertiary: #3fb247;
7
8$theme-colors: (
9    "primary": $primary,
10    "secondary": $secondary,
11    "tertiary": $tertiary,
12    "light": $light,
13    "dark": $dark,
14);
15
16@import "bootstrap/bootstrap";
17$theme-colors(
18    "dark": $tertiary
19);
20
21#pageFooter {
22   background: $dark; //This becomes #3fb247 the value from $tertiary
23}
24$theme-colors: (
25    "primary": $primary,
26    "secondary": $secondary,
27    "tertiary": $tertiary,
28    "light": $light,
29    "dark": $dark,
30);
31
32

This is enough. And these colors are overriden wherever they are used.

1@import "bootstrap/_functions";
2@import "bootstrap/_variables";
3
4$primary: #ec008c;
5$secondary: #1ab7ea;
6$tertiary: #3fb247;
7
8$theme-colors: (
9    "primary": $primary,
10    "secondary": $secondary,
11    "tertiary": $tertiary,
12    "light": $light,
13    "dark": $dark,
14);
15
16@import "bootstrap/bootstrap";
17$theme-colors(
18    "dark": $tertiary
19);
20
21#pageFooter {
22   background: $dark; //This becomes #3fb247 the value from $tertiary
23}
24$theme-colors: (
25    "primary": $primary,
26    "secondary": $secondary,
27    "tertiary": $tertiary,
28    "light": $light,
29    "dark": $dark,
30);
31
32$primary: #ec008c;
33$secondary: #1ab7ea;
34$tertiary: #3fb247;
35
36

If you want to override $dark, do this:

1@import "bootstrap/_functions";
2@import "bootstrap/_variables";
3
4$primary: #ec008c;
5$secondary: #1ab7ea;
6$tertiary: #3fb247;
7
8$theme-colors: (
9    "primary": $primary,
10    "secondary": $secondary,
11    "tertiary": $tertiary,
12    "light": $light,
13    "dark": $dark,
14);
15
16@import "bootstrap/bootstrap";
17$theme-colors(
18    "dark": $tertiary
19);
20
21#pageFooter {
22   background: $dark; //This becomes #3fb247 the value from $tertiary
23}
24$theme-colors: (
25    "primary": $primary,
26    "secondary": $secondary,
27    "tertiary": $tertiary,
28    "light": $light,
29    "dark": $dark,
30);
31
32$primary: #ec008c;
33$secondary: #1ab7ea;
34$tertiary: #3fb247;
35
36$dark: $tertiary;
37
38

Source https://stackoverflow.com/questions/68755179

QUESTION

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:

Asked 2022-Feb-26 at 09:58

I have webpack-cli installed on my laravel project. I don't know why first of all we need it to run my vue app but this is causing an error:

When I run npm run dev or npm run hot

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39

Vue is installed also vue-loader, can't understand why it can't find those files. Also, I looked at the node_modules everything is in there ...

ANSWER

Answered 2021-Dec-20 at 09:04

You need to update your vue-loader

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39npm update vue-loader
40

And if it is not installed, install it

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39npm update vue-loader
40npm i vue-loader
41

Source https://stackoverflow.com/questions/69631437

QUESTION

How to fix: "@angular/fire"' has no exported member 'AngularFireModule'.ts(2305) ionic, firebase, angular

Asked 2022-Feb-11 at 07:31

I'm trying to connect my app with a firebase db, but I receive 4 error messages on app.module.ts:

1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5

here is my package.json file:

1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6  "name": "gescable",
7  "version": "0.0.1",
8  "author": "Ionic Framework",
9  "homepage": "https://ionicframework.com/",
10  "scripts": {
11    "ng": "ng",
12    "start": "ng serve",
13    "build": "ng build",
14    "test": "ng test",
15    "lint": "ng lint",
16    "e2e": "ng e2e"
17  },
18  "private": true,
19  "dependencies": {
20    "@angular-devkit/architect": "^0.1202.5",
21    "@angular-devkit/architect-cli": "^0.1202.5",
22    "@angular/common": "~12.1.1",
23    "@angular/core": "~12.1.1",
24    "@angular/fire": "^7.0.4",
25    "@angular/forms": "~12.1.1",
26    "@angular/platform-browser": "~12.1.1",
27    "@angular/platform-browser-dynamic": "~12.1.1",
28    "@angular/router": "~12.1.1",
29    "@ionic/angular": "^5.5.2",
30    "ajv": "^8.6.2",
31    "angularfire2": "^5.4.2",
32    "firebase": "^7.24.0",
33    "rxfire": "^6.0.0",
34    "rxjs": "~6.6.0",
35    "tslib": "^2.2.0",
36    "zone.js": "~0.11.4"
37  },
38  "devDependencies": {
39    "@angular-devkit/build-angular": "~12.1.1",
40    "@angular-eslint/builder": "~12.0.0",
41    "@angular-eslint/eslint-plugin": "~12.0.0",
42    "@angular-eslint/eslint-plugin-template": "~12.0.0",
43    "@angular-eslint/template-parser": "~12.0.0",
44    "@angular/cli": "~12.1.1",
45    "@angular/compiler": "~12.1.1",
46    "@angular/compiler-cli": "~12.1.1",
47    "@angular/language-service": "~12.0.1",
48    "@ionic/angular-toolkit": "^4.0.0",
49    "@types/jasmine": "~3.6.0",
50    "@types/jasminewd2": "~2.0.3",
51    "@types/node": "^12.11.1",
52    "@typescript-eslint/eslint-plugin": "4.16.1",
53    "@typescript-eslint/parser": "4.16.1",
54    "eslint": "^7.6.0",
55    "eslint-plugin-import": "2.22.1",
56    "eslint-plugin-jsdoc": "30.7.6",
57    "eslint-plugin-prefer-arrow": "1.2.2",
58    "jasmine-core": "~3.8.0",
59    "jasmine-spec-reporter": "~5.0.0",
60    "karma": "~6.3.2",
61    "karma-chrome-launcher": "~3.1.0",
62    "karma-coverage": "~2.0.3",
63    "karma-coverage-istanbul-reporter": "~3.0.2",
64    "karma-jasmine": "~4.0.0",
65    "karma-jasmine-html-reporter": "^1.5.0",
66    "protractor": "~7.0.0",
67    "ts-node": "~8.3.0",
68    "typescript": "~4.2.4",
69    "@angular-devkit/architect": "^0.1200.0",
70    "firebase-tools": "^9.0.0",
71    "fuzzy": "^0.1.3",
72    "inquirer": "^6.2.2",
73    "inquirer-autocomplete-prompt": "^1.0.1",
74    "open": "^7.0.3",
75    "jsonc-parser": "^3.0.0"
76  },
77  "description": "An Ionic project"
78}
79

And here is my app.module.ts:

1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6  "name": "gescable",
7  "version": "0.0.1",
8  "author": "Ionic Framework",
9  "homepage": "https://ionicframework.com/",
10  "scripts": {
11    "ng": "ng",
12    "start": "ng serve",
13    "build": "ng build",
14    "test": "ng test",
15    "lint": "ng lint",
16    "e2e": "ng e2e"
17  },
18  "private": true,
19  "dependencies": {
20    "@angular-devkit/architect": "^0.1202.5",
21    "@angular-devkit/architect-cli": "^0.1202.5",
22    "@angular/common": "~12.1.1",
23    "@angular/core": "~12.1.1",
24    "@angular/fire": "^7.0.4",
25    "@angular/forms": "~12.1.1",
26    "@angular/platform-browser": "~12.1.1",
27    "@angular/platform-browser-dynamic": "~12.1.1",
28    "@angular/router": "~12.1.1",
29    "@ionic/angular": "^5.5.2",
30    "ajv": "^8.6.2",
31    "angularfire2": "^5.4.2",
32    "firebase": "^7.24.0",
33    "rxfire": "^6.0.0",
34    "rxjs": "~6.6.0",
35    "tslib": "^2.2.0",
36    "zone.js": "~0.11.4"
37  },
38  "devDependencies": {
39    "@angular-devkit/build-angular": "~12.1.1",
40    "@angular-eslint/builder": "~12.0.0",
41    "@angular-eslint/eslint-plugin": "~12.0.0",
42    "@angular-eslint/eslint-plugin-template": "~12.0.0",
43    "@angular-eslint/template-parser": "~12.0.0",
44    "@angular/cli": "~12.1.1",
45    "@angular/compiler": "~12.1.1",
46    "@angular/compiler-cli": "~12.1.1",
47    "@angular/language-service": "~12.0.1",
48    "@ionic/angular-toolkit": "^4.0.0",
49    "@types/jasmine": "~3.6.0",
50    "@types/jasminewd2": "~2.0.3",
51    "@types/node": "^12.11.1",
52    "@typescript-eslint/eslint-plugin": "4.16.1",
53    "@typescript-eslint/parser": "4.16.1",
54    "eslint": "^7.6.0",
55    "eslint-plugin-import": "2.22.1",
56    "eslint-plugin-jsdoc": "30.7.6",
57    "eslint-plugin-prefer-arrow": "1.2.2",
58    "jasmine-core": "~3.8.0",
59    "jasmine-spec-reporter": "~5.0.0",
60    "karma": "~6.3.2",
61    "karma-chrome-launcher": "~3.1.0",
62    "karma-coverage": "~2.0.3",
63    "karma-coverage-istanbul-reporter": "~3.0.2",
64    "karma-jasmine": "~4.0.0",
65    "karma-jasmine-html-reporter": "^1.5.0",
66    "protractor": "~7.0.0",
67    "ts-node": "~8.3.0",
68    "typescript": "~4.2.4",
69    "@angular-devkit/architect": "^0.1200.0",
70    "firebase-tools": "^9.0.0",
71    "fuzzy": "^0.1.3",
72    "inquirer": "^6.2.2",
73    "inquirer-autocomplete-prompt": "^1.0.1",
74    "open": "^7.0.3",
75    "jsonc-parser": "^3.0.0"
76  },
77  "description": "An Ionic project"
78}
79import { NgModule } from '@angular/core';
80import { BrowserModule } from '@angular/platform-browser';
81import { RouteReuseStrategy } from '@angular/router';
82import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
83import { AppRoutingModule } from './app-routing.module';
84import { AppComponent } from './app.component';
85import { ClientPageModule } from './client/client.module';
86import { environment } from '../environments/environment';
87import { AngularFireModule } from '@angular/fire';
88import { AngularFireAuthModule } from '@angular/fire/auth';
89import { AngularFireStorageModule } from '@angular/fire/storage';
90import { AngularFireDatabaseModule } from '@angular/fire/database';
91
92@NgModule({
93  declarations: [AppComponent],
94  entryComponents: [],
95  imports: [
96    BrowserModule,
97    IonicModule.forRoot(),
98    AppRoutingModule,
99    ClientPageModule,
100    AngularFireModule.initializeApp(environment.firebaseConfig),
101    AngularFireAuthModule,
102    AngularFireStorageModule,
103    AngularFireDatabaseModule
104  ],
105  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
106  bootstrap: [AppComponent],
107})
108export class AppModule {}
109

Here is my tsonfig.ts file

1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6  "name": "gescable",
7  "version": "0.0.1",
8  "author": "Ionic Framework",
9  "homepage": "https://ionicframework.com/",
10  "scripts": {
11    "ng": "ng",
12    "start": "ng serve",
13    "build": "ng build",
14    "test": "ng test",
15    "lint": "ng lint",
16    "e2e": "ng e2e"
17  },
18  "private": true,
19  "dependencies": {
20    "@angular-devkit/architect": "^0.1202.5",
21    "@angular-devkit/architect-cli": "^0.1202.5",
22    "@angular/common": "~12.1.1",
23    "@angular/core": "~12.1.1",
24    "@angular/fire": "^7.0.4",
25    "@angular/forms": "~12.1.1",
26    "@angular/platform-browser": "~12.1.1",
27    "@angular/platform-browser-dynamic": "~12.1.1",
28    "@angular/router": "~12.1.1",
29    "@ionic/angular": "^5.5.2",
30    "ajv": "^8.6.2",
31    "angularfire2": "^5.4.2",
32    "firebase": "^7.24.0",
33    "rxfire": "^6.0.0",
34    "rxjs": "~6.6.0",
35    "tslib": "^2.2.0",
36    "zone.js": "~0.11.4"
37  },
38  "devDependencies": {
39    "@angular-devkit/build-angular": "~12.1.1",
40    "@angular-eslint/builder": "~12.0.0",
41    "@angular-eslint/eslint-plugin": "~12.0.0",
42    "@angular-eslint/eslint-plugin-template": "~12.0.0",
43    "@angular-eslint/template-parser": "~12.0.0",
44    "@angular/cli": "~12.1.1",
45    "@angular/compiler": "~12.1.1",
46    "@angular/compiler-cli": "~12.1.1",
47    "@angular/language-service": "~12.0.1",
48    "@ionic/angular-toolkit": "^4.0.0",
49    "@types/jasmine": "~3.6.0",
50    "@types/jasminewd2": "~2.0.3",
51    "@types/node": "^12.11.1",
52    "@typescript-eslint/eslint-plugin": "4.16.1",
53    "@typescript-eslint/parser": "4.16.1",
54    "eslint": "^7.6.0",
55    "eslint-plugin-import": "2.22.1",
56    "eslint-plugin-jsdoc": "30.7.6",
57    "eslint-plugin-prefer-arrow": "1.2.2",
58    "jasmine-core": "~3.8.0",
59    "jasmine-spec-reporter": "~5.0.0",
60    "karma": "~6.3.2",
61    "karma-chrome-launcher": "~3.1.0",
62    "karma-coverage": "~2.0.3",
63    "karma-coverage-istanbul-reporter": "~3.0.2",
64    "karma-jasmine": "~4.0.0",
65    "karma-jasmine-html-reporter": "^1.5.0",
66    "protractor": "~7.0.0",
67    "ts-node": "~8.3.0",
68    "typescript": "~4.2.4",
69    "@angular-devkit/architect": "^0.1200.0",
70    "firebase-tools": "^9.0.0",
71    "fuzzy": "^0.1.3",
72    "inquirer": "^6.2.2",
73    "inquirer-autocomplete-prompt": "^1.0.1",
74    "open": "^7.0.3",
75    "jsonc-parser": "^3.0.0"
76  },
77  "description": "An Ionic project"
78}
79import { NgModule } from '@angular/core';
80import { BrowserModule } from '@angular/platform-browser';
81import { RouteReuseStrategy } from '@angular/router';
82import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
83import { AppRoutingModule } from './app-routing.module';
84import { AppComponent } from './app.component';
85import { ClientPageModule } from './client/client.module';
86import { environment } from '../environments/environment';
87import { AngularFireModule } from '@angular/fire';
88import { AngularFireAuthModule } from '@angular/fire/auth';
89import { AngularFireStorageModule } from '@angular/fire/storage';
90import { AngularFireDatabaseModule } from '@angular/fire/database';
91
92@NgModule({
93  declarations: [AppComponent],
94  entryComponents: [],
95  imports: [
96    BrowserModule,
97    IonicModule.forRoot(),
98    AppRoutingModule,
99    ClientPageModule,
100    AngularFireModule.initializeApp(environment.firebaseConfig),
101    AngularFireAuthModule,
102    AngularFireStorageModule,
103    AngularFireDatabaseModule
104  ],
105  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
106  bootstrap: [AppComponent],
107})
108export class AppModule {}
109  "compileOnSave": false,
110  "compilerOptions": {
111    "baseUrl": "./",
112    "outDir": "./dist/out-tsc",
113    "sourceMap": true,
114    "declaration": false,
115    "downlevelIteration": true,
116    "experimentalDecorators": true,
117    "moduleResolution": "node",
118    "importHelpers": true,
119    "target": "es2015",
120    "module": "es2020",
121    "lib": ["es2018", "dom"]
122  },
123  "angularCompilerOptions": {
124    "enableI18nLegacyMessageIdFormat": false,
125    "strictInjectionParameters": true,
126    "strictInputAccessModifiers": true,
127    "strictTemplates": true,
128    "skipLibCheck": true 
129  }
130}
131

ANSWER

Answered 2021-Sep-10 at 12:47

You need to add "compat" like this

1'"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305),
2'"@angular/fire/storage"' has no exported member 'AngularFireStorageModule'.ts(2305)
3'"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.ts(2305)
4'"@angular/fire/auth"' has no exported member 'AngularFireAuthModule'.ts(2305)
5{
6  "name": "gescable",
7  "version": "0.0.1",
8  "author": "Ionic Framework",
9  "homepage": "https://ionicframework.com/",
10  "scripts": {
11    "ng": "ng",
12    "start": "ng serve",
13    "build": "ng build",
14    "test": "ng test",
15    "lint": "ng lint",
16    "e2e": "ng e2e"
17  },
18  "private": true,
19  "dependencies": {
20    "@angular-devkit/architect": "^0.1202.5",
21    "@angular-devkit/architect-cli": "^0.1202.5",
22    "@angular/common": "~12.1.1",
23    "@angular/core": "~12.1.1",
24    "@angular/fire": "^7.0.4",
25    "@angular/forms": "~12.1.1",
26    "@angular/platform-browser": "~12.1.1",
27    "@angular/platform-browser-dynamic": "~12.1.1",
28    "@angular/router": "~12.1.1",
29    "@ionic/angular": "^5.5.2",
30    "ajv": "^8.6.2",
31    "angularfire2": "^5.4.2",
32    "firebase": "^7.24.0",
33    "rxfire": "^6.0.0",
34    "rxjs": "~6.6.0",
35    "tslib": "^2.2.0",
36    "zone.js": "~0.11.4"
37  },
38  "devDependencies": {
39    "@angular-devkit/build-angular": "~12.1.1",
40    "@angular-eslint/builder": "~12.0.0",
41    "@angular-eslint/eslint-plugin": "~12.0.0",
42    "@angular-eslint/eslint-plugin-template": "~12.0.0",
43    "@angular-eslint/template-parser": "~12.0.0",
44    "@angular/cli": "~12.1.1",
45    "@angular/compiler": "~12.1.1",
46    "@angular/compiler-cli": "~12.1.1",
47    "@angular/language-service": "~12.0.1",
48    "@ionic/angular-toolkit": "^4.0.0",
49    "@types/jasmine": "~3.6.0",
50    "@types/jasminewd2": "~2.0.3",
51    "@types/node": "^12.11.1",
52    "@typescript-eslint/eslint-plugin": "4.16.1",
53    "@typescript-eslint/parser": "4.16.1",
54    "eslint": "^7.6.0",
55    "eslint-plugin-import": "2.22.1",
56    "eslint-plugin-jsdoc": "30.7.6",
57    "eslint-plugin-prefer-arrow": "1.2.2",
58    "jasmine-core": "~3.8.0",
59    "jasmine-spec-reporter": "~5.0.0",
60    "karma": "~6.3.2",
61    "karma-chrome-launcher": "~3.1.0",
62    "karma-coverage": "~2.0.3",
63    "karma-coverage-istanbul-reporter": "~3.0.2",
64    "karma-jasmine": "~4.0.0",
65    "karma-jasmine-html-reporter": "^1.5.0",
66    "protractor": "~7.0.0",
67    "ts-node": "~8.3.0",
68    "typescript": "~4.2.4",
69    "@angular-devkit/architect": "^0.1200.0",
70    "firebase-tools": "^9.0.0",
71    "fuzzy": "^0.1.3",
72    "inquirer": "^6.2.2",
73    "inquirer-autocomplete-prompt": "^1.0.1",
74    "open": "^7.0.3",
75    "jsonc-parser": "^3.0.0"
76  },
77  "description": "An Ionic project"
78}
79import { NgModule } from '@angular/core';
80import { BrowserModule } from '@angular/platform-browser';
81import { RouteReuseStrategy } from '@angular/router';
82import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
83import { AppRoutingModule } from './app-routing.module';
84import { AppComponent } from './app.component';
85import { ClientPageModule } from './client/client.module';
86import { environment } from '../environments/environment';
87import { AngularFireModule } from '@angular/fire';
88import { AngularFireAuthModule } from '@angular/fire/auth';
89import { AngularFireStorageModule } from '@angular/fire/storage';
90import { AngularFireDatabaseModule } from '@angular/fire/database';
91
92@NgModule({
93  declarations: [AppComponent],
94  entryComponents: [],
95  imports: [
96    BrowserModule,
97    IonicModule.forRoot(),
98    AppRoutingModule,
99    ClientPageModule,
100    AngularFireModule.initializeApp(environment.firebaseConfig),
101    AngularFireAuthModule,
102    AngularFireStorageModule,
103    AngularFireDatabaseModule
104  ],
105  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
106  bootstrap: [AppComponent],
107})
108export class AppModule {}
109  "compileOnSave": false,
110  "compilerOptions": {
111    "baseUrl": "./",
112    "outDir": "./dist/out-tsc",
113    "sourceMap": true,
114    "declaration": false,
115    "downlevelIteration": true,
116    "experimentalDecorators": true,
117    "moduleResolution": "node",
118    "importHelpers": true,
119    "target": "es2015",
120    "module": "es2020",
121    "lib": ["es2018", "dom"]
122  },
123  "angularCompilerOptions": {
124    "enableI18nLegacyMessageIdFormat": false,
125    "strictInjectionParameters": true,
126    "strictInputAccessModifiers": true,
127    "strictTemplates": true,
128    "skipLibCheck": true 
129  }
130}
131import { AngularFireModule } from "@angular/fire/compat";
132import { AngularFireAuthModule } from "@angular/fire/compat/auth";
133import { AngularFireStorageModule } from '@angular/fire/compat/storage';
134import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
135import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
136

Source https://stackoverflow.com/questions/69128608

QUESTION

Create new color scheme for dark-light mode in bootstrap sass

Asked 2022-Jan-16 at 19:50

I want to create dark mode for a web site which use bootstrap. I have to add new root class which includes all boostrap colors. Here is my colors.scss:

1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10  "brd-default": $body-color
11  );
12  
13

I want create new class like this:

1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10  "brd-default": $body-color
11  );
12  
13:root.dark{
14    // override colors and classes for dark mode
15    $primary:#012345;
16    $secondary:#111111;
17    $success:#222222;
18}
19

So how can i copy and paste all bootstrap colors for new color scheme?

If i can add colors, i will change HTML class so my root(color scheme) will be:

enter image description here

in my styles.scss:

1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10  "brd-default": $body-color
11  );
12  
13:root.dark{
14    // override colors and classes for dark mode
15    $primary:#012345;
16    $secondary:#111111;
17    $success:#222222;
18}
19@import "./colors";// custom colors
20@import "bootstrap/scss/functions";
21@import "bootstrap/scss/variables";
22@import "bootstrap/scss/utilities";
23

ANSWER

Answered 2021-Aug-07 at 20:32

As explained here, there's no way to attach a class to :root. However, you don't need this to achieve what you want.

Simply make a dark class then you can add that as desired to the html or body tag.

Make all the needed theme color changes inside .dark{}, and then @import "bootstrap". When .dark doesn't exist on the body, the theme colors will return to Bootstrap defaults.

1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10  "brd-default": $body-color
11  );
12  
13:root.dark{
14    // override colors and classes for dark mode
15    $primary:#012345;
16    $secondary:#111111;
17    $success:#222222;
18}
19@import "./colors";// custom colors
20@import "bootstrap/scss/functions";
21@import "bootstrap/scss/variables";
22@import "bootstrap/scss/utilities";
23@import "functions";
24@import "variables";
25@import "mixins";
26
27
28.dark {
29
30    /* redefine theme colors for dark theme */
31    $primary: #012345;
32    $secondary: #111111;
33    $success: #222222;
34    $dark: #000;
35    
36    $theme-colors: (
37        "primary": $primary,
38        "secondary": $secondary,
39        "success": $success,
40        "danger": $danger,
41        "info": $indigo,
42        "dark": $dark,
43        "light": $light,
44    );
45
46    /* redefine theme color variables */
47    @each $color, $value in $theme-colors {
48        --#{$variable-prefix}#{$color}: #{$value};
49    }
50
51    /* redefine theme color rgb vars (used for bg- colors) */
52    $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
53    @each $color, $value in $theme-colors-rgb {
54        --#{$variable-prefix}#{$color}-rgb: #{$value};
55    }
56
57    $body-color: #eeeeee;
58    $body-bg: #263C5C;
59    
60    --#{$variable-prefix}body-color: #{$body-color};
61    --#{$variable-prefix}body-bg: #{$body-bg};
62      
63    @import "bootstrap";
64}
65
66

Source https://stackoverflow.com/questions/68667437

QUESTION

Bootstrap 5 floating labels in an input group

Asked 2022-Jan-13 at 10:12

I'm wanting to use Bootstrap's "Floating Label" and "Input Group" components together. The trouble I'm having is that the label is hidden when the input is focused. In my code example below, I have these scenarios:

  1. Both components (see that the label disappears when clicking in the input).
  2. Floating label only

Does anyone know of a way to make these components work together?

1<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
2<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
3<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
4
5<div class="form-floating input-group mb-3">
6    <input type="text" class="form-control" name="code1" placeholder="Code 1">
7    <label for="code1">Code 1</label>
8    <span class="input-group-text"><i class="fas fa-times"></i></span>
9</div>
10
11<div class="form-floating mb-3">
12    <input type="text" class="form-control" name="code4" placeholder="Code 4">
13    <label for="code4">Code 4</label>
14</div>

ANSWER

Answered 2021-Aug-09 at 20:10

Place the floating label inside another input-group div.

1<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
2<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
3<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
4
5<div class="form-floating input-group mb-3">
6    <input type="text" class="form-control" name="code1" placeholder="Code 1">
7    <label for="code1">Code 1</label>
8    <span class="input-group-text"><i class="fas fa-times"></i></span>
9</div>
10
11<div class="form-floating mb-3">
12    <input type="text" class="form-control" name="code4" placeholder="Code 4">
13    <label for="code4">Code 4</label>
14</div><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
15<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
16<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
17
18<div class="input-group mb-3">
19  <div class="form-floating flex-grow-1">
20      <input type="text" class="form-control" name="code1" placeholder="Code 1">
21      <label for="code1">Code 1</label>
22  </div>
23  <span class="input-group-text"><i class="fas fa-times"></i></span>
24</div>

Source https://stackoverflow.com/questions/68717954

QUESTION

django rest Error - AttributeError: module 'collections' has no attribute 'MutableMapping'

Asked 2022-Jan-07 at 19:13

I'm build Django app, and it's work fine on my machine, but when I run inside docker container it's rest framework keep crashing, but when I comment any connection with rest framework it's work fine.

  • My machine: Kali Linux 2021.3
  • docker machine: Raspberry Pi 4 4gb
  • docker container image: python:rc-alpine3.14
  • python version on my machine: Python 3.9.7
  • python version on container: Python 3.10.0rc2

error output:

1Traceback (most recent call last):
2  File "/app/manage.py", line 22, in <module>
3    main()
4  File "/app/manage.py", line 18, in main
5    execute_from_command_line(sys.argv)
6  File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 419, in execute_from_command_line
7    utility.execute()
8  File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 413, in execute
9    self.fetch_command(subcommand).run_from_argv(self.argv)
10  File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/test.py", line 23, in run_from_argv
11    super().run_from_argv(argv)
12  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 354, in run_from_argv
13    self.execute(*args, **cmd_options)
14  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 398, in execute
15    output = self.handle(*args, **options)
16  File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/test.py", line 55, in handle
17    failures = test_runner.run_tests(test_labels)
18  File "/usr/local/lib/python3.10/site-packages/django/test/runner.py", line 728, in run_tests
19    self.run_checks(databases)
20  File "/usr/local/lib/python3.10/site-packages/django/test/runner.py", line 665, in run_checks
21    call_command('check', verbosity=self.verbosity, databases=databases)
22  File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 181, in call_command
23    return command.execute(*args, **defaults)
24  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 398, in execute
25    output = self.handle(*args, **options)
26  File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/check.py", line 63, in handle
27    self.check(
28  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 419, in check
29    all_issues = checks.run_checks(
30  File "/usr/local/lib/python3.10/site-packages/django/core/checks/registry.py", line 76, in run_checks
31    new_errors = check(app_configs=app_configs, databases=databases)
32  File "/usr/local/lib/python3.10/site-packages/django/core/checks/urls.py", line 13, in check_url_config
33    return check_resolver(resolver)
34  File "/usr/local/lib/python3.10/site-packages/django/core/checks/urls.py", line 23, in check_resolver
35    return check_method()
36  File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 412, in check
37    for pattern in self.url_patterns:
38  File "/usr/local/lib/python3.10/site-packages/django/utils/functional.py", line 48, in __get__
39    res = instance.__dict__[self.name] = self.func(instance)
40  File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 598, in url_patterns
41    patterns = getattr(self.urlconf_module, "urlpatterns", self.urlconf_module)
42  File "/usr/local/lib/python3.10/site-packages/django/utils/functional.py", line 48, in __get__
43    res = instance.__dict__[self.name] = self.func(instance)
44  File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 591, in urlconf_module
45    return import_module(self.urlconf_name)
46  File "/usr/local/lib/python3.10/importlib/__init__.py", line 126, in import_module
47    return _bootstrap._gcd_import(name[level:], package, level)
48  File "<frozen importlib._bootstrap>", line 1050, in _gcd_import
49  File "<frozen importlib._bootstrap>", line 1027, in _find_and_load
50  File "<frozen importlib._bootstrap>", line 1006, in _find_and_load_unlocked
51  File "<frozen importlib._bootstrap>", line 688, in _load_unlocked
52  File "<frozen importlib._bootstrap_external>", line 883, in exec_module
53  File "<frozen importlib._bootstrap>", line 241, in _call_with_frames_removed
54  File "/app/project/urls.py", line 24, in <module>
55    path("", include("apps.urls", namespace="apps")),
56  File "/usr/local/lib/python3.10/site-packages/django/urls/conf.py", line 34, in include
57    urlconf_module = import_module(urlconf_module)
58  File "/usr/local/lib/python3.10/importlib/__init__.py", line 126, in import_module
59    return _bootstrap._gcd_import(name[level:], package, level)
60  File "<frozen importlib._bootstrap>", line 1050, in _gcd_import
61  File "<frozen importlib._bootstrap>", line 1027, in _find_and_load
62  File "<frozen importlib._bootstrap>", line 1006, in _find_and_load_unlocked
63  File "<frozen importlib._bootstrap>", line 688, in _load_unlocked
64  File "<frozen importlib._bootstrap_external>", line 883, in exec_module
65  File "<frozen importlib._bootstrap>", line 241, in _call_with_frames_removed
66  File "/app/apps/urls.py", line 3, in <module>
67    from . import api
68  File "/app/apps/api.py", line 1, in <module>
69    from .serializers import *
70  File "/app/apps/serializers.py", line 1, in <module>
71    from rest_framework import serializers
72  File "/usr/local/lib/python3.10/site-packages/rest_framework/serializers.py", line 27, in <module>
73    from rest_framework.compat import postgres_fields
74  File "/usr/local/lib/python3.10/site-packages/rest_framework/compat.py", line 59, in <module>
75    import requests
76  File "/usr/local/lib/python3.10/site-packages/requests/__init__.py", line 63, in <module>
77    from . import utils
78  File "/usr/local/lib/python3.10/site-packages/requests/utils.py", line 27, in <module>
79    from .cookies import RequestsCookieJar, cookiejar_from_dict
80  File "/usr/local/lib/python3.10/site-packages/requests/cookies.py", line 172, in <module>
81    class RequestsCookieJar(cookielib.CookieJar, collections.MutableMapping):
82AttributeError: module 'collections' has no attribute 'MutableMapping'
83

Dockerfile

1Traceback (most recent call last):
2  File "/app/manage.py", line 22, in <module>
3    main()
4  File "/app/manage.py", line 18, in main
5    execute_from_command_line(sys.argv)
6  File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 419, in execute_from_command_line
7    utility.execute()
8  File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 413, in execute
9    self.fetch_command(subcommand).run_from_argv(self.argv)
10  File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/test.py", line 23, in run_from_argv
11    super().run_from_argv(argv)
12  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 354, in run_from_argv
13    self.execute(*args, **cmd_options)
14  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 398, in execute
15    output = self.handle(*args, **options)
16  File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/test.py", line 55, in handle
17    failures = test_runner.run_tests(test_labels)
18  File "/usr/local/lib/python3.10/site-packages/django/test/runner.py", line 728, in run_tests
19    self.run_checks(databases)
20  File "/usr/local/lib/python3.10/site-packages/django/test/runner.py", line 665, in run_checks
21    call_command('check', verbosity=self.verbosity, databases=databases)
22  File "/usr/local/lib/python3.10/site-packages/django/core/management/__init__.py", line 181, in call_command
23    return command.execute(*args, **defaults)
24  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 398, in execute
25    output = self.handle(*args, **options)
26  File "/usr/local/lib/python3.10/site-packages/django/core/management/commands/check.py", line 63, in handle
27    self.check(
28  File "/usr/local/lib/python3.10/site-packages/django/core/management/base.py", line 419, in check
29    all_issues = checks.run_checks(
30  File "/usr/local/lib/python3.10/site-packages/django/core/checks/registry.py", line 76, in run_checks
31    new_errors = check(app_configs=app_configs, databases=databases)
32  File "/usr/local/lib/python3.10/site-packages/django/core/checks/urls.py", line 13, in check_url_config
33    return check_resolver(resolver)
34  File "/usr/local/lib/python3.10/site-packages/django/core/checks/urls.py", line 23, in check_resolver
35    return check_method()
36  File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 412, in check
37    for pattern in self.url_patterns:
38  File "/usr/local/lib/python3.10/site-packages/django/utils/functional.py", line 48, in __get__
39    res = instance.__dict__[self.name] = self.func(instance)
40  File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 598, in url_patterns
41    patterns = getattr(self.urlconf_module, "urlpatterns", self.urlconf_module)
42  File "/usr/local/lib/python3.10/site-packages/django/utils/functional.py", line 48, in __get__
43    res = instance.__dict__[self.name] = self.func(instance)
44  File "/usr/local/lib/python3.10/site-packages/django/urls/resolvers.py", line 591, in urlconf_module
45    return import_module(self.urlconf_name)
46  File "/usr/local/lib/python3.10/importlib/__init__.py", line 126, in import_module
47    return _bootstrap._gcd_import(name[level:], package, level)
48  File "<frozen importlib._bootstrap>", line 1050, in _gcd_import
49  File "<frozen importlib._bootstrap>", line 1027, in _find_and_load
50  File "<frozen importlib._bootstrap>", line 1006, in _find_and_load_unlocked
51  File "<frozen importlib._bootstrap>", line 688, in _load_unlocked
52  File "<frozen importlib._bootstrap_external>", line 883, in exec_module
53  File "<frozen importlib._bootstrap>", line 241, in _call_with_frames_removed
54  File "/app/project/urls.py", line 24, in <module>
55    path("", include("apps.urls", namespace="apps")),
56  File "/usr/local/lib/python3.10/site-packages/django/urls/conf.py", line 34, in include
57    urlconf_module = import_module(urlconf_module)
58  File "/usr/local/lib/python3.10/importlib/__init__.py", line 126, in import_module
59    return _bootstrap._gcd_import(name[level:], package, level)
60  File "<frozen importlib._bootstrap>", line 1050, in _gcd_import
61  File "<frozen importlib._bootstrap>", line 1027, in _find_and_load
62  File "<frozen importlib._bootstrap>", line 1006, in _find_and_load_unlocked
63  File "<frozen importlib._bootstrap>", line 688, in _load_unlocked
64  File "<frozen importlib._bootstrap_external>", line 883, in exec_module
65  File "<frozen importlib._bootstrap>", line 241, in _call_with_frames_removed
66  File "/app/apps/urls.py", line 3, in <module>
67    from . import api
68  File "/app/apps/api.py", line 1, in <module>
69    from .serializers import *
70  File "/app/apps/serializers.py", line 1, in <module>
71    from rest_framework import serializers
72  File "/usr/local/lib/python3.10/site-packages/rest_framework/serializers.py", line 27, in <module>
73    from rest_framework.compat import postgres_fields
74  File "/usr/local/lib/python3.10/site-packages/rest_framework/compat.py", line 59, in <module>
75    import requests
76  File "/usr/local/lib/python3.10/site-packages/requests/__init__.py", line 63, in <module>
77    from . import utils
78  File "/usr/local/lib/python3.10/site-packages/requests/utils.py", line 27, in <module>
79    from .cookies import RequestsCookieJar, cookiejar_from_dict
80  File "/usr/local/lib/python3.10/site-packages/requests/cookies.py", line 172, in <module>
81    class RequestsCookieJar(cookielib.CookieJar, collections.MutableMapping):
82AttributeError: module 'collections' has no attribute 'MutableMapping'
83FROM python:rc-alpine3.14
84
85COPY . /app 
86WORKDIR /app
87
88ENV UWSGI_PROFILE=core
89ENV PYTHONUNBUFFERED=TRUE
90RUN apk add --update --no-cache g++ gcc libxslt-dev # add some nessery libs
91RUN apk add python3-dev build-base linux-headers pcre-dev
92RUN pip3 install -U pip # upgrade pip
93RUN apk update \
94    && apk add --virtual build-deps gcc python3-dev musl-dev \
95    && apk add jpeg-dev zlib-dev libjpeg \
96    && pip install Pillow \
97    && apk del build-deps
98
99
100RUN apk add --no-cache --virtual=build-dependencies wget ca-certificates && \
101    wget "https://bootstrap.pypa.io/get-pip.py" -O /dev/stdout | python
102
103
104RUN pip install uwsgi
105
106RUN pip3 install -r requirements.txt # install all requirements
107RUN python uploadstatics.py
108
109EXPOSE 80
110CMD ["gunicorn","project.wsgi:application", "-b 0.0.0.0:8060"]
111

NOTES:

  • I use gunicorn to run the app (the error show even I run't from manage.py)

ANSWER

Answered 2022-Jan-07 at 19:13

You can downgrade your Python version. That should solve your problem; if not, use collections.abc.Mapping instead of the deprecated collections.Mapping.

Refer here: Link

Source https://stackoverflow.com/questions/69464512

QUESTION

Angular 6 to 12 Migration: Getting Multiple Warning: Css Minimizer Plugin: > Unexpected "$"

Asked 2021-Nov-19 at 17:27

After migrating my angular 6 project to 12. I am getting multiple warning in terminal

if in angular.json i set optimisation: false configuration then all issue get resolved but i don't want to make this changes it should be true only.

with optimisation: true i am getting all these warnings:-

Earlier same code was working fine without any warning.

1assets/.../variables.scss - Warning: Css Minimizer Plugin:  > assets/.../variables.scss:6:0: warning: Unexpected "$"
2    6 │ $color-normal-gray:#8a8a8a;
3      ╵ ^
4
5assets/.../global.scss - Warning: Css Minimizer Plugin:  > 
6assets/.../global.scss:285:2: warning: Expected identifier but found "."
7    285 │   .dropdown-menu{
8        ╵   ^
9
10assets/.../global.scss - Warning: Css Minimizer Plugin:  > 
11assets/.../global.scss:255:6: warning: Expected identifier but found "*"
12    255 │       *background-color: #d9d9d9;
13        ╵       ^
14
15assets/.../master.scss - Warning: Css Minimizer Plugin:  > 
16assets/.../master.scss:567:8: warning: Expected ":" but found "{"
17    567 │   circle {
18        ╵          ^
19

My Package.json is below:

1assets/.../variables.scss - Warning: Css Minimizer Plugin:  > assets/.../variables.scss:6:0: warning: Unexpected "$"
2    6 │ $color-normal-gray:#8a8a8a;
3      ╵ ^
4
5assets/.../global.scss - Warning: Css Minimizer Plugin:  > 
6assets/.../global.scss:285:2: warning: Expected identifier but found "."
7    285 │   .dropdown-menu{
8        ╵   ^
9
10assets/.../global.scss - Warning: Css Minimizer Plugin:  > 
11assets/.../global.scss:255:6: warning: Expected identifier but found "*"
12    255 │       *background-color: #d9d9d9;
13        ╵       ^
14
15assets/.../master.scss - Warning: Css Minimizer Plugin:  > 
16assets/.../master.scss:567:8: warning: Expected ":" but found "{"
17    567 │   circle {
18        ╵          ^
19 "dependencies": {
20    "@angular/animations": "^12.2.3",
21    "@angular/cdk": "^12.2.2",
22    "@angular/common": "^12.2.3",
23    "@angular/compiler": "^12.2.3",
24    "@angular/core": "^12.2.3",
25    "@angular/forms": "^12.2.3",
26    "@angular/http": "^7.2.16",
27    "@angular/material": "^12.2.3",
28    "@angular/platform-browser": "^12.2.3",
29    "@angular/platform-browser-dynamic": "^12.2.3",
30    "@angular/router": "^12.2.3",
31    "@fortawesome/fontawesome-free": "^5.15.4",
32    "@ngrx/store": "^6.1.0",
33    "@okta/okta-angular": "^3.0.1",
34    "@okta/okta-auth-js": "^4.7.1",
35    "angular-datatables": "^0.6.4",
36    "angular-image-slider": "0.0.8",
37    "autobind-decorator": "^2.4.0",
38    "bootstrap": "^4.6.0",
39    "core-js": "^2.5.4",
40    "file-saver": "^2.0.2",
41    "gulp-cli": "^2.3.0",
42    "json-bigint": "^1.0.0",
43    "jsrsasign": "^10.3.0",
44    "lodash": "4.17.10",
45    "ng-simple-slideshow": "^1.2.4",
46    "ng2-scroll-to-el": "^1.2.1",
47    "ng2-search-filter": "^0.4.7",
48    "ngx-filter-pipe": "^2.1.2",
49    "ngx-logger": "3.3.11",
50    "ngx-order-pipe": "^2.0.1",
51    "ngx-pagination": "^3.2.0",
52    "pagination": "file:src/app/packages/pagination-0.0.1.tgz",
53    "rxjs": "7.3.0",
54    "rxjs-compat": "^6.3.2",
55    "sass": "^1.36.0",
56    "single-spa": "^5.9.2",
57    "single-spa-angular": "^5.0.2",
58    "systemjs": "^6.8.3",
59    "true-case-path": "^1.0.3",
60    "tslint": "^6.0.0",
61    "xlsx": "^0.17.1",
62    "zone.js": "~0.11.4"
63  },
64  "devDependencies": {
65    "@angular-builders/custom-webpack": "^12.1.1",
66    "@angular-devkit/build-angular": "^12.2.2",
67    "@angular-eslint/builder": "12.3.1",
68    "@angular-eslint/eslint-plugin": "12.3.1",
69    "@angular-eslint/eslint-plugin-template": "12.3.1",
70    "@angular-eslint/schematics": "12.3.1",
71    "@angular-eslint/template-parser": "12.3.1",
72    "@angular/cli": "^12.2.2",
73    "@angular/compiler-cli": "^12.2.3",
74    "@angular/language-service": "^12.2.3",
75    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
76    "@types/bootstrap": "^4.1.2",
77    "@types/jasmine": "2.8.6",
78    "@types/jasminewd2": "2.0.3",
79    "@types/lodash": "4.14.110",
80    "@types/node": "14.6.2",
81    "@typescript-eslint/eslint-plugin": "4.28.2",
82    "@typescript-eslint/parser": "4.28.2",
83    "await": "^0.2.6",
84    "cheerio": "^1.0.0-rc.2",
85    "codelyzer": "~4.2.1",
86    "eslint": "^7.26.0",
87    "font-awesome": "^4.7.0",
88    "fs-promise": "^2.0.3",
89    "gulp": "^4.0.2",
90    "gulp-inline-css": "^3.3.0",
91    "gulp-inline-source": "^4.0.0",
92    "htmlhint-ng2": "0.0.13",
93    "husky": "^1.3.1",
94    "jasmine-core": "~2.99.1",
95    "jasmine-spec-reporter": "~4.2.1",
96    "karma": "^6.3.4",
97    "karma-chrome-launcher": "^2.2.0",
98    "karma-coverage-istanbul-reporter": "^2.1.1",
99    "karma-jasmine": "~1.1.1",
100    "karma-jasmine-html-reporter": "^0.2.2",
101    "karma-junit-reporter": "^1.2.0",
102    "mediaquery-text": "1.0.7",
103    "ng-bullet": "^1.0.3",
104    "protractor": "^5.4.2",
105    "puppeteer": "^1.14.0",
106    "sonar-scanner": "^3.1.0",
107    "ts-node": "~5.0.1",
108    "tslint": "~5.9.1",
109    "tslint-sonarts": "^1.9.0",
110    "typescript": "^4.3.5"
111  }
112

ANSWER

Answered 2021-Sep-08 at 10:30

I had the same problem. You should change the import of 'assets/.../variables.scss' to './assets/.../variables.scss'. In my case it was in styles.scss but it can be in every .scss file.

Source https://stackoverflow.com/questions/69040951

Community Discussions contain sources that include Stack Exchange Network

Tutorials and Learning Resources in Bootstrap

Tutorials and Learning Resources are not available at this moment for Bootstrap

Share this Page

share link

Get latest updates on Bootstrap