How to make it works with webpacker?

[dbelyaeff]

Rails 5.2 introduce Webpacker gem which can help you to avoid using Sprockets.

Is there any way to make JS-Routes usable with Webpacker?

[le0pard]

Generate separate file from js-routes and use it in webpack. For any routes change you need regenerate this file.

[dbelyaeff]

Is there any way to automate this?

[le0pard]

@codEmotion rake task?

[dbelyaeff]

Thanks.

This is the recipe:

window.Routes = require('./routes.js')

[le0pard]

I think require('./routes.js') can work with ES6 module system - no need to apply it on window.

[bogdan]

I think we should add a doc on that to readme.

[gtarsia]

I created my own webpack loader for the routes, so it would rebuild when I changed routes.rb. It worked but it would take 6 seconds to build, because it had to reload the whole rails app. I didn't like it.

I would instead recommend writing your own generator instead of a rake task because of the meaning of what this is doing.

# lib/generators/routes_generator.rb
# run it with: rails generate routes
class RoutesGenerator < Rails::Generators::Base
  def create_initializer_file
    create_file "app/javascript/routes.js", JsRoutes.generate
  end
end

And use your own path/options. This way you don't need to remember options to pass to rake js:routes.

[hadees]

@gtarsia but you still have to use Sprockets correct? There seems like you shouldn't need it though.

[gtarsia]

@hadees this is to use webpacker instead of sprockets.

I used app/javascript in my generator as the path for the routes.js file. You import this file from a webpacker pack.

Also, remember that if you replace sprockets with webpacker, you should install and import jquery-ujs

[ProGM]

Another option to use js-routes with webpacker is this:

Add rails-erb-loader

yarn add rails-erb-loader

Setup the erb loader

Create a file in config/webpack/loaders/erb.js:

module.exports = {
  test: /\.js\.erb$/,
  enforce: 'pre',
  exclude: /node_modules/,
  use: [{
    loader: 'rails-erb-loader',
    options: {
      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
    }
  }]
}

Then load it in environment.js:

...
const erb =  require('./loaders/erb')
...
environment.loaders.append('erb', erb)

Create a js-routes file:

Go into app/javascripts and create a js-routes.js.erb file, then paste:

<%= JsRoutes.generate() %>

Then you can simply import it as an es6 module, like this:

app/javascripts/packs/application.js

import Routes from '../js-routes.js.erb';

console.log(Routes.your_custom_path)

// If you want you can make it public:
window.Routes = Routes;

Hoping you can find it useful ;)

[paulodeon]

@ProGM your solution works, a couple of points to note:

• You can install the erb loader using bundle exec rails webpacker:install:erb
• You'll need to uncomment the require "sprockets/railtie" line in your application.rb
• You can avoid the .js.erb in the import if you add - .js.erb to extensions in webpacker.yml

[PikachuEXE]

@ProGM
It throws error with message

"export 'default' (imported as 'Routes') was not found in './../../../../assets/javascripts/plugins/js-routes/index.js.erb'

if babel-plugin-transform-runtime is used

I think this is due to generated code not having module.exports

Let me fork and test if adding module.exports would solve this issue

Update 1: My solution

// app/assets/javascripts/plugins/js-routes/index.js.erb
<%# encoding: UTF-8 %>

// Tell webpack to watch these files
// https://github.com/usabilityhub/rails-erb-loader#dependencies
/* rails-erb-loader-dependencies ./../config/routes.rb */

<%= JsRoutes.assert_usable_configuration! && JsRoutes.generate %>

// Exporting as default is required when using `babel-plugin-transform-runtime`
export default this.Routes

[le0pard]

@PikachuEXE code have module.exports, it just do not have default scope, because default is separate key in export/import, not root in module.exports

[ElMassimo]

If you are looking for a solution that plays nicely with Webpacker, you might want to check out js_from_routes.

Although it doesn't come with a default implementation for url interpolation, it's very flexible and you can generate code that uses your own API helpers.

Comparison

For a comparison with this library, check this pull request, which illustrates how it can be customized to provide a nicer API.

[marvinthepa]

