Search code examples
ruby-on-rails-5requirenode-modulesyarnpkg

Rails v5.1.4 Yarn node_modules //= require not working


I am simply attempting to require in some javascript node modules that I installed through yarn. My impression, and it has worked for some others is you do //= require [package_name] in application.js.

The minified dist file is the same name as the package name.

The tree structure of the module is:

clipboard
  dist
    clipboard.js  
    clipboard.min.js
  composer.json
  contributing.md
  package.js
  package.json
  readme.md
  webpack.config.js

I am not using webpack. I get this error:

Sprockets::FileNotFound in PaperWallets#template

couldn't find file 'clipboard' with type 'application/javascript'
Checked in these paths: 
  /home/me/Desktop/Rails/paperwallet/app/assets/config
  /home/me/Desktop/Rails/paperwallet/app/assets/images
  /home/me/Desktop/Rails/paperwallet/app/assets/javascripts
  /home/me/Desktop/Rails/paperwallet/app/assets/stylesheets
  /home/me/.rvm/gems/ruby-2.4.1/gems/coffee-rails-4.2.2/lib/assets/javascripts
  /home/me/.rvm/gems/ruby-2.4.1/gems/jquery-rails-4.3.1/vendor/assets/javascripts
  /home/me/.rvm/gems/ruby-2.4.1/gems/actioncable-5.1.4/lib/assets/compiled
  /home/me/.rvm/gems/ruby-2.4.1/gems/actionview-5.1.4/lib/assets/compiled
  /home/me/.rvm/gems/ruby-2.4.1/gems/turbolinks-source-5.0.3/lib/assets/javascripts
  /home/me/Desktop/Rails/paperwallet/node_modules
  /home/me/.rvm/gems/ruby-2.4.1/gems/bootstrap-sass-3.3.7/assets/stylesheets
  /home/me/.rvm/gems/ruby-2.4.1/gems/bootstrap-sass-3.3.7/assets/javascripts
  /home/me/.rvm/gems/ruby-2.4.1/gems/bootstrap-sass-3.3.7/assets/fonts
  /home/me/.rvm/gems/ruby-2.4.1/gems/bootstrap-sass-3.3.7/assets/images

Extracted source (around line #17):
15: //= require jssha
16: //= require wallet-address-validator
17: //= require clipboard
18: //= require bootstrap-sprockets
19: //= require turbolinks
20: //= require_tree .

What am I doing wrong? It has the same tree structure as wallet-address-validator but I can't require it in?


Solution

  • For the future.

    Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives)

    Which is in the application.js file commented out talks about how it loads paths from their logical path. So it is looking for the file directly off of one of those paths it goes to look in.In my case the node_modules folder.

    However it is not directly off of the node_modules folder it is in the clipboard/dist folder within node_modules.

    The answer is //= require clipboard/dist/clipboard

    I am not certain why //= require wallet-address-validator works because it has the same wallet-address-validator folder within node_modules then /dist/wallet-address-validator.min.js

    If anyone knows I would love to find out!