Crank: Stateful Crank Component example not working when hosted locally

[pjdon]

I was following the Getting-Started guide and was unable to get the A Stateful Crank Component example running on my machine. I recreated all of the contents and ran npm install, but upon running parcel index.html --opent the app <div class="app"> is empty.

I managed to recreate and run A Simple Crank Component, but when I tried to turn the component into a stateful generator, it fails and gives no error.

Is there possibly a guide that walks new users through how to set up the components from scratch on their local machine instead of the online sandbox?

[ryhinchey]

I can replicate this. Looking into it

[pjdon]

It seems that just adding (and not even using) the stateful component causes the render to fail? I'm guessing it's a packaging error.

E.g. going from this index.js

/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

function Greeting({name = "World"}) {
  return (
    <div>Hello {name}</div>
  );
}

renderer.render(<Greeting />, document.body);

to this

/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

function Greeting({name = "World"}) {
  return (
    <div>Hello {name}</div>
  );
}

function* Timer() {
  let seconds = 0;
  const interval = setInterval(() => {
    seconds++;
    this.refresh();
  }, 1000);
  try {
    while (true) {
      yield <div>Seconds: {seconds}</div>;
    }
  } finally {
    clearInterval(interval);
  }
}

renderer.render(<Greeting />, document.body);

[brainkim]

On my phone right now but I bet the error is caused by a missing regenerator runtime. I can’t figure out how or why parcel chooses to transpile your code but usually a missing regenerator runtime helper is the cause of your generator code not working. I’ve been struggling with this stuff too I honestly despise frontend tooling and wish things were better.

[ryhinchey]

this is the error I see in the browser:

Uncaught ReferenceError: regeneratorRuntime is not defined
    at Object.parcelRequire.src/index.js.@bikeshaving/crank (index.js:3)
    at newRequire (src.a2b27638.js:47)
    at src.a2b27638.js:81
    at src.a2b27638.js:120

This is a babel issue. It's transpiling async/await and generator syntax and needs regeneratorRuntime.

Look at the examples here: https://github.com/bikeshaving/crank/blob/master/examples/hackernews/index.js

Adding

import "core-js/stable";
import "regenerator-runtime/runtime";

should do the trick

[ryhinchey]

This fixes the issue. To be clear, this isn't a bug in Crank, just a babel settings issue:

/** @jsx createElement */
import { createElement } from "@bikeshaving/crank";
import { renderer } from "@bikeshaving/crank/dom";

import "core-js/stable";
import "regenerator-runtime/runtime";

function* Timer() {
  let seconds = 0;
  const interval = setInterval(() => {
    seconds++;
    this.refresh();
  }, 1000);
  try {
    while (true) {
      yield <div>Seconds: {seconds}</div>;
    }
  } finally {
    clearInterval(interval);
  }
}

renderer.render(<Timer />, document.body);

[pjdon]

Excellent, I managed to get it to work. Thanks for the lighting fast response!

So as of now, are the following the minimal dependencies for all crank features?
Production: @bikeshaving/crank, core-js, regenerator-runtime
Dev: @babel/core, @babel/preset-react

[ryhinchey]

@pjdon not necessarily. With Parcel, it seems that you need those things unless you want to fine tune your babel file to only target environments that support generators, and async generators/iterators. @babel/preset-env is doing some magic under the hood with parcel.

Here's the stateful example with webpack that will work in your browser without needing the extra core-js and regenerator runtime stuff.

https://github.com/ryhinchey/babel-preset-crank-testing/tree/stateful-example

[brainkim]

I think it also might have something to do with what browsers you support in a package.json browserlists property. I am very skeptical of all of it. Let us know if you need more help!

[ryhinchey]

Yah in my example above I’m not using the preset-env Babel package at all. Makes life a lot easier if you’re not concerned with browser support. If you need to support older browsers you’ll have to fine tune preset-env and browserlist file