Stateful Crank Component example not working when hosted locally about crank HOT 9 CLOSED

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);

from crank.

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

from crank.

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

from crank.

I can replicate this. Looking into it

from crank.

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);

from crank.

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.

from crank.

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

from crank.

@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

from crank.

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!

from crank.