When using esbuild rather than webpack, following the instructions for configuring JavaScript does not work as the example given is Webpack-specific.

Steps to reproduce

• Create a project with rails new -j esbuild app
• Add view_component to the Gemfile and run bundle install
• rails g component Thingy
• Create app/components/thingy_component.js, containing just console.log('IT WORKS')
• Add the following as app/javascripts/components.js, as per https://viewcomponent.org/guide/javascript_and_css.html

function importAll(r) {
  r.keys().forEach(r)
}

importAll(require.context("../components", true, /[_\/]component\.js$/))

• Add import './components' to app/javascript/application.js
• Run rails server and visit http://localhost:3000

Expected behaviour

The browser console should contain "IT WORKS" and no errors.

Actual behaviour

The browser console does not contain "IT WORKS", but has the error

components.js:7 Uncaught TypeError: __require.context is not a function
    at components.js:7:19
    at components.js:7:72

It appears require.context is Webpack-specific. It would help if there could be instructions for all the Javascript systems supported by Rails 7 — or, at least, if the code could be something generic that doesn't require a specific bundling system.

Changing require.context to require produces this error instead:

Uncaught Error: Dynamic require of "../components" is not supported
    at application-55e5e85f5c0e2bd2aa3dc0c7b2a654c8c3b42ce5d1a57fd9e1ecc63897b1b50f.js:9:11
    at components.js:7:11
    at components.js:7:64

System configuration

Rails version: 7.0.3

Ruby version: 3,1,2

Gem version: 2.57.1 (or 3.3.16 if you actually wanted the output of gem --version — it's not 100% clear :)