CSS error given when index.css is used in tutorial
See original GitHub issueThere 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.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:9
Top Results From Across the Web
z-index - CSS: Cascading Style Sheets - MDN Web Docs
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger ...
Read more >CSS Z-Index Not Working? How to Fix It Using Stack Order
The z-index property of CSS is a tricky one. It won't work easily by itself if you don't know how to use it...
Read more >How to Troubleshoot CSS Not Working
In this tutorial, we'll walk through options to troubleshoot why your CSS is not working and offer possible solutions. Browser Caching.
Read more >Webpack: node_modules/css/index.js didn't return a function
This error is caused by a css module inside node_modules . Since you've specified the css -loader in your config, webpack tries to...
Read more >CSS z-index property
... Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, ... The z-index property specifies the stack...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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
andreact
as part of thecreate-react-app
package. As of now when you follow the instructions detailed in the tutorial, yourpackage.json
will look like this: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:
node_modules
andyarn.lock
/package.lock
.react-scripts
to a previous version, you can use3.43
.react
andreact-dom
to a previous version. You can use version16.3.1
Which will result in your package.json to look like:
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
@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.