UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: preview is not defined

[frantz101]

I am trying to set up this tool, i followed the read me but getting "UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: preview is not defined" when i run the command line command. here's what my package.json looks like

{
  "name": "html",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "ajv": "^6.5.0",
    "handlebars": "^4.0.11",
    "handlebars-loader": "^1.7.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4",
    "story2sketch": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@storybook/react": "^3.4.6",
    "@storybook/addon-actions": "^3.4.6",
    "@storybook/addon-links": "^3.4.6",
    "@storybook/addons": "^3.4.6",
    "babel-core": "^6.26.3",
    "babel-runtime": "^6.26.0"
  },
  "story2sketch": {
    "stories": "all",
    "output": "public/great-ui.asketch.json"
  }
}

and here's what my config files look like

import { configure } from '@storybook/react';
import { getStorybook } from "@storybook/react";

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);
export { getStorybook };

webpack.config.js

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  storybookBaseConfig.module.rules.push({
    test: /\.handlebars$/,
    loaders: ["handlebars-loader"],
    include: path.resolve(__dirname, "../")
  });
  const newConfig = {
      ...storybookBaseConfig
    };

    // Add this:
    // Export bundles as libraries so we can access them on page scope.
    newConfig.output.library = "[name]";
  // Return the altered config
  return storybookBaseConfig;
};

thanks!

[mariarelian]

Having a similar issue

(node:44212) UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: preview is not defined
    at <anonymous>:1:1
    at ExecutionContext.evaluateHandle (/usr/local/lib/node_modules/story2sketch/node_modules/puppeteer/lib/ExecutionContext.js:75:15)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:118:7)
(node:44212) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:44212) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[chrisvxd]

Hi @frantz101, this is usually caused by issues in the webpack config, and I think I can see the issue with yours.

In your webpack.config.js, you're defining newConfig, adding the library parameter to output correctly, but not returning it. I would suggest updating it to:

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
    // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    const newConfig = {
        ...storybookBaseConfig
    };

    newConfig.module.rules.push({
        test: /\.handlebars$/,
        loaders: ["handlebars-loader"],
        include: path.resolve(__dirname, "../")
    });

    // Add this:
    // Export bundles as libraries so we can access them on page scope.
    newConfig.output.library = "[name]";

    // Return the altered config
    return newConfig;
};

Let me know if that helps. @mariarelian I would presume a similar issue with your webpack config - feel free to post below and I'll try to help debug.

[frantz101]

That fixed my issue! thanks!

[chrisvxd]

Great, going to close this issue.

@mariarelian if you still need help, please feel free to open another issue and I'll do my best to assist.

[HasamiAini]

### experiencing problems as below

(node:14320) UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: getQrPng is not defined at ExecutionContext._evaluateInternal (D:\data bot\wabot sahaja\node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:172:23)
at processTicksAndRejections (internal/process/task_queues.js:93:5) at async ExecutionContext.evaluate (D:\data bot\wabot sahaja\node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:107:16) (Use node --trace-warnings ... to show where the warning was created) (node:14320) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:14320) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.