Hyperstack doesn't work in production

[lionelchauvin]

Reproduction steps:

• create a new hyperstack project

• compile assets with bundle exec rake assets:precompile

• start server in production environnment

• Open your browser on localhost:3000

Expected result

Page should load without javascript errors

Actual result:

The page is blank with the following error:

Uncaught ReferenceError: require is not defined

Solution

I think this is due to the following line:

hyper-component-1.0.alpha1.8/lib/hyper-component.rb:7

Hyperstack.js_import 'react_ujs', defines: 'ReactRailsUJS'

sprockets-rails opens node_modules/react_ujs/package.json in order to determine the file to insert in application.js. Unfortunally "main" is equal to react_ujs/index.js and this file contains "var React=require("react")" I don't understand why "main" is not equal to react_ujs/dist/react_ujs.js.

My solution is to replace hyper-component-1.0.alpha1.8/lib/hyper-component.rb:7 by:

Hyperstack.js_import 'react_ujs/react_ujs/dist/react_ujs.js', defines: 'ReactRailsUJS'

[catmando]

This is weird, and I guess must be a regression. @lionelchauvin can you please try back in say HS 1.5 and see if breaks there?

[lionelchauvin]

Sorry I have a limited time. I don't think it is a regression in HS, I think it is a change in sprocket (from rails 5 to rails 6). It does less magic and just follow what is defined in package.json.

Anyway the problem lies in react_ujs. main property should point to dist files (here a similar issue in another project: https://github.com/material-components/material-components-web/issues/1539)

Do you want I open a ticket upstream ?