Important
This tutorial has been replaced by our Carbon React Tutorial using Next.js. Head over there to learn more.
An app for the Carbon Design System tutorial
License: Apache License 2.0
Important
This tutorial has been replaced by our Carbon React Tutorial using Next.js. Head over there to learn more.
React tutorial does not work with latest node on mac. I raised #5395 on the carbon repo - because the link at the side of the tutorial led me there.
I have node v13.7.0 and am running a on a mac. I followed the instruction on you web site https://www.carbondesignsystem.com/tutorial/react/step-1. This is such a bad first impression of Carbon. I was hoping to pick up a recent set of dependancies that I would use as a the basis of a project, but it seems the levels of software associated with this tutorial are very backlevel. I notice Carbon has just supported node 12 in #5391.
When I enter yarn, it fails I get errors:
"% yarn
yarn install v1.22.0
[1/4] π Resolving packages...
[2/4] π Fetching packages...
[3/4] π Linking dependencies...
[4/4] π¨ Building fresh packages...
[1/4] β fsevents
[2/4] β fsevents
[-/4] β waiting...
warning Error running install script for optional dependency: "/Users/davidradley/carbon-tutorial/node_modules/react-scripts/node_modules/fsevents: Command failed.
Exit code: 1
Command: node install
Arguments:
Directory: /Users/davidradley/carbon-tutorial/node_modules/react-scripts/node_modules/fsevents
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | x64
node-pre-gyp info check checked for "/Users/davidradley/carbon-tutorial/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v79-darwin-x64/fse.node" (not found)"
I deleted yarn.lock and get
"yarn
yarn install v1.22.0
info No lockfile found.
[1/4] π Resolving packages...
warning react-scripts > [email protected]: Way too old
warning react-scripts > react-app-polyfill > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-scripts > workbox-webpack-plugin > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > eslint > file-entry-cache > flat-cache > [email protected]: CircularJSON is in maintenance only, flatted is its successor.
warning react-scripts > jest > jest-cli > jest-config > babel-core > babel-register > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-scripts > jest > jest-cli > prompts > [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit https://github.com/lukeed/kleur/releases/tag/v3.0.0\ for migration path(s).
warning react-scripts > workbox-webpack-plugin > workbox-build > joi > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > workbox-webpack-plugin > workbox-build > joi > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > workbox-webpack-plugin > workbox-build > joi > topo > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > jest > jest-cli > jest-environment-jsdom > jsdom > [email protected]: use String.prototype.padStart()
warning react-scripts > jest > jest-cli > jest-environment-jsdom > jsdom > [email protected]: request has been deprecated, see request/request#3142
warning @commitlint/cli > babel-polyfill > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning node-sass > [email protected]: request has been deprecated, see request/request#3142
warning node-sass > node-gyp > [email protected]: request has been deprecated, see request/request#3142
[2/4] π Fetching packages...
[3/4] π Linking dependencies...
[4/4] π¨ Building fresh packages...
"
Additional information
Screenshots or code
Notes
@davidradl davidradl added the type: bug π label 3 hours ago
@davidradl
Author
davidradl commented 32 minutes ago
I notice #5391 has just gone in. I assume that the tutorial will be updated in due course.
I am closing this issue - I will raise against the carbon tutorial repo.
Attach files by dragging & dropping, selecting or pasting them.
Remember, contributions to this repository should follow its contributing guidelines and code of conduct.
Assignees
No one assigned
Labels
type: bug π
Projects
None yet
Milestone
No milestone
Linked pull requests
Successfully merging a pull request may close this issue.
None yet
Notifications
Customize
Youβre receiving notifications because you authored the thread.
1 participant
@davidradl
Β© 2020 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About
What browser are you working in? Chrome.
Instructions in step 3 are not working:
https://www.carbondesignsystem.com/tutorial/react/step-3#query-component
When following this section in step 3, the repo page is broken.
See this PR for an example: https://github.com/carbon-design-system/carbon-tutorial/pull/2894/files#submit-review
Do this after all tutorial steps have been completed.
Describe in detail the issue you're having.
Is this a feature request (new component, new icon), a bug, or a general issue?
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to see changed?
What browser are you working in?
What version of the Carbon Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
"tutorial": {
"title": "Tutorial",
"sub-nav": {
"overview": {
"title": "Introduction"
},
"react-step-1": {
"title": "1. Installing Carbon"
},
"react-step-2": {
"title": "2. Building pages"
},
"react-step-3": {
"title": "3. Using APIs"
},
"react-step-4": {
"title": "4. Creating components"
},
"react-step-5": {
"title": "5. Deploying to IBM Cloud"
}
}
},
The tutorial step1 step that requires pushing the step1 branch to origin fails git authentication.
I used my git account password and authentication failed. Googling led me to learning that you have to create a personal access token and use that to authenticate. Far from intuitive.
Please add a note of guidance to that step telling the student that they must go to:
User->Settings->Developer Settings->Personal Access Token and create a new token. Use that token for the login challenge that the push will cause.
Dear All,
I am trying to access the tutorial website as I am currently in the last step but it gives error 404, Please advice
https://www.carbondesignsystem.com/tutorial/react-step-5
Tutorial Instructions link in the readme.md is broken
Hi! Thanks for maintaining this repo π
I'm encountering an error. I won't post the whole stack here, but this is part of it:
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, unknown) (falling back to source compile with node-gyp)
Generally when I see something like this, my first step is to look to the node version, but I noticed the node version isn't specified in the repository which can lead to issues. I noticed there are two old issues about not working with latest node.
I'd recommend:
package.json
"engines": {
"node": "11.5.0"
},
Adding an .nvmrc
or .node-version
file which specifies the node version.
Adding instructions to the README
which recommend installing fnm with --use-on-cd
so that the correct node version is quickly and automatically selected and installed if necessary.
That should solve this forever!
Happy to open a PR if someone will tell me what the correct node version is!
Thanks
-Lee
Hey, can somebody help with this logs?
3:00:26 PM: Build ready to start
3:00:28 PM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837
3:00:28 PM: build-image tag: v3.3.5
3:00:28 PM: buildbot version: 036f37945d6de439a17a554b3ae02e2f8f0f1fb0
3:00:28 PM: Fetching cached dependencies
3:00:28 PM: Starting to download cache of 367.4MB
3:00:32 PM: Finished downloading cache in 3.30976444s
3:00:32 PM: Starting to extract cache
3:00:43 PM: Finished extracting cache in 11.457219468s
3:00:43 PM: Finished fetching cache in 14.941905633s
3:00:43 PM: Starting to prepare the repo for build
3:00:44 PM: Preparing Git Reference pull/3621/head
3:00:45 PM: Starting build script
3:00:45 PM: Installing dependencies
3:00:46 PM: Started restoring cached node version
3:00:51 PM: Finished restoring cached node version
3:00:52 PM: v10.18.1 is already installed.
3:00:53 PM: Now using node v10.18.1 (npm v6.13.4)
3:00:53 PM: Attempting ruby version 2.6.2, read from environment
3:00:54 PM: Using ruby version 2.6.2
3:00:54 PM: Using PHP version 5.6
3:00:54 PM: Started restoring cached node modules
3:00:54 PM: Finished restoring cached node modules
3:00:54 PM: Started restoring cached yarn cache
3:00:54 PM: Finished restoring cached yarn cache
3:00:55 PM: Installing NPM modules using Yarn version 1.15.2
3:00:57 PM: yarn install v1.15.2
3:00:58 PM: [1/4] Resolving packages...
3:00:58 PM: [2/4] Fetching packages...
3:01:20 PM: info [email protected]: The platform "linux" is incompatible with this module.
3:01:20 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
3:01:20 PM: info [email protected]: The platform "linux" is incompatible with this module.
3:01:20 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
3:01:20 PM: [3/4] Linking dependencies...
3:01:20 PM: warning " > [email protected]" has incorrect peer dependency "[email protected]".
3:01:20 PM: warning " > [email protected]" has unmet peer dependency "carbon-icons@^7.0.7".
3:01:20 PM: warning "carbon-components-react > [email protected]" has unmet peer dependency "prop-types@>=15".
3:01:20 PM: warning " > [email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning " > [email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-utilities@^1.3.2".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-cache@^1.3.2".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-link@^1.2.12".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-utilities@^1.3.2".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:33 PM: [4/4] Building fresh packages...
3:01:34 PM: Done in 36.34s.
3:01:34 PM: NPM modules installed using Yarn
3:01:34 PM: Started restoring cached go cache
3:01:34 PM: Finished restoring cached go cache
3:01:34 PM: unset GOOS;
3:01:34 PM: unset GOARCH;
3:01:34 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
3:01:34 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
3:01:34 PM: go version >&2;
3:01:34 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
3:01:34 PM: go version go1.12 linux/amd64
3:01:34 PM: Installing missing commands
3:01:34 PM: Verify run directory
3:01:34 PM: Executing user command: yarn build
3:01:34 PM: yarn run v1.15.2
3:01:35 PM: $ react-scripts build
3:01:36 PM: Creating an optimized production build...
3:01:38 PM: Failed to compile.
3:01:38 PM: ./src/index.js
3:01:38 PM: Error: [BABEL] /opt/build/repo/src/index.js: Cannot find module '@babel/helper-create-regexp-features-plugin' (While processing: "/opt/build/repo/node_modules/babel-preset-react-app/index.js")
3:01:38 PM: error Command failed with exit code 1.
3:01:38 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
3:01:38 PM: Skipping functions preparation step: no functions directory set
3:01:38 PM: Caching artifacts
3:01:38 PM: Started saving node modules
3:01:38 PM: Finished saving node modules
3:01:38 PM: Started saving yarn cache
3:01:38 PM: Finished saving yarn cache
3:01:38 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
3:01:38 PM: Started saving pip cache
3:01:38 PM: Finished saving pip cache
3:01:38 PM: Started saving emacs cask dependencies
3:01:38 PM: Finished saving emacs cask dependencies
3:01:38 PM: Started saving maven dependencies
3:01:38 PM: Finished saving maven dependencies
3:01:38 PM: Started saving boot dependencies
3:01:38 PM: Shutting down logging, 6 messages pending
Running the DAP tool at the completion of the Step 4 carbon component tutorial shows 5 violations, rather than the 4 shown in the tutorial page.
There are 4 violations for the
elements, as expected, plus one for the(seen in the screen shot under "Elements containing a 'region' role must be labeled with aria-label or arial-labelledby.")
Navigation bar no longer showing Repositories tab in Carbon Tutorial. Works when using a previous version of carbon components (10.3.0 and 7.3.0).
Reference carbon-design-system/carbon#3546
Hi
Regarding Step1:
The instructions are not clear on what to do with App.css in the src directory. I assumed by 'moving' it meant to rename it to app.scss but by doing so an error occurs that the file is not the same or not found. I determined that the file in the directory is called App.css and the line to import as far as the instructions say, is app.scss. There is a case sensitive issue here. Once I renamed this file in the src folder from 'App' to 'app', the error went away. Perhaps I missed something but the instructions are unclear at the very least. Additionally, perhaps my system is the cause of the issue. In any case, I have Windows 10 and working on the CMD prompt. A lot of the instructions have the $ when I copy them from the tutorial, should I be using *nix instead?
Thanks
Instructions
"
Re-compiling all of the Carbon Sass takes a while, even on fast systems. Letβs speed this up by moving our custom app Sass into a separate file, app.scss in the βsrcβ directory, and import that from App.js.
src/App.js
import "./app.scss";
"
We need an "Overview" page in carbon-website
that introduces who the tutorial is for (developers), what's getting built, how it's getting built (React), prerequisites, and an overview of each tutorial step.
This can wait until tutorial steps 1 - 5 are put together. I'd be nice to have this include a gif of the completed tutorial, or even a link to a deployed tutorial app.
The step explains how we need to use the element
prop with the UI shell, but not that we also need to change the href
to the to
prop. It's in the code snippet, but could get overlooked.
@nxn-4-wdf commented on Fri Aug 09 2019
Operating system
Any.
Browser
Any.
What version of the Carbon Design System are you using?
10.4
As instructed in the Carbon tutorial, app uses a UI-Shell with header navigation and react-router-dom
Link components, which lead to different pages sorted by a HashRouter. In order to enable navigation to internal page anchors, page also uses HashLink components from react-router-hash-link
.
What did you expect to happen?
With keyboard navigation, pressing on the Enter-key when on the SkipToContent should remain on the same page and scroll to the HTML element with id="main-content"
.
What happened instead?
Application tries to navigate to /#/main-content
which renders the default Router page, instead of staying on the same page.
Example application on CodeSandBox: https://37eph.csb.app/
From there, using keyboard navigation ("Tab" and "Shift-Tab"):
Page two
and press the Enter-keyPlease create a reduced test case in CodeSandbox
Code is here : https://codesandbox.io/s/skiptocontent-37eph
@dakahn commented on Mon Sep 30 2019
Hello friend! I think this issue should be filed against the Carbon Tutorial repository.
In the React Step 1, there is import Button step:
Next weβll import a Button from Carbon to test that our dependencies are working properly. At the top of App.js, import the Button by adding the following:
import { Button } from 'carbon-components-react';
But when I run to this code, it always throws exception, I am on Mac using Node v8.17.0.
Describe in detail the issue you're having.
Failed to compile
./node_modules/carbon-components-react/es/components/Icon/Icon.js
Module not found: Can't resolve 'carbon-icons' in '$HOME/Documents/CMDP/sourcecode/carbon-tutorial/node_modules/carbon-components-react/es/components/Icon'
Is this a feature request (new component, new icon), a bug, or a general issue?
a bug
Is this issue related to a specific component?
Carbon-Icon
What did you expect to happen? What happened instead? What would you like to see changed?
When I am using the below code, it works for me and error disappeard. I would like to know if this code should be updated into the Carbon tutorial guide.
import Button from 'carbon-components-react/lib/components/Button/Button';
What browser are you working in?
Chrome
What version of the Carbon Design System are you using?
"dependencies": {
"@carbon/icons-react": "^10.9.1",
"carbon-components": "^10.10.1",
"carbon-components-react": "^7.10.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.1.2",
"react-scripts": "2.1.8"
},
"devDependencies": {
"@commitlint/cli": "^7.5.2",
"@commitlint/config-conventional": "^7.5.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.5",
"node-sass": "^4.13.1",
"prettier": "^1.17.0"
},
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
import a Button from Carbon using code:
src/App.js
import { Button } from 'carbon-components-react';
In the App component return, you can now replace:
src/App.js
<div>
Hello Carbon! Well, not quite yet. This is the starting point for the Carbon tutorial.
</div>
with:
<Button>Button</Button>
import Button from 'carbon-components-react/lib/components/Button/Button';
needs to be updated to how we previously imported Button as
import { Button } from 'carbon-components-react';
see
#44
The starting point of step 1 branch just says "Hello world". I like how it has the failing tests. Maybe we can keep around the create-react-app spinning logo so they start the tutorial, check out step 1, see create-react-app that is familiar to them. See failing test. Then trim out create-react-app files when doing step 1.
Any app-specific Sass should live in a separate file App.scss
or something because it takes a long time to build our entire Sass source.
I think we should be able to update instruction in carbon-website
, and then PR the change into react-step-2
branch?
following step-1 tutorial I got this error:
./src/app.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/app.scss)
@import './components/TutorialHeader/tutorial-header.scss';
^
File to import not found or unreadable: ./components/TutorialHeader/tutorial-header.scss.
in /Users/chechu/RHOS/carbon-tutorial/src/app.scss (line 2, column 1)
I don't see anywhere this file is created in the tutorial
The code snippet in https://www.carbondesignsystem.com/tutorial/react-step-1 that says
import Button from 'carbon-components-react/lib/components/Button/Button';
needs to be updated to how we previously imported Button as
import { Button } from 'carbon-components-react';
After steps 1 - 5 are put together, go through the tutorial one final time and generate consistent screenshots to include in the carbon-website
pages. At minimum, include an end-of-step screenshot in each page.
We can do this last in case we need to shift around content among steps during tutorial construction.
Explain how to use this repo using Carbon website tutorial.
I've followed your tutorial and my code seems to be fine.
However when I compile I run into this error:
Undefined variable: "$spacing-05".
/src/app.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/app.scss)
padding-top: $spacing-05;
^
Undefined variable: "$spacing-05".
I guess this should be a context variable available within the framework.
Please check the attached screenshot for more details. Thanks.
There seems to be a deprecated dependency to the fsevents module. Although the server starts a lot of errors appear while installing.
Am I missing something?
warning Error running install script for optional dependency: "./node_modules/fsevents: Command failed.
Exit code: 1
Command: node install
Arguments:
Directory: ./node_modules/fsevents
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | x64
node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp info check checked for "./node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" (not found)
node-pre-gyp http GET https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp http 404 https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp http 404 status code downloading tarball https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v72 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error Connection closed while downloading tarball file
[...]
Failed to execute './.nvm/versions/node/v12.16.3/bin/node ./node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=./node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node --module_name=fse --module_path=./noβ¨
$ git clone [fork of this repository]
$ cd carbon-tutorial
$ git remote add upstream https://github.com/carbon-design-system/carbon-tutorial.git
$ git fetch upstream
$ git checkout -b react-step-1 upstream/react-step-1
$ yarn
macOS v10.15.4
nvm 0.35.3
node v12.16.3
npm 6.14.4
The last step needs some generic instructions on how to submit a PR to carbon-tutorial
to acknowledge completion of that step. How it needs to be a passing CI build. How to use ci-check
command. Maybe also how to update snapshots for their PR to get CI check to pass.
These PRs will never get merged, but it's a good concept to teach. It's how dev essentials labs will verify completion. Maybe in the future we could give out swag to completion of tutorial steps.
(From a Slack conversation in carbon-tutorial channel)
Step 5 of the Carbon tutorial tells people to log into IBM cloud using api.ng.bluemix.net
. There are a couple of problems with this:
api.us-south.cf.cloud.ibm.com
(see https://cloud.ibm.com/docs/overview?topic=overview-whatsnew&origin_team=T02M79KSB#new-cloud-foundry-api-endpoints).Netlify deploy preview fails even though the app is working fine on my Mac.
On the last step on this page .. "Pull Request (PR)"
https://app.netlify.com/sites/carbon-tutorial/deploys/5cedba9fbdee760008325e37
3:13:49 PM: Waiting to build. Currently running 3 concurrent builds on your account
3:13:49 PM: Build ready to start
3:13:51 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
3:13:51 PM: build-image tag: v3.3.2
3:13:51 PM: buildbot version: 75cd99f62ada9e21edea53208e8baf0eab85a045
3:13:52 PM: Fetching cached dependencies
3:13:52 PM: Starting to download cache of 182.9MB
3:13:53 PM: Finished downloading cache in 781.675465ms
3:13:53 PM: Starting to extract cache
3:13:58 PM: Finished extracting cache in 5.488962011s
3:13:58 PM: Finished fetching cache in 6.37826738s
3:13:58 PM: Starting to prepare the repo for build
3:13:58 PM: Preparing Git Reference pull/103/head
3:14:00 PM: Starting build script
3:14:00 PM: Installing dependencies
3:14:01 PM: Started restoring cached node version
3:14:03 PM: Finished restoring cached node version
3:14:04 PM: v10.15.3 is already installed.
3:14:05 PM: Now using node v10.15.3 (npm v6.4.1)
3:14:05 PM: Attempting ruby version 2.6.2, read from environment
3:14:07 PM: Using ruby version 2.6.2
3:14:07 PM: Using PHP version 5.6
3:14:07 PM: Started restoring cached node modules
3:14:07 PM: Finished restoring cached node modules
3:14:07 PM: Started restoring cached yarn cache
3:14:07 PM: Finished restoring cached yarn cache
3:14:08 PM: Installing NPM modules using Yarn version 1.15.2
3:14:08 PM: yarn install v1.15.2
3:14:08 PM: [1/4] Resolving packages...
3:14:09 PM: [2/4] Fetching packages...
3:14:28 PM: error [email protected]: The platform "linux" is incompatible with this module.
3:14:29 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
3:14:28 PM: error Found incompatible module
3:14:28 PM: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
3:14:29 PM: Error during Yarn install
3:14:29 PM: Shutting down logging, 3 messages pending
Describe in detail the issue you're having.
After the CSS optimisation the footer grid is broken.
Is this a feature request (new component, new icon), a bug, or a general issue?
no
Is this issue related to a specific component?
yes, Carbon grid.
What did you expect to happen? What happened instead? What would you like to see changed?
Grid should use the 16 columns.
What browser are you working in?
Chrome 75.0.3770.100 (Official Build) (64-bit)
What version of the Carbon Design System are you using?
10.3.0
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
no
See pull request:
#1447 (comment)
With the feature the footer looks good again:
yarn ci-check
, I get warnings/errors because prettier uses the explicit end_of_line = LF
setting from .editorconfig
to assert that all the files should have LF line endings.yarn format
, all of the source files - including ones I haven't touched, such as .github/**
all get edited by prettier, forcing the line endings to LF. (And just to clarify, it's not just listing all the filenames; it really is changing all the files created during git clone
, which all then appear as changed files and candidates for adding to a commit.)The problem here is that we have one tool (git) that's wanting to use CRLF, and another explicit configuration (prettier, via .editorconfig
) that wants to use LF.
I suspect this hasn't been spotted previously because most people are probably using Macs, where the default line-ending from a git clone
is LF.
The result is that there's a battle between git and prettier.
The good news is that there are a few trivially-simple ways to resolve it:
.gitattributes
entries to make the git behaviour match that of the .editorconfig
settings; this is a bit fiddly, and a bit surprising for Windows users as some editors don't like pure-LF files.Issue with babel-preset-react-app on netlify deploy hook, build fails with exit code 1
yarn add babel-preset-react-app -D
fixes the issuegetting bellow error
$ git push origin react-step-1
ERROR: Permission to carbon-design-system/carbon-tutorial.git denied to nabaraj.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
using ssh key
I faced below error while trying to push local code
remote: Permission to carbon-design-system/carbon-tutorial.git denied to moashraf100.
fatal: unable to access 'https://github.com/carbon-design-system/carbon-tutorial.git/': The requested URL returned error: 403
After all steps have been built.
Hello colleagues,
i followed the steps of your tutorial. Trying to run yarn serve it fails due to out of date version of nodejs though I had a more less current version installed:
[andreas@oc3207008144 carbon-tutorial-vue]$ which node
~/nodejs/CURRENT/bin/node
[andreas@oc3207008144 carbon-tutorial-vue]$ node --version
v12.10.0
[andreas@oc3207008144 carbon-tutorial-vue]$ rpm -e nodejs-6.17.1-1.el7.x86_64
error: Failed dependencies:
nodejs = 1:6.17.1-1.el7 is needed by (installed) npm-1:3.10.10-1.6.17.1.1.el7.x86_64
nodejs is needed by (installed) yarn-1.21.1-1.noarch
Any idea what i can do to tell yarn to accept the existing version?
Thx in advance,
Andreas
On the command example on the Step5.
$ cf login -a https://api.ng.bluemix.net -sso
Should be --sso
instead of -sso
According to the cf docs, there is only --sso
doc: https://cli.cloudfoundry.org/en-US/cf/login.html
This will not impact users to do the login (Only IBMers trying to use the internal SSO)
Changing '
to \"
seems to make the command work on Windows. E.g.:
"format": "prettier --write \"**/*.{js,md,scss}\"",
"format:diff": "prettier --list-different \"**/*.{js,md,scss}\"",
Most likely related to a dependency on the sharp package. On the latest NodeJS, Yarn fails after doing a fresh clone and branch creation as described here -> https://www.carbondesignsystem.com/tutorial/react-step-1
Install the latest node and npm
as described here -> https://www.carbondesignsystem.com/tutorial/react-step-1
$ git clone [fork of this repository]
$ cd carbon-tutorial
$ git remote add upstream [email protected]:carbon-design-system/carbon-tutorial.git
$ git fetch upstream
$ git checkout -b react-step-1 upstream/react-step-1
$ yarn
This appears to be the same issue as seen here for Gatsby gatsbyjs/gatsby#13780
The quick fix is to add a specific sharp version for Yarn in package.json
as follows
{
"resolutions": {
"sharp": "0.22.1"
}
}
This is probably just a question of waiting for, and updating to, the fixed dependencies.
Describe in detail the issue you're having.
Is this a feature request (new component, new icon), a bug, or a general issue?
Is this issue related to a specific component?
What did you expect to happen? What happened instead? What would you like to see changed?
What browser are you working in?
What version of the Carbon Design System are you using?
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
-> Project throws error: "TypeError: Cannot read property 'organization' of undefined"
I was following the React tutorial for Carbon Components and ran into an issue where running the CI check step described on the tutorial website was failing and I couldn't find any differences between the react-step-1
branch of this repo and my code for the files that I was supposed to change.
I checked out the react-step-1
branch, ran yarn ci-check
and it ran fine.
I kept digging deeper and I found that the react-step-1
branch does not seem to run any tests while my code does. And sure enough the react-step-1
branch has one undocumented difference to the master
branch which explains why things fail for me and work on the react-step-1
branch.
The following commit removes the call to yarn test
from the yarn ci-check
and voila if you don't run tests you are not getting test failures:
c687aa0
I suggest including above commit / change also in the master branch to avoid having people run into the same trap as me.
master
yarn ci-check
as part of the tutorial and notice the test failuresHi, I am completing step3 and when adding element I get the 'organization' error. I have created the personal access token with all privileges to rule out permission issue, but it still gives the error. I've tried to put the variable in .env and also created a new file .env.local but still get the error.
MyComponent
instead of <MyComponent />
syntax for React componentsNeed a way to add testing of some sort and automate the PR review process for the tutorial.
All,
I followed this link - https://www.carbondesignsystem.com/tutorial/react-step-1/ to setup and commit the files and try to create the pull request but I failed number of times. Only last step I'm failing.
Some time I'm facing permission denied problem
ERROR: Permission to carbon-design-system/carbon-tutorial.git denied to smanikandan-btech.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.