Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upgrading to v1 has broken fonts in Storybook

See original GitHub issue

After upgrading to v1.0.0 it appears that my storybook has stopped working. I have updated my preview.js file with the updated ChakraProvider:

addDecorator((storyFn) => (
  <ChakraProvider resetCSS theme={theme}>

The issue is that the theme variables are being output directly on the component:

    <Heading variant="caps6" as="h1">
       Heading Caps6


Here is the same code working within the react app: image What I find that is interesting is that the font-family is not demi it is just cap

Just confirmation that all the fonts and styles have loaded, but are just not being applied: image

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:32 (10 by maintainers)

github_iconTop GitHub Comments

kelvinmauescommented, Nov 16, 2020

Sure @hutber.


  "name": "samui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^1.0.0",
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.0.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "framer-motion": "^2.9.4",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-scripts": "3.4.4",
    "typescript": "^3.8.3"
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "contributors:add": "all-contributors add",
    "contributors:generate": "all-contributors generate",
    "storybook": "start-storybook -p 6006 -s public --no-dll",
    "build-storybook": "build-storybook -s public --no-dll"
  "eslintConfig": {
    "extends": "react-app"
  "browserslist": {
    "production": [
      "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.1.0-rc.3",
    "@storybook/addon-essentials": "^6.1.0-rc.3",
    "@storybook/addon-links": "^6.1.0-rc.3",
    "@storybook/node-logger": "^6.1.0-rc.3",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.0-rc.3",
    "all-contributors-cli": "^6.19.0",
    "babel-loader": "^8.1.0",
    "react-is": "^17.0.1"


const path = require("path");
const toPath = (_path) => path.join(process.cwd(), _path);

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
  webpackFinal: async (config) => {
    return {
      resolve: {
        alias: {
          "@emotion/core": toPath("node_modules/@emotion/react"),
          "emotion-theming": toPath("node_modules/@emotion/react"),

The preview.js file it is the same wrapping the ChakraProvider in the decorator.

lee-reinhardtcommented, Nov 16, 2020

I was able to work around this in my project by:

Making the above three changes got my Storybook styles working again. I’m not sure if the Storybook rc version actually makes a difference; I didn’t test downgrading to 6.0.x.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Images, fonts, and assets - Storybook - JS.ORG
Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these...
Read more >
OS/2 - Wikipedia
OS/2 (Operating System/2) is a series of computer operating systems, initially created by Microsoft and IBM under the leadership of IBM software designer...
Read more >
Card4Call on the Mac App Store
Easily create your own business cards (size 8.5 x 5.5 cm). Features: - choose from over 2800 icons and 400 textures;.
Read more >
Highly Anticipated Firmware for Surface Book and Surface Pro ...
Surface DTX driver update (v1.3.202.0) improves detection of the Surface keyboard to the clipboard. In addition to the updates list above, the ...
Read more >
Grounded 1.0 Release - Go Big and Go Home!
We're excited to announce that the story is now available to play in ... Adjustments have been made to the weapon and armor...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Hashnode Post

No results found