Fengari fails to import on a front-end website

[alexis-belmonte]

Hi! 😄 I am currently in the process of integrating Fengari on a React-based front-end website to run user code locally, for demonstration purposes.

Naturally, I've installed fengari and imported it like so:

// @ts-ignore
import fengari from 'fengari';

Yet, the library fails to execute with a line complaining that process does not exist, which makes sense since we're not running code on a backend environment like Node.js or so.

Looking at the stack trace, the issue occurs at https://github.com/fengari-lua/fengari/blob/master/src/luaconf.js#L3 as the expression fails to check if process even exists in the first place, unlike on line 39.

I suggest to add typeof process !== "undefined" to the expression, so that it looks like this:

const conf = (typeof process !== "undefined" && process.env.FENGARICONF ? JSON.parse(process.env.FENGARICONF) : {})

However, I'm open to other suggestions if there's a better way of fixing this issue so that it runs anywhere.

Thanks! 😄

[alexis-belmonte]

For your convenience, I have formed a patch that can be directly applied to the codebase:

diff --git a/src/luaconf.js b/src/luaconf.js
index dbdcf9ac74c720196935d5f25956dbb5b3e05f86..0f7b8203085e67df679feae7a7f03a4f6d3cb012 100644
--- a/src/luaconf.js
+++ b/src/luaconf.js
@@ -1,6 +1,6 @@
 "use strict";
 
-const conf = (process.env.FENGARICONF ? JSON.parse(process.env.FENGARICONF) : {});
+const conf = (typeof process !== "undefined" && process.env.FENGARICONF ? JSON.parse(process.env.FENGARICONF) : {});
 
 const {
     LUA_VERSION_MAJOR,

[daurnimator]

process.env. is a special thing that the webpack loader looks for; it fails if you check process first!

Naturally, I've installed fengari and imported it like so:

// @ts-ignore import fengari from 'fengari';

Have you tried fengari-web? https://github.com/fengari-lua/fengari-web

If you're looking for how we handle it, see https://github.com/fengari-lua/fengari-web/blob/77d35f5e1516f431cbb96e165b4272f2fc9b0b3a/webpack.config.js#L37

---

Note that we need to update the webpack build chain everywhere but it's non-trivial

[alexis-belmonte]

Sorry for missing out on details, and maybe causing a XY problem! 🫢

To illustrate, this is what I'm currently doing:

You have two textarea elements:

• one contains the Lua code to run
• the other one is a simple console output

My long-term objective is to do something similar to what p5.js does, except that you swap out JavaScript for Lua! :]

I've tried fengari-web but it errors out on Vite with React when it tries to access lauxlib, lua, etc. which makes sense since Vite doesn't support webpacks in the first place AFAIK 😬

Additionally, I don't really want to implement the actual page logic proper in Lua; I'm fine with JS/TS -- rather, I want a more controlled approach similar to what you would do traditionally with the actual Lua API.

[daurnimator]

You have two textarea elements:

* one contains the Lua code to run

* the other one is a simple console output

Did you see https://github.com/fengari-lua/fengari.io/blob/master/static/lua/web-cli.lua which you can see on the homepage. or the more simple: http://fengari.io/repl

[alexis-belmonte]

Yes, this is kind of what I want, but I want the actual logic to be written in JavaScript/TypeScript, not in Lua. I only want the user code to be written in Lua.

[alexis-belmonte]

Hi @daurnimator, I haven't heard from you regarding this issue. Is there something I could do to fix this issue?

[daurnimator]

Hi @daurnimator, I haven't heard from you regarding this issue. Is there something I could do to fix this issue?

Yes; when you do a webpack build, use this plugin config: https://github.com/fengari-lua/fengari-web/blob/77d35f5e1516f431cbb96e165b4272f2fc9b0b3a/webpack.config.js#L35-L40