search

bridgetownrb / bridgetown

A next-generation progressive site generator & fullstack framework, powered by Ruby
https://www.bridgetownrb.com
MIT License
1.13k stars 114 forks source link

In Bridgetown 1.3.0 beta1, does not work Ruby2JS 5.1.0 #756

Closed Atelier-Mirai closed 1 year ago

Atelier-Mirai commented 1 year ago

Thank you for releasing Bridgetown 1.3.0 beta1. I tried to see if it would work with Ruby2JS. It does not seem to work.

Bridgetown Version:

bridgetown 1.3.0.beta1 "Kelly Butte"

To Reproduce

Here are the steps I took.

$ gem install bridgetown -N -v 1.3.0.beta1
$ bridgetown new mysite
$ cd mysite
$ bin/bridgetown start

I accessed localhost:4000 and saw index.md.

Next, the following commands were executed. docs

$ bin/bridgetown configure ruby2js

A new file src/_components/hello_world.js.rb was created, which contained the following

# Try adding <hello-world></hello-world> somewhere on your site to see this # example web component in action!

So we added the following to index.md <hello-world></hello-world>

Current behavior

I accessed localhost:4000 again and looked at index.md, no change.

Expected behavior

I was expecting the code to show up as <p><strong>Hello World!</strong></p> since it is written as self.inner_html = "<p><strong>Hello World!</strong></p>" .

Screenshots

The following is the output to the terminal.

