CSS error given when index.css is used in tutorial

There appears to be a problem with the CSS of the Learn Storybook tutorial.

Following the instructions exactly up to and including the Config section of https://www.learnstorybook.com/intro-to-storybook/react/en/simple-component/ gives the following error:

I can fix this by commenting out the relevant piece of CSS in index.css as follows but then the rendering of the icons is not correct.

This error may put beginner users off, so any resolution would be much appreciated.

[jonniebigodes]

@nsclong sorry for the issue you are facing with the tutorial. I took a look and it seems it might be related to the recent update to react-scripts and react as part of the create-react-app package. As of now when you follow the instructions detailed in the tutorial, your package.json will look like this:

{
  "name": "taskbox",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@storybook/addon-actions": "^6.0.27",
    "@storybook/addon-essentials": "^6.0.27",
    "@storybook/addon-links": "^6.0.27",
    "@storybook/node-logger": "^6.0.27",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.27",
    "babel-loader": "^8.1.0",
    "react-is": "^17.0.1"
  }
}

If you continue to follow the instructions provided up to the Simple component page you’ll run into the error you mentioned.

As a temporary workaround you could do the following:

• Delete node_modules and yarn.lock/ package.lock.
• Change react-scripts to a previous version, you can use 3.43.
• Change react and react-dom to a previous version. You can use version 16.3.1

Which will result in your package.json to look like:

{
  "name": "taskbox",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@storybook/addon-actions": "^6.0.27",
    "@storybook/addon-essentials": "^6.0.27",
    "@storybook/addon-links": "^6.0.27",
    "@storybook/node-logger": "^6.0.27",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.27",
    "babel-loader": "^8.1.0",
    "react-is": "^17.0.1"
  }
}

And once you issue yarn storybook the development build will go through as you can see below:

And your Storybook will load without issues:

I’ve checked with the Storybook maintainers and they are actively working on fixing this issue and provide the exact seamless integration that you and the other readers of the tutorial had in the past.

If you want to keep track on the progress being done. Check the Storybook Discord server and repo.

Stay safe

[jonniebigodes]

@nicc777 React 17 and CRA were updated recently and that introduced some changes that were tracked and should now be fixed. Also Storybook just released 6.1 and it should take care of some of the issues that the tutorial has been suffering. I’m currently working on checking the tutorial and see what needs to be changed.

Stay safe.