lev-savranskiy
commented
3 years ago my package.json for reference
{
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/preset-env": "^7.13.9",
"@babel/preset-react": "^7.12.13",
"@emotion/core": "^11.0.0",
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"@nutrafol/popup-helper": "0.1.2",
"@popperjs/core": "^2.9.0",
"@reach/router": "^1.3.4",
"@rebass/grid": "^6.1.0",
"@storybook/addon-docs": "^6.1.21",
"apollo-boost": "^0.4.9",
"babel-plugin-react-docgen": "^4.2.1",
"babel-plugin-remove-graphql-queries": "^3.0.0",
"chroma-js": "^2.1.1",
"currency-formatter": "^1.5.6",
"focus-trap-react": "^8.4.2",
"formik": "^2.2.6",
"gatsby": "^3.0.2",
"gatsby-image": "^3.0.0",
"gatsby-plugin-emotion": "^6.0.0",
"gatsby-plugin-image": "^1.0.0",
"gatsby-plugin-layout": "^2.0.0",
"gatsby-plugin-manifest": "^3.0.0",
"gatsby-plugin-postcss": "^4.0.0",
"gatsby-plugin-react-helmet": "^4.0.0",
"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": "^4.0.1",
"gatsby-plugin-segment-js": "^3.6.0",
"gatsby-plugin-sharp": "^3.0.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-video-poster": "0.0.1-alpha.1",
"gatsby-source-filesystem": "^3.0.0",
"gatsby-source-graphql": "^3.0.0",
"gatsby-source-prismic": "^3.3.3",
"gatsby-transformer-remark": "^3.0.0",
"gatsby-transformer-sharp": "^3.0.0",
"isomorphic-fetch": "^3.0.0",
"jquery": "^3.6.0",
"js-cookie": "^2.2.1",
"node-sass": "^5.0.0",
"postcss-import": "^12.0.1",
"postcss-preset-env": "^6.7.0",
"prismic-reactjs": "^1.3.3",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-ab-test": "^2.0.1",
"react-accessible-accordion": "^3.3.4",
"react-apollo": "^3.1.5",
"react-card-flip": "^1.1.0",
"react-dom": "^17.0.1",
"react-expand-animated": "^1.0.2",
"react-flipcard": "^0.2.1",
"react-helmet": "^6.1.0",
"react-popper": "^2.2.4",
"react-select": "^4.1.0",
"react-slick": "^0.28.0",
"react-transition-group": "^4.4.1",
"slick-carousel": "^1.8.1",
"stylelint": "^13.11.0",
"tailwind.macro": "^0.5.10",
"tailwindcss": "^2.0.3",
"use-d3-transition": "^1.1.5",
"validator": "^13.5.2",
"yup": "^0.32.9"
},
"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/preset-scss": "^1.0.3",
"@storybook/react": "^6.1.21",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"core-js": "3.0.1",
"css-loader": "^5.1.1",
"eslint": "^7.10.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-react-app": "^5.2.1",
"eslint-formatter-pretty": "^4.0.0",
"html-webpack-plugin": "^5.3.0",
"husky": "^4.3.0",
"lint-staged": "^10.4.0",
"postcss": "^8.1.9",
"postcss-cli": "^8.1.0",
"postcss-loader": "^4.2.0",
"prettier": "^1.19.1",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"storybook-addon-styled-component-theme": "^1.3.0",
"style-loader": "^2.0.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": "NODE_ENV=production start-storybook -s ./public -p 6006 --ci",
"build-storybook": "NODE_ENV=production build-storybook"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
thanks for a great recipe!
i was able to run storybook finally on gatsby 3
one issue i notice - __BASE_PATH__ is not defined
it is an easy fix in .storybook/preview.js