[Frontend] import-glob:../../src/_components/*/.{js,jsx,js.rb,css}:2:33: [Frontend] 2 │ ... import * as module0 from '../../src/_components/hello_world.js.rb' [Frontend] ╵ ~~~~~~~~~

It does not seem to be working because an error is displayed.

I know this is a lot of work for you, but I would be very happy if you could improve it.

[Bridgetown]           Starting: Bridgetown v1.3.0.beta1 (codename "Kelly Butte")
[Server] * Puma version: 6.2.2 (ruby 3.2.1-p31) ("Speaking of Now")
[Server] * PID: 21566
[Server] * Listening on http://0.0.0.0:4000
[Server] Use Ctrl-C to stop
[Frontend] yarn run esbuild-dev
[Frontend] yarn run v1.22.19
[Frontend] $ node esbuild.config.js --watch
[Frontend] esbuild: frontend bundling started...
[Frontend] ✘ [ERROR] [plugin ruby2js] subprocess error exit 1,  bundler: failed to load command: ruby2js (/opt/homebrew/opt/rbenv/versions/3.2.1/bin/ruby2js)
[Frontend] /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/rubygems_integration.rb:308:in `block in replace_bin_path': can't find executable ruby2js for gem ruby2js. ruby2js is not currently included in the bundle, perhaps you meant to add it to your Gemfile? (Gem::Exception)
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/rubygems_integration.rb:336:in `block in replace_bin_path'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/bin/ruby2js:25:in `<top (required)>'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/cli/exec.rb:58:in `load'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/cli/exec.rb:58:in `kernel_load'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/cli/exec.rb:23:in `run'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/cli.rb:492:in `exec'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/vendor/thor/lib/thor/command.rb:27:in `run'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/vendor/thor/lib/thor/invocation.rb:127:in `invoke_command'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/vendor/thor/lib/thor.rb:392:in `dispatch'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/cli.rb:34:in `dispatch'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/vendor/thor/lib/thor/base.rb:485:in `start'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/cli.rb:28:in `start'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/bundler-2.4.10/exe/bundle:45:in `block in <top (required)>'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/site_ruby/3.2.0/bundler/friendly_errors.rb:117:in `with_friendly_errors'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/bundler-2.4.10/exe/bundle:33:in `<top (required)>'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/bin/bundle:25:in `load'
[Frontend]  from /opt/homebrew/opt/rbenv/versions/3.2.1/bin/bundle:25:in `<main>'
[Frontend]
[Frontend]
[Frontend]     import-glob:../../src/_components/**/*.{js,jsx,js.rb,css}:2:33:
[Frontend]       2 │ ... import * as module0 from '../../src/_components/hello_world.js.rb'
[Frontend]         ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[Frontend]
[Frontend]   This error came from the "onLoad" callback registered here:
[Frontend]
[Frontend]     node_modules/@ruby2js/esbuild-plugin/src/index.js:45:10:
[Frontend]       45 │     build.onLoad({ filter: options.buildFilter }, async (args) ={
[Frontend]          ╵           ~~~~~~
[Frontend]
[Frontend]     at setup (/Users/mirai/projects/mybeta/node_modules/@ruby2js/esbuild-plugin/src/index.js:45:11)
[Frontend]     at handlePlugins (/Users/mirai/projects/mybeta/node_modules/esbuild/lib/main.js:1260:21)
[Frontend]
[Frontend] esbuild: build process error, cannot write manifest
[Frontend] error Command failed with exit code 1.
[Frontend] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[Frontend]   Exception raised: RuntimeError
[Frontend] Command failed with status (1): [yarn run esbuild-dev...]
[Frontend]                  1: /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/rake-13.0.6/lib/rake/file_utils.rb:67:in `block in create_shell_runner'
[Frontend]                  2: /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/rake-13.0.6/lib/rake/file_utils.rb:57:in `sh'
[Frontend]                  3: /Users/mirai/projects/mybeta/Rakefile:35:in `block (2 levels) in <top (required)>'
[Frontend]                  4: /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/rake-13.0.6/lib/rake/task.rb:281:in `block in execute'
[Frontend]                  5: /opt/homebrew/opt/rbenv/versions/3.2.1/lib/ruby/gems/3.2.0/gems/rake-13.0.6/lib/rake/task.rb:281:in `each'
[Frontend]          Backtrace: Use the --trace option for complete information.
[Bridgetown]        Environment: development
[Bridgetown]             Source: /Users/mirai/projects/mybeta/src
[Bridgetown]        Destination: /Users/mirai/projects/mybeta/output
[Bridgetown]     Custom Plugins: /Users/mirai/projects/mybeta/plugins
[Bridgetown]         Generating…
[Bridgetown]         Pagination: disabled. Enable in site config with pagination:\n enabled: true
[Bridgetown]             Done! 🎉 Completed in less than 0.1 seconds.
[Bridgetown]
[Bridgetown]     Now serving at: http://localhost:4000
[Bridgetown]                     http://192.168.2.102:4000
[Bridgetown]
[Server] 127.0.0.1 - - [02/May/2023:09:03:23 +0900] "GET / HTTP/1.1" 200 3532 0.0001
[Server] 127.0.0.1 - - [02/May/2023:09:03:23 +0900] "GET /_bridgetown/static/index.54YWA64G.css HTTP/1.1" 304 - 0.0002
[Server] 127.0.0.1 - - [02/May/2023:09:03:23 +0900] "GET /images/logo.svg HTTP/1.1" 304 - 0.0001
[Server] 127.0.0.1 - - [02/May/2023:09:03:23 +0900] "GET /_bridgetown/static/index.6X27IUHB.js HTTP/1.1" 304 - 0.0001
[Server] 127.0.0.1 - - [02/May/2023:09:03:23 +0900] "GET /_bridgetown/static/index.6X27IUHB.js.map HTTP/1.1" 304 - 0.0001
[Server] 127.0.0.1 - - [02/May/2023:09:03:23 +0900] "GET /_bridgetown/static/index.54YWA64G.css.map HTTP/1.1" 304 - 0.0004

Computing environment (please complete the following information):

Additional context

fpsvogel commented 1 year ago

I'm trying to use Ruby2JS as well, and for me the error described above disappeared after I added gem "ruby2js" to my Gemfile and ran bundle. Now my site builds without errors, but the <hello-world> element is empty on the page where I put it, and I'm seeing this error in the browser console:

Uncaught ReferenceError: custom_elements is not defined
    rb hello_world.js.rb:9
    __require index.HFLECBSA.js:11
    <anonymous> *.{js,jsx,js.rb,css}:2
    <anonymous> index.HFLECBSA.js:5356

All of the above are the same whether I'm on 1.2 or 1.3 beta1, and the error is the same regardless of browser (I tried Firefox 112.0.1 and Chrome 112.0.5615.165).

The only similar issue that I could find was one raised by @Atelier-Mirai: https://discord.com/channels/711236503493148733/901191662464819201/1087317406583631912

fpsvogel commented 1 year ago

On second glance, these seem like separate issues. I'd be happy to copy my message above into a new issue if that would be more appropriate.

jaredcwhite commented 1 year ago

@fpsvogel Thanks for pointing that out…it is indeed all the same issue. There's just a whole new configuration method which the latest esbuild plugin + gem is going to require. If you follow these instructions to add a config file, then it should work. We'll make sure the automation installs that automatically.

fpsvogel commented 1 year ago

@jaredcwhite Thank you! I added a config file and now it's working.