CODEWITHSUNDEEP
ruby-on-railsyarnpkgwebpacker
Rich
Rich

Reputation: 620

How to Import node_modules with Webpacker

I'm new to the whole JS/webpacker game and am failing to understand how to import and use a javascript package using webpacker.

I am trying to include and use the Animate On Scroll Library.

I have Webpacker installed and working (I know it's working because I am able to happily use StimulusJs).

Here's what my /javascript/packs/application.js file looks like:

import {
  Application
} from "stimulus"
import {
  definitionsFromContext
} from "stimulus/webpack-helpers"
import {
  trix
} from "trix"
import AOS from "aos"

const application = Application.start()
const context = require.context("controllers", true, /.js$/)
application.load(definitionsFromContext(context))
AOS.init();

I have my javascript_pack_tag included on my application.html.erb as <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>

I imported the required css files using my /assets/css/application.scss with @import 'aos/dist/aos'; so that shouldn't be the issue.

When I try and use the AOS package by doing something like <h1 class="text-center" data-aos="fade-in">This is a header.</h1> nothing happens. What am I missing?

Thanks.

Upvotes: 2

Views: 2850

Answers (1)

Hari Honor
Hari Honor

Reputation: 8914

Upon reading this again I guess it's more a JS issue you are encountering. I'll leave my points about the CSS below in case useful. See the fourth point about webpack-dev-server if you aren't using it already. Does your browser support defer? You could try moving the scripts to right before </body> to see. I'd probably just cut-to-the-chase and set a javascript breakpoint in AOS.init() and see what's happening.

A few points I've leaned recently to help better understand webpacker/css/sprockets...

First, the CSS in the assets folder is outside of webpack. It's sprockets. That's not a problem but often mixing the two presents challenges.

At the very least you'll need a stylesheet_link_tag 'application'... in addition to the pack tags.

Second, is AOS added via yarn or is it a gem? Gems with webpack can be a bit tricky. I and others I encountered gave up trying to use gem assets in webpack. Best to stick to yarn/npm modules for webpack. Otherwise, move all the assets into the sprockets pipeline (ie in the assets/ folder) and use that for this portion of your site. (it's ok to mix them, just keep them separate).

Third, if the AOS module is added via yarn add ... (ie it resides in the nodule_modules directory) then try replacing the CSS import to just

@import '~aos';

This works because node_modules is in the search path and if the plugin folder has a package.json manifest and it includes a "style" entry, it pulls the css file path from there.

Third, you can try moving the CSS to webpack. Try this...

  1. Make an application.scss file in your components subfolder
  2. Add to your packs/application.js file: import '../components/application.scss
  3. Add a stylesheet_pack_tag 'application' .... to your layout
  4. Put your css imports (from node modules) in your new application.scss

Fourth: Use bin/webpack-dev-server. This compiles webpack on the fly whenever any of your source files changes instead of on every page load (saves you a lot time). Since your CSS is now under webpack, it will give you errors if the import isn't right (though sprockets should do this too in your server logs).

Good luck! It gets easier and yarn/webpack is cool, better than the old ruby-gems-for-front-end-components, IMO

Upvotes: 1

Related Questions