@paulodeon

* You'll need to uncomment the `require "sprockets/railtie"` line in your `application.rb`

Sounds like this might not be necessary anymore with #257 fixed (released in v1.4.10).

[stoplion]

I'm also using Webpacker

in application.js added a..
require('js-routes');

getting a..
Module not found: Error: Can't resolve 'js-routes' in

[marvinthepa]

@stoplion there is not file that is generated that is called "js-routes.js". The default path is still app/assets/javascripts/routes.js, see

js-routes/lib/js_routes.rb

Line 15 in b52648a

file: -> { Rails.root.join('app','assets','javascripts','routes.js') },

.

You can change that:

+++ b/config/initializers/js_routes.rb
@@ -0,0 +1,3 @@
+JsRoutes.setup do |config|
+  config.file = "app/javascript/js-routes.js"
+end

but even then, you need require('../js-routes') instead of require('js-routes'). Or you can useimport Routes from '../js-routes' in the files that use the Routes object.

[bogdan]

I made a few patches to make it more compatible with webpacker:

• Default generation file is now at app/javascript/routes.js if app/assets/javascripts doesn't exist
• Added default export key for better es6 experience.

I would be grateful if someone can try to use the gem from master and report of these features are working correctly.

[marvinthepa]

I have not had any issues using

import Routes from '../app/javascript/js-routes'

using 1.4.9, so I do not know why 7c654aa is necessary. But then again, I am far from being an expert on that topic.

[itsNikolay]

Just leave my notes how I migrated from Sprockets to Webpacker, perhaps somebody helps

1. remove/rename assets directory

$ mv app/assets app/deprecated_assets

2. Generate js-routes file with (every time when you update routes.rb file)

$ rails js:routes

3. Make sure it created app/javascript/routes.js

4. Add trinspiler to import routes.js file

$ yarn add @babel/plugin-transform-modules-umd

5. ./babel.config.js

    plugins: [
      require('@babel/plugin-transform-modules-umd'), // to import `JsRoutes.generate!` file
    ]
  }
}

6. ./app/javascript/packs/application.js

import Routes from 'routes'
// backward compatibility
window.Routes = document.Routes = Routes

7. Enjoy! 👍

[bogdan]

@itsNikolay can you explain why you would need @babel/plugin-transform-modules-umd to make it work? Can you try version 1.4.12 (currently latest) and see if it works without it?

[sec0ndhand]

@bogdan I know I'm not @itsNikolay, but I was having the same problem. I upgraded my package from 1.4.9 to 1.4.13 and it broke my app. I was using the asset pipeline, but decided to make the jump and start using Webpacker for js-routes since we already have react in our project, and are using Webpacker already.

I followed the set up in the readme that explains using app/javascript/routes.js.erb and I was getting this error in the browser:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Once I added @babel/plugin-transform-modules-umd the error went away. A UMD bundle, though making your shipped JS larger, allows it to be imported across browsers, nodejs, commonjs among others. Anyway, maybe a consideration would be to ship jsroutes with an option to create a UMD bundle instead, which would eliminate the need for the babel plugin. Thanks for all your hard work, it really helps those of us that know rails, but need to code in JS!

[bogdan]

@sec0ndhand I did what I could in v1.4.14. It is hard to make it work for all environments- js is such a mess. Can you try that and see if it works without @babel/plugin-transform-modules-umd?

[sec0ndhand]

Sorry it took so long @bogdan. I have tried this, and this did not work once I removed @babel/plugin-transform-modules-umd.

[bogdan]

I've released v2.0 with complete support of ESM modules and webpacker. Webpacker setup is now in the readme. Please upgrade and open another issue if there are still problems.

[bogdan]

@le0pard it would be helpful if you could try upgrade guide https://github.com/railsware/js-routes/blob/master/VERSION_2_UPGRADE.md for any of your projects.

[le0pard]

@bogdan thanks. Will try later and will provide feedback (in PR or just as comment)

[le0pard]

@bogdan I did test on small project - all works. Currently I did not found project, which using js-routes in our company - all migrated to hardcoded values in JS :)