module_type: nil causes "NIL is not supported by runtime" about js-routes

[bogdan]

What is your JsRoutes configuration?

[khiemb]

i followed the 2.0 upgrade doc, so this is

config/initializers/js_routes.rb

JsRoutes.setup do |config|
  config.module_type = nil
  config.namespace = "Routes"
end

[bogdan]

I can't reproduce it locally because JS environments are too diverse.

For the sake of debugging can you change the following method locally inside your copy of js-routes gem to:

            isSupported() {
               console.log(Root);
               console.log(Namespace);
               console.log(!!Root);
               return true;
            },

js-routes/lib/routes.js

Line 77 in dba9abe

return !RubyVariables.NAMESPACE || !!Root;

And then restart the project and tell me if it fixes your issue and what is the output in console?

[khiemb]

I made the changes and this is the console output


routes.js.erb:77 undefined
routes.js.erb:78 Uncaught ReferenceError: Namespace is not defined
    at Object.isSupported (routes.js.erb:78:1)
    at UtilsClass.is_module_supported (routes.js.erb:476:1)
    at UtilsClass.ensure_module_supported (routes.js.erb:479:1)
    at UtilsClass.define_module (routes.js.erb:484:1)
    at routes.js.erb:1402:1
    at Module.<anonymous> (routes.js.erb:1404:1)
    at Module../app/javascript/routes.js.erb (routes.js.erb:1406:1)
    at __webpack_require__ (bootstrap:84:1)
    at Module../app/javascript/packs/application.js (application.js:1:1)
    at __webpack_require__ (bootstrap:84:1)

[bogdan]

I tried to fix an issue. Can you try the gem from current master if it solves the problem?

[khiemb]

I tried the gem from current master, and getting this error in routes.js.erb at

export default this.Routes

Uncaught TypeError: Cannot read properties of undefined (reading 'Routes')
    at Module.<anonymous> (0-c0a5c58e421ed5570b29.chunk.js:2025:74)
    at Module../app/javascript/routes.js.erb (0-c0a5c58e421ed5570b29.chunk.js:2026:30)
    at __webpack_require__ (runtime~application-aa001ceb574a6f67800d.js:80:30)
    at Module../app/javascript/packs/application.js (application-96c4f6da898f33e3ba24.chunk.js:170:72)
    at __webpack_require__ (runtime~application-aa001ceb574a6f67800d.js:80:30)
    at Object.1 (application-96c4f6da898f33e3ba24.chunk.js:2815:18)
    at __webpack_require__ (runtime~application-aa001ceb574a6f67800d.js:80:30)
    at checkDeferredModules (runtime~application-aa001ceb574a6f67800d.js:46:23)
    at Array.webpackJsonpCallback (runtime~application-aa001ceb574a6f67800d.js:33:19)
    at application-96c4f6da898f33e3ba24.chunk.js:1:57
    

[bogdan]

See, there is a kind of problem within webpacker environment: top level this is equal to undefined.
The problem is that you need to use one os the following depending on the JS environment: window, this or global.
You need to use this code snippet if you really need that: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis#search_for_the_global_across_environments

Overall I do not recommend a configuration like this. It is not environment agnostic.

You should try instead:

JsRoutes.setup do |config|
  config.module_type = nil
end

const Routes = <%= JsRoutes.generate %>
export Routes;

[bogdan]

No followup, closing. Feel free to reopen.