How to load packages installed by `bundle` in webpack?

Question

In a Ruby on Rails application, how can we require or import a package which was not installed via npm or yarn, but via bundle?

I tried:

//= require package-name

But that doesn't seem to work with webpacker.

require("package-name") doesn't work either (because it is not found in node_modules).

@brk Ruby's Bundler. It's a package manager (`Bundler version 1.16.0`). — Ionică Bizău, Dec 06 '17 at 06:54
If you are using the default Rails pipeline (Sprockets) to load files, you should change Rails.application.config.assets.paths as answered bellow. — Pedro Gabriel Lima, Dec 11 '17 at 18:32
The pipeline from the gem Webpacker works similar to how Sprockets do. The pipeline is configured to pre processor the files inside app/javascript. The pipeline compiles some specifics format, as .js, .css, etc. You can find a file in your app's configuration where you can select a folder to be part of the pipeline asset. That is basically that. Unless your "package" has a different format from the ones processed by webpacker pipeline, it should good to go as any other normal file, just put it in the correct folder. In Webpacker wiki you can find descriptions about add folders to the asset. — Pedro Gabriel Lima, Dec 12 '17 at 12:34

score 1 · Accepted Answer · answered Dec 06 '17 at 08:02

For normal Rails environment, you can use normal directory path if you want to require some files.

Suppose your assets folder looks like this

├── application.js
└── something.js

and you want to require something.js then you just need to write

//= require ./something.js

to your application.js

For a package that you manually place somewhere, then you have to add the place of packages to Rails.application.config.assets.paths

If you are using Rails v5, you can check the config/initializers/assets.rb to see the magic of loading node_modules happened

score 0 · Answer 2 · answered Dec 06 '17 at 07:50

I have no webpack experience and no solution for your problem.

what about this

https://webpack.js.org/loaders/bundle-loader/

as I read in the documentation paths chapter

Paths

By default, Webpacker ships with simple conventions for where the JavaScript app files and compiled webpack bundles will go in your Rails app, but all these options are configurable from config/webpacker.yml file.

The configuration for what webpack is supposed to compile by default rests on the convention that every file in app/javascript/packs/*(default) or whatever path you set for source_entry_path in the webpacker.yml configuration is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside packs directory that you do not want to be an entry file. As a rule of thumb, put all files you want to link in your views inside "packs" directory and keep everything else under app/javascript.

Suppose you want to change the source directory from app/javascript to frontend and output to assets/packs. This is how you would do it:

# config/webpacker.yml
source_path: frontend
source_entry_path: packs

public_output_path: assets/packs # outputs to => public/assets/packs Similarly you can also control and configure webpack-dev-server settings from config/webpacker.yml file:

# config/webpacker.yml
development:
  dev_server:
    host: localhost
    port: 3035

If you have hmr turned to true, then the stylesheet_pack_tag generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the stylesheet_pack_tag will create the appropriate HTML tags.

The asset-pipeline loads the files from the path defined with Rails.application.config.assets.paths

This is the output from my rails console

["/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/config",
 "/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/images",
 "/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/javascripts",
 "/home/fabrizio/Documents/Sublime/Rails/surfcheck/app/assets/stylesheets",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/fonts",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/font-awesome-rails-4.7.0.2/app/assets/stylesheets",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/coffee-rails-4.2.2/lib/assets/javascripts",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actioncable-5.1.4/lib/assets/compiled",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionview-5.1.4/lib/assets/compiled",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts",
 #<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/node_modules>,
 #<Pathname:/home/fabrizio/Documents/Sublime/Rails/surfcheck/vendor>,
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/stylesheets",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/javascripts",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/fonts",
 "/home/fabrizio/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/assets/images"]

When you do a require in your application.js or application.scss, sprockets will use the ruby require statement to search that file in the predefined paths.

In case of a GEM, it will find it in the .rbenv/version/yourversion folder.

My approach to solve this problem would be to include those files from the gem that you need for you front end app in the correct folder, so just visit the repository from the GEM and copy paste those file in the correct location.

I know this is not a solution to your problem, but I just wanted to help you out.

Bye Fabrizio

How to load packages installed by `bundle` in webpack?

2 Answers2

Paths