Async/Await regeneratorRuntime

[tachyon1337]

React components with Async/Await blow up the server-side render with the reference error ReferenceError: 'regeneratorRuntime' is not defined

Adding an explicit AddScript reference to the facebook runtime or the Babel polyfill in StartUp doesn't resolve the issue. Currently, I'm using React.AspNet 3.2.0 for .net core.

[dustinsoftware]

Hmm...a few things to try.

• Are you trying to do async work outside of componentDidMount? If so, does the crash continue if you move the work to this method so it doesn't run during the server render?
• Does the component crash if you just use promises?
• Is regeneratorRuntime defined on the global scope? You can check this by throwing an Error manually: throw new Error(typeof regeneratorRuntime)

[tachyon1337]

Are you trying to do async work outside of componentDidMount? If so, does the crash continue if you move the work to this method so it doesn't run during the server render?

No. The react lifecycle events are where any setup would take place. However, any async method must be decorated with the async keyword, which, of course, is the source of the error upon transpilation. And to be clear, the error is occurring server-side.

Does the component crash if you just use promises?

Obviously, it would if any setup wasn't tucked away in an event lifecycle method, given that Promise is part of the window global.

Is regeneratorRuntime defined on the global scope?

I'm AddScript referencing the facebook runtime directly in the startup file.

My guess is that babel preset React.NET uses requires additional plugin references to work with the facebook runtime . The myriad of babel presets/plugins is not exactly a straight forward exercise to figure out. And the documentation on how to change up the React.NET babel configuration is not exactly clear. It works fine by default for es6 stuff, but es7 and beyond appears to present a problem.

Thanx for the response, tho...

[dustinsoftware]

Have you tried using webpack? It’s possible the on the fly Babel compilation won’t work with what you’re trying to do right now. On Sat, Apr 7, 2018 at 14:41, S. Francis notifications@github.com wrote:

Are you trying to do async work outside of componentDidMount? If so, does the crash continue if you move the work to this method so it doesn't run during the server render?

No. The react lifecycle events are where any setup would take place. However, any async method must be decorated with the async keyword, which, of course, is the source of the error upon transpilation. And to be clear, the error is occurring server-side.

Does the component crash if you just use promises?

Obviously, it would if any setup wasn't tucked away in an event lifecycle method, given that Promise is part of the window global.

Is regeneratorRuntime defined on the global scope?

I'm AddScript referencing the facebook runtime directly in the startup file.

My guess is that babel preset React.NET uses requires additional plugin references to work with the facebook runtime . The myriad of babel presets/plugins is not exactly a straight forward exercise to figure out. And the documentation on how to change up the React.NET babel configuration is not exactly clear. It works fine by default for es6 stuff, but es7 and beyond appears to present a problem.

Thanx for the response, tho...

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/reactjs/React.NET/issues/525#issuecomment-379501228, or mute the thread https://github.com/notifications/unsubscribe-auth/AA5hFuQtNaF6_MacFG5gF0z3muSSaCocks5tmTKZgaJpZM4TC2jk .

[Daniel15]

"'regeneratorRuntime' is not defined" sounds like you're not properly loading Regenerator. I don't have much experience with it, unfortunately.

[tachyon1337]

Have you tried using webpack? It’s possible the on the fly Babel compilation won’t work with what you’re trying to do right now.

it is not enough of a show stopper at this point to motivate moving to webpack bundling. I don't rely exclusively on react for client-side. I also use web components, polymer, etc. Webpack does not simplify that workflow. One of the reasons I started using React.NET was the ability to use react/jsx while avoiding being burdened by webpack.

[dustinsoftware]

There might be a way to make this work with ReactJS.NET but I don't have the time to investigate this right now. If you need to use Regenerator then you'll probably need to use webpack.

[ghost]

I also have the same problem. How can I add plugins and presets directly in C#?

Working code without async javascript :

        Initializer.Initialize(registration => registration.AsSingleton());
        var container = AssemblyRegistration.Container;
        container.Register<ICache, NullCache>();
        container.Register<IFileSystem, SimpleFileSystem>();

        var config = ReactEnvironment.Current.Configuration.BabelConfig;
        config.Plugins.Add("transform-async-to-generator");       
        config.Presets.Add("env");

        var script = File.ReadAllText( Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "test.js"));
        var babelScript = ReactEnvironment.Current.Babel.Transform(script);