Error: Evaluation failed: ReferenceError: __STORYBOOK_CLIENT_API__ is not defined

[prathameshkoshti]

Trying out this tool on React95's storybook I followed the read me document. I'm not able to figure out where I'm heading in the wrong direction.

Here's my package file:

{
    "name": "react95",
    "version": "2.0.0",
    "authors": [
        "Artur Bień"
    ],
    "description": "Refreshed Windows95 UI components for modern web apps - React95",
    "keywords": [
        "react",
        "styled-components",
        "windows95",
        "component",
        "vaporwave"
    ],
    "license": "MIT",
    "repository": "git@github.com:arturbien/React95.git",
    "homepage": "https://react95.io",
    "main": "./dist/index.js",
    "files": [
        "/dist"
    ],
    "publishConfig": {
        "access": "public"
    },
    "scripts": {
        "storybook": "start-storybook -p 9009 -s public",
        "build:storybook": "build-storybook -s public -o ./docs",
        "prepublishOnly": "npm run release",
        "release": "npm run build:dev && npm run build:prod",
        "build:dev": "cross-env NODE_ENV=development rollup -c",
        "build:prod": "cross-env NODE_ENV=production rollup -c",
        "test": "jest",
        "test:watch": "jest --watch",
        "test:coverage": "jest --coverage",
        "lint": "eslint src --ext .js",
        "lint:fix": "npm run lint -- --fix"
    },
    "peerDependencies": {
        "react": "^16.8.2",
        "react-dom": "^16.8.2",
        "styled-components": "^4.1.3"
    },
    "devDependencies": {
        "@babel/cli": "^7.6.2",
        "@babel/core": "^7.6.2",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/preset-env": "^7.6.2",
        "@babel/preset-react": "^7.0.0",
        "@storybook/addon-actions": "^5.0.10",
        "@storybook/addon-info": "^5.0.10",
        "@storybook/addon-links": "^5.0.10",
        "@storybook/addon-options": "^5.0.10",
        "@storybook/addon-storysource": "^5.0.10",
        "@storybook/react": "^5.0.10",
        "@testing-library/jest-dom": "^4.1.0",
        "@testing-library/react": "^9.2.0",
        "@types/jest": "^24.0.18",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.0.6",
        "babel-plugin-styled-components": "^1.10.6",
        "cross-env": "^6.0.3",
        "eslint": "^5.16.0",
        "eslint-config-airbnb": "^17.1.1",
        "eslint-config-prettier": "^6.0.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.15.1",
        "husky": "^3.0.8",
        "jest": "^24.9.0",
        "jest-styled-components": "^6.3.3",
        "lint-staged": "^9.4.1",
        "prettier": "^1.18.2",
        "prop-types": "^15.7.2",
        "react": "^16.10.1",
        "react-dom": "^16.10.1",
        "rimraf": "^3.0.0",
        "rollup": "^1.9.0",
        "rollup-plugin-babel": "^4.3.2",
        "rollup-plugin-commonjs": "^9.3.0",
        "rollup-plugin-node-resolve": "^4.0.1",
        "rollup-plugin-replace": "^2.1.1",
        "storybook-addon-styled-component-theme": "^1.2.0",
        "styled-components": "^4.4.0"
    },
    "dependencies": {},
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.js": [
            "eslint --fix",
            "prettier --write",
            "git add"
        ]
    },
    "story2sketch": {
        "stories": "all",
        "output": "dist/great-ui.asketch.json"
    }
}

Here's the config file:

import { configure, addDecorator } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";
import { withThemesProvider } from "storybook-addon-styled-component-theme";

import themes from "../src/components/common/themes";

import GlobalStyle from "./decorators/globalStyle";
import { getStorybook } from "@storybook/react";

const demoThemes = [
    themes.default,
    themes.lilacRoseDark,
    themes.water,
    themes.coldGray,
    themes.violetDark
];

addDecorator(
    withInfo({
        inline: true,
        header: false,
        source: false,
        maxPropsIntoLine: 1,
        styles: stylesheet => ({
            // Setting the style with a function
            ...stylesheet,
            table: {
                background: "red"
            }
        })
    })
);
addDecorator(GlobalStyle);
addDecorator(withThemesProvider(demoThemes));

const req = require.context("../src", true, /\.stories\.js$/);
function loadStories() {
    req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);

export { getStorybook }

And webconfig file:

const path = require('path');

module.exports = ({ config }) => {
    const newConfig = {
        ...config
    };

    config.module.rules.push({
        test: /\.stories\.js?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
    });

    newConfig.output.library = "[name]";

    return newConfig;
};

[llazarus]

As noted in https://github.com/chrisvxd/story2sketch/issues/91, the latest supported version appears to be v4.

I'm experiencing similar issues to yourself with @storybook/react version 5.2.8

[helabenkhalfallah]

I had a similar issue, I resolved it by : npm run build-storybook then npm run story2sketch.

[chrisvxd]

story2sketch@1.7.1 now supports Storybook v5 and 6. Closing this on that basis, but feel free to reopen if you're still having issues.