Sage 9 resolve alias

sage
1

I Was using sage 9.0.0 and have updated to 9.0.0-alpha.3 I’m working through updating the work I’d done and am running into an issue - previously I had added

  resolve: {
    alias:{
      'masonry': path.resolve('node_modules','masonry-layout'),
      'isotope': path.resolve('node_modules', 'isotope-layout'),
      'TweenLite': path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
      'TweenMax': path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
      'TimelineLite': path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
      'TimelineMax': path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
      'ScrollMagic': path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
      'animation.gsap': path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
      'debug.addIndicators': path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
    }
  },```

to my webpack config to deal with the peculiarities of those packages (scrollmagic, GSAP, and Isotope) in the latest release I tried to re implement the same, but I get  ```Unable to resolve path to module 'ScrollMagic'``` etc. when trying to require them with the latest sage. Can anyone help out as to why this method has stopped working and what I can do to get it working nicely again. Thanks!
2

I did a bit of digging and the solution here is to specify a root:

resolve: {
root: path.resolve(’./node_modules’),
alias: { …

I’m posting this here as it is a simple way of working with certain commonly used packages such as Isotope - Webpack problem · Issue #979 · metafizzy/isotope · GitHub

As well as others such as Scroll magic and Greensock. Taking greesnsock (GSAP) as an example, the reason to use it is:

in package json the module is saved as: “gsap”: “^1.19.0”

but you typically want to use one of the packages from within that module - in this-case TweenLite, TweenMax, Timeline Max etc.

These are not referenced by the main property of the modules package.json. So we need to tell webpack to create an alias for them, which resolves to a more ‘bespoke’ path:

resolve: {
root: path.resolve('./node_modules'),
alias: {
    'TweenLite': path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
    'TweenMax': path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
    'TimelineLite': path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
    'TimelineMax': path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js')
    }
}

and then in the routes eg. Common.js you can use that alias to resolve the file:

const TimelineMax = require('TimelineMax');

eslint may throw an error -

'TimelineMax' should be listed in the project's dependencies. Run 'npm i -S TimelineMax' to add it

but that is the whole reason for doing this: TimelineMax is listed in the project dependencies, but it is within ‘gsap’ so I just disable it around those includes:

/* eslint-disable */
const TimelineMax = require('TimelineMax');
/* eslint-enable */

I hope that helps someone working with one of these packages.

5 Likes
3

Thanks, I’m using 9.0.0-alpha.4. How would I adapt your aliasing to this newer webapack.config configuration?

resolve: {
modules: [
  config.paths.assets,
  'node_modules',
  'bower_components',
],
enforceExtension: false,
},
4

I’m not 100% but I think you could keep it pretty much as is:

resolve: {
root: path.resolve('./node_modules'),
alias: {
    'jwPlayer': path.resolve('./node_modules', '@bianjp/jwplayer/dist/jwplayer.js')
},
modules: [
  config.paths.assets,
  'node_modules',
  'bower_components',
],
enforceExtension: false,
},

I’ve not tried it though, so suck it and see!

5

This worked for me. Thanks. Would be nice to see the official docs updated with this info.