Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to run if JS has dependecies in "require(...)" format #83

Open
matiascr opened this issue Dec 24, 2024 · 1 comment
Open

Unable to run if JS has dependecies in "require(...)" format #83

matiascr opened this issue Dec 24, 2024 · 1 comment

Comments

@matiascr
Copy link

I'm currently trying to build a small app with lustre that I plan to use with a JS library (jsdom). I've a JS file with the code that should work fine. But it fails to resolve the dependencies of the library, returning the following error for many of the dependencies:

❯ gleam run -m lustre/dev start
   Compiled in 0.05s
    Running lustre/dev.main
✅ Project compiled successfully
✅ Esbuild already installed!
❌ Bundling with esbuild

I ran into an unexpected issue while trying to bundle your project with esbuild.
Here's the error message I got:

    ✘ [ERROR] Could not resolve "fs"

    ../../../node_modules/jsdom/lib/api.js:3:19:
      3 │ const fs = require("fs").promises;
        ╵                    ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "--platform=node" to do that, which will remove this error.

This is the start of my .mjs file:

import { Vex, SVGContext } from 'vexflow';
import { JSDOM } from 'jsdom';

const VF = Vex.Flow;
const dom = new JSDOM('<!DOCTYPE html><html><body><div id="vf"></div><body></html>');

vexflow resolves without issues and I can use it, but jsdom fails to get imported.

I have tried installing and running other npm packages in the .mjs file that I use in my gleam project and they generally work, it just complains when they use the require(...) format for importing.

I have set the target = "javascript" in the gleam.toml but if I try to run the app with gleam run -t javascript --runtime node -m lustre/dev start it fails:

❯ gleam run -t javascript --runtime node -m lustre/dev start
   Compiled in 0.04s
error: Target not supported

`lustre/dev` has a main function, but it does not support the javascript
target, so it cannot be run.

Looking for where I could add the --platform=node flag in the project for esbuild to run, I found only a potential solution in ./build/packages/lustre_dev_tools/src/lustre_dev_tools/esbuild.gleam as inside the project, which lets the app start normally with gleam run -m lustre/dev start. However, I'm greeted with this
Uncaught Error: Dynamic require of "path" is not supported
when I open it in the browser so it seems like it's still not possible to use any package that's using the require(...) notation.
@hayleigh-dot-dev hayleigh-dot-dev transferred this issue from lustre-labs/lustre Dec 24, 2024
@hayleigh-dot-dev
Copy link
Contributor

The dev tools bundle your gleam application for use in a browser environment. The package you are trying to include, jsdom, imports a built-in node package called fs for interacting with the file system. This of course fails because there is no fs package in the browser.

The readme for dev tools has this to say about more advanced uses:

If you find yourself needing more configuration or control over your build process, you might be outgrowing what Lustre's dev tools have set out to provide! We'd love to hear from those users too, though, so please open an issue or reach out on Discord if you think something is missing.

For more advanced users, we recommend using vite and the vite-gleam package.

So you may want to try vite, but in general trying to use packages not intended for the browser is going to give you a hard time because what should happen for any of these node builtin modules!

I have set the target = "javascript" in the gleam.toml but if I try to run the app with gleam run -t javascript --runtime node -m lustre/dev start it fails

The dev tools are an erlang application not a javascript one, so that makes sense!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hayleigh-dot-dev @matiascr