Does this work with Rollup.js?

[DaveSauce]

I have a component library that uses rollup.js and typescript. I've attempted to add WebPack to run Happo, but without any luck yet.

I've followed the install process for examples, but I get this error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'src' in '/Users/.../src/components/Button'

I've also added a webpack.config.js:

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
    modules: [path.resolve("./src"), path.resolve("./node_modules")],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

and tried adding babel-plugin-module-resolver

.babelrc

[
  "module-resolver",
  {
    "root": ["./src"]
  }
]

but none of these efforts have made a difference. This seems like a basic config issue, but it's been blocking me all day. This has me wondering if there is some fundamental incompatibility with Happo and a rollup based project. Is there an example of a working project with Happo and Rollup?

Happo seems like an exciting project, and I'd love to get it to work with my component library.

[trotzig]

Hi @DaveSauce! I would recommend you integrate using a "static bundle". It is mainly targeted at people who aren't using webpack in their own pipeline. There's a little bit more work initially (as you have to provide the bundle yourself) but you have better control through the entire chain.

Documentation is a little bare-bones at the moment. I made a Rollup demo a while back where you might be able to get some inspiration: https://github.com/happo/happo-static-package-demo

I'm happy to help you along the way. You can post here or send an email to [email protected] and I'll respond as quickly as I can. @lencioni might also be able to answer some questions (if he has time). He made the static integration for Airbnb a few months back.
cc @lencioni

[DaveSauce]

@trotzig Thanks for the examples! Switching to the static bundle was pretty straightforward, but now I have a different error:

Error: Request to GET https://happo.io/api/snap-requests/4722240 failed: 500 - An error occurred for browser-chrome: page.evaluate: ReferenceError: getAllErrors is not defined

This does not seem to be browser specific - ie, I just get it for a different browser when I remove chrome from .happo.js.

I'm wondering if this is TypeScript related? I removed happo-plugin-typescript since it seems to be based on WebPack.

[trotzig]

Let me debug that. In the meantime, can you use the static bundle locally? It could be that there's an initialization error -- getAllErrors is an internal method and it could be that the static bundle errors out before the internal method is initialized (this is a somewhat wild theory).

[trotzig]

The fact that it happens on chrome in one case, and another browser in another case is that we show the error from the first failing browser.

[trotzig]

I'm wondering if this is TypeScript related? I removed happo-plugin-typescript since it seems to be based on WebPack.

You were right, you don't need happo-plugin-typescript.

[trotzig]

Okay, it looks like there are a few issues here. The fact that it manifests as a ReferenceError: getAllErrors is not defined is confusing. But I can see a few things:

• the iframe.html file has the wrong name/extension (yours is iframe.hmtl)
• there is no /bundle.js file in the assets that get sent to happo.io. Are you running this locally or in CI? It could be that you're not building the rollup bundle before you invoke the happo run command.

[DaveSauce]

@trotzig I'm only attempting to run this locally right now.

Haha - I just spent 2 minutes staring at iframe.hmtl before I figured out what the issue was there. 🤦‍♂️

I've been attempting to run Happo out of it's own static directory, instead of lib, where my bundle is. When I put iframe.html in lib and point .happo.js to it, I get this new error (progress!):

const e = new Error(`Request to ${method} ${url} failed: ${response.status} - ${await response.text()}`);
                ^
Error: Request to GET https://happo.io/api/snap-requests/4734120 failed: 500 - An error occurred for browser-chrome: Timed out while waiting for window.happo

[trotzig]

Okay, yeah this is heading in the right direction. :)

When you build bundle.js, where does it end up? I'm noticing that there is no bundle.js file in the static package sent to Happo (you can inspect what gets sent by going to happo.io > click Dashboard > click on one of the snap-requests > click the Download Assets link). In the demo repo I made, I put iframe.html in a folder called ./static. Then when I build bundle.js using Rollup, I write to ./static/bundle.js. The .happo.js configuration file is then pointing to the static folder. Here's the Rollup config:

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'static/bundle.js',
    format: 'iife'
  },
  plugins: [nodeResolve(), commonjs()],
};

Could you use a similar approach? Apologies that this isn't better documented -- you're one of the first people to use this integration type and I appreciate all the feedback and your persistence!

[DaveSauce]

@trotzig Thanks for all of the help on this! 😁

I updated my rollup config like you described, and now I can see bundle.js in the downloaded assets. However, I'm getting this error message now:

const e = new Error(`Request to ${method} ${url} failed: ${response.status} - ${await response.text()}`);
                ^
Error: Request to GET https://happo.io/api/snap-requests/4776383 failed: 500 - An error occurred for browser-chrome: Uncaught ReferenceError: jsxRuntime is not defined (at http://localhost:4444/bundle.js:32883:8)

[trotzig]

Okay, that's some progress at least!

I don't actually know what the jsxRuntime error is. Seems related to something babel does, but I can't say for sure how you'd solve it. Does this error also occur when you run locally? If it does, it's probably easier to debug in the browser (happo will only give you a one-liner of the error).

[ljharb]

That’s the new jsx transform from react; it’s enabled by default in react 17, and can be opted into in react 16.

[DaveSauce]

@trotzig I'm just seeing a blank screen when I run locally and visit http://localhost:8080/iframe.html - is this expected? I feel like I may be misunderstanding something fundamental here. I see the contents of iframe.html and bundle.js in the network tab.

When I run window.happo.nextExample(); in the dev tools console, I get this error:

VM407:1 Uncaught TypeError: Cannot read properties of undefined (reading 'nextExample')
    at <anonymous>:1:14

[trotzig]

Yeah that's expected. The iframe.html file (weirdly named, I know...) is supposed to be a blank canvas for Happo to render things on (Happo workers repeatedly call window.happo.nextExample() to render examples).

If window.happo is undefined, you might be missing a call to happoStatic.init(). Could that be it?