webpacker: Nested dependancies not loaded
When loading a dependancy that’s external you prefix it with a tilde e.g. @import "~external-package/external-file";
However if that external package also has external dependancies you will get Module build failed errors when compiling the pack.
To fix this you have to manually go into the package and prefix all additional dependancies with the tilde so that they can be found and imported… which is obviously not a solution.
For example I might have: @import "~@material/typography/mdc-typography";
And then I’ve had to go into node_modules/@material/typography/_mixins.scss
and do this:
@import "~@material/feature-targeting/functions";
@import "~@material/feature-targeting/mixins";
Apparently this was an issue with the sass-loader and scoped modules/dependancies: https://github.com/material-components/material-components-web/issues/981 and https://github.com/webpack-contrib/sass-loader/issues/466
They mention in the ticket to add includePaths to sass-loader to load the modules:
{
loader: "sass-loader", // compiles Sass to CSS
options: {
includePaths: [
join(dirname(module.filename), 'node_modules')
]
}
}
which in Webpacker I’m assuming is the same as adding resolved_paths: ['node_modules']
to webpacker.yml
so that Webpacker knows where to look…
But this does not fix the issue without doing the manual hack job above to prefix everything…
Does Webpacker have a solution for this?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 26 (10 by maintainers)
@jakeNiemiec it worked, my bad there, thanks!
I still find it amusing how using an npm-distributed component is an edge-case though 😄
@jakeNiemiec How is this related to tree-shaking? I think that @iamdriz correctly identified the issue of webpacker not being configured correctly to allow loading nested modules.
At any rate - your solution does not work as well:
yields
And yes, the file is there:
Above I saw:
"includePaths": ["/app/config/webpack/node_modules"]
, I don’t think that is right.The path is relative to where your run
webpack
, it should be:includePaths: ["./node_modules"]
orincludePaths: ["node_modules"]
If none of that works, you could use a dist/pre-compiled version of the @material repo into your source. Not pretty, but I suspect that webpacker is just not up for this edge case.
Edit: Seems like most frameworks need custom directions to use this lib. A PR might be needed to deal with this in a way like: https://github.com/material-components/material-components-web-react/blob/master/README.md#step-3-using-sass.
05/07/19 edit: @aried3r Nice spread finesse.
@jakeNiemiec yeah, still doesn’t work lol
yield
Hey, thanks for your work, I was facing the exact same issue.
This is a bit more involved, but doesn’t hardcode
use[3]
. Maybe there’s a cleaner version as well.I’m probably being a pain in the ass but people making those moudules are not making it any easier to use them.
I just ran into this today. Is there any solution apart from monkeypatching the packages?