styled components configuration

[lev-savranskiy]

HI! i am new to Storybook. Ran the demo fine today.
When i try to add our own styled component used in gatsby project - i am getting an error in sb run.
I obviously miss styled or sass loader.
Can you please give me an idea what has to be done?

main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-styled-component-theme/dist/register"
  ]
}

package.json

  "name": "nutrafol",
  "private": true,
  "description": "Nutrafol's headless site",
  "version": "1.0.0",
  "author": "Nutrafol <tim@nutrafol.com>",
  "dependencies": {
    "@emotion/core": "^10.0.22",
    "@emotion/styled": "^10.0.23",
    "@nutrafol/popup-helper": "0.1.2",
    "@popperjs/core": "^2.4.4",
    "@rebass/grid": "^6.1.0",
    "apollo-boost": "^0.4.4",
    "chroma-js": "^2.1.0",
    "currency-formatter": "^1.5.5",
    "emotion-theming": "^10.0.19",
    "focus-trap-react": "^8.3.2",
    "gatsby": "^2.4.0",
    "gatsby-image": "^2.2.31",
    "gatsby-plugin-emotion": "^4.1.15",
    "gatsby-plugin-layout": "^1.1.16",
    "gatsby-plugin-manifest": "^2.2.27",
    "gatsby-plugin-postcss": "^2.1.15",
    "gatsby-plugin-react-helmet": "^3.1.14",
    "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-remove-serviceworker": "^1.0.0",
    "gatsby-plugin-sass": "^2.3.14",
    "gatsby-plugin-segment-js": "^3.6.0",
    "gatsby-plugin-sharp": "^2.3.13",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-remark-video-poster": "0.0.1-alpha.1",
    "gatsby-source-filesystem": "^2.1.36",
    "gatsby-source-graphql": "^2.1.23",
    "gatsby-source-prismic": "^3.3.3",
    "gatsby-transformer-remark": "^2.6.48",
    "gatsby-transformer-sharp": "^2.3.3",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.1",
    "node-sass": "^4.14.1",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.7.0",
    "prismic-reactjs": "^1.3.3",
    "prop-types": "^15.7.2",
    "react": "^16.11.0",
    "react-ab-test": "^2.0.1",
    "react-accessible-accordion": "^3.0.1",
    "react-apollo": "^3.1.3",
    "react-card-flip": "^1.0.10",
    "react-dom": "^16.11.0",
    "react-expand-animated": "^1.0.2",
    "react-flipcard": "^0.2.1",
    "react-helmet": "^5.2.1",
    "react-popper": "^2.2.3",
    "react-select": "^3.1.0",
    "react-slick": "^0.27.12",
    "react-transition-group": "^4.3.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.2.1",
    "stylelint": "^12.0.0",
    "tailwind.macro": "^1.0.0-alpha.10",
    "tailwindcss": "^1.1.3",
    "use-d3-transition": "^1.1.5",
    "validator": "^12.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@storybook/addon-actions": "^6.1.21",
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-links": "^6.1.21",
    "@storybook/react": "^6.1.21",
    "babel-loader": "^8.2.2",
    "core-js": "^3.9.1",
    "eslint": "^7.10.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-formatter-pretty": "^4.0.0",
    "husky": "^4.3.0",
    "lint-staged": "^10.4.0",
    "prettier": "^1.19.1",
    "storybook-addon-styled-component-theme": "^1.3.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "./src/**/**/*.js": [
      "eslint --format=pretty"
    ]
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop -H 0.0.0.0 -p 8000",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve -H 0.0.0.0 -p 9000",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

[KenACollins]

Hi Lev,

I see that you already installed the Styled Components package:

npm install --save styled-components

That is a good start. Now, you need to install the Babel plug-in for Styled Components:

npm install --save-dev babel-plugin-styled-components

Then in the root of your project, create a .babelrc file with the following content:

{
    "env": {
        "development": {
            "plugins": [
                [
                    "babel-plugin-styled-components",
                    {
                        "ssr": true,
                        "displayName": true,
                        "preprocess": false
                    }
                ]
            ],
            "presets": [
                // "next/babel"
            ]
        },
        "production": {
            "plugins": [
                [
                    "babel-plugin-styled-components",
                    {
                        "ssr": true,
                        "displayName": true,
                        "preprocess": false
                    }
                ]
            ],
            "presets": [
                // "next/babel"
            ]
        }
    },
    "plugins": [
        [
            "babel-plugin-styled-components",
            {
                "ssr": true,
                "displayName": true,
                "preprocess": false
            }
        ]
    ]
}

I don't understand everything I am doing here with Babel, but this worked for me. I read about this configuration here

[lev-savranskiy]

@KenACollins i fixed it.

i was missing build process completely

babel src --out-dir ./dist