Comments (13)
That’s the new jsx transform from react; it’s enabled by default in react 17, and can be opted into in react 16.
from happo.io.
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.
from happo.io.
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
from happo.io.
@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.
from happo.io.
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).
from happo.io.
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.
from happo.io.
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 isiframe.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 thehappo run
command.
from happo.io.
@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
from happo.io.
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!
from happo.io.
@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)
from happo.io.
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).
from happo.io.
@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
from happo.io.
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?
from happo.io.
Related Issues (20)
- Running happo with more than 1 test file. HOT 3
- Error: Error: The NODE_ENV environment variable is required but was not specified. HOT 2
- Failures when running Happo HOT 4
- Trouble using Limiting Targets HOT 9
- Failure when running happo on safari browser HOT 2
- Spurious diffs with radio buttons on Safari HOT 8
- Environment variables in CircleCI run HOT 2
- Failures running Happo - File Already Exists HOT 4
- Script for `happo-ci-circleci` broken on custom base branch HOT 1
- Spurious diffs with iOS-safari HOT 4
- Script `happo-ci-github-actions` fails in 6.6.0
- Images created by `next/image` are not rendered in screenshots HOT 9
- babel-polyfill always imported
- [Feature request] Run Function After Comparison Request HOT 6
- Can you expand support for babel-loader to include v9 HOT 3
- Failure due to maxHeight not being applied HOT 5
- Allow customization of prerender DOM HOT 1
- Request to apply a lock if the test is going to exceed the number of available snapshots HOT 4
- @babel/preset-react and babel-plugin-dynamic-import-node HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from happo.io.