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?
iamdriz
All 25 comments
I just ran into this today. Is there any solution apart from monkeypatching the packages?
Quintasan
on 3 Apr 2019
👀1
Just import the bits that your SCSS file use, eg:
The above will only work if the imported SCSS does not have sub-@imports
The solution from @iamdriz will slow down your builds. SCSS just can't tree-shake like JS can (yet?) because the styles can't know which classes will be present in the DOM.
jakeNiemiec
on 3 Apr 2019
@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:
@import "~@material/feature-targeting/_functions.scss";
@import "~@material/typography/mdc-typography";
yields
app_1 | @import "@material/feature-targeting/functions";
app_1 | ^
app_1 | File to import not found or unreadable: @material/feature-targeting/functions.
app_1 | in /app/node_modules/@material/typography/_mixins.scss (line 23, column 1)
And yes, the file is there:
â•â”€quintasan@tyria ~/Sauce/polikompas ‹2.6.2› ‹master*›
╰─$ ls -al node_modules/@material/feature-targeting/_functions.scss
-rw-r--r-- 1 quintasan quintasan 6477 kwi 3 14:51 node_modules/@material/feature-targeting/_functions.scss
👀2
👍2
@Quintasan The structure of @material/feature-targeting is very different from bootstrap. It seems like the consensus is to useincludePaths as @iamdriz said. There seems to be a bunch of users having this problem even within the material-components/material-components-web repo. ref ref
How is this related to tree-shaking?
I was referring to how JS will "walk" the dependency tree, resolving all the needed dependencies. As far as I can tell, includePaths breaks certain stacks, so the feature remains opt-in? Sorry for the incorrect info, I was conflating scss-loader with something like imports-loader 😅. (includePaths != "paths to include"` )
jakeNiemiec
on 4 Apr 2019
Oh, I see. That makes some sense but the question still stands - how do we
use the includePaths with webpacker. I tried several approaches, the latest
one using webpack-merge but none of them worked.
czw., 4 kwi 2019, 20:06 użytkownik Jake Niemiec notifications@github.com
napisał:
@Quintasan https://github.com/Quintasan The structure of
@material/feature-targeting is very different from bootstrap. It seems
like the consensus is to useincludePaths as @iamdriz
https://github.com/iamdriz said. There seems to be a bunch of users
having this problem even within the
material-components/material-components-web repo. ref
https://github.com/material-components/material-components-web/issues/3985
ref
https://github.com/material-components/material-components-web/issues/351How is this related to tree-shaking?
I was referring to how JS will "walk" the dependency tree, resolving all
the needed dependencies. As far as I can tell, includePaths breaks
certain stacks, so the feature remains opt-in? Sorry for the incorrect
info, I was conflating scss-loader with something like imports-loader 😅.
(includePaths != "paths to include"` )—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/rails/webpacker/issues/1951#issuecomment-480004069,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGPH_UMbduLGdRaTH_VxD6MQ4PtlTmO6ks5vdj89gaJpZM4bDNFW
.
Quintasan
on 4 Apr 2019
You would need to set the includePaths option to environment.loaders.sass
I have no way to see if this works, so you will need to play around with it. Hopefully, someone like @gauravtiwari can correct me if this is the wrong approach.
// webpack/environment.js
const { environment } = require('@rails/webpacker');
let sass = environment.loaders.get('sass');
sass.options = {
...sass.options, // don't overwrite existing options
includePaths: [
join(dirname(module.filename), 'node_modules')
]
};
environment.loaders.sass = sass;
Adapted from: https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader
jakeNiemiec
on 4 Apr 2019
@jakeNiemiec
Since sass.options inside the sass.options = declaration is invalid syntax I tried the following:
let sass = environment.loaders.get('sass');
options = sass.options
sass.options = {
options,
includePaths: [
path.join(path.dirname(module.filename), 'node_modules')
]
}
environment.loaders.sass = sass;
However this does not work:
app_1 | [Webpacker] Compiling…
app_1 | [Webpacker] Compilation failed:
app_1 | /app/node_modules/webpack/lib/RuleSet.js:276
app_1 | throw new Error(
app_1 | ^
app_1 |
app_1 | Error: options/query provided without loader (use loader + options) in {
app_1 | "test": {},
app_1 | "use": [
app_1 | "/app/node_modules/mini-css-extract-plugin/dist/loader.js",
app_1 | {
app_1 | "loader": "css-loader",
app_1 | "options": {
app_1 | "sourceMap": true,
app_1 | "importLoaders": 2,
app_1 | "localIdentName": "[name]__[local]___[hash:base64:5]",
app_1 | "modules": false
app_1 | }
app_1 | },
app_1 | {
app_1 | "loader": "postcss-loader",
app_1 | "options": {
app_1 | "config": {
app_1 | "path": "/app"
app_1 | },
app_1 | "sourceMap": true
app_1 | }
app_1 | },
app_1 | {
app_1 | "loader": "sass-loader",
app_1 | "options": {
app_1 | "sourceMap": true
app_1 | }
app_1 | }
app_1 | ],
app_1 | "sideEffects": true,
app_1 | "exclude": {},
app_1 | "options": {
app_1 | "options": "undefined",
app_1 | "includePaths": [
app_1 | "/app/config/webpack/node_modules"
app_1 | ]
app_1 | }
app_1 | }
app_1 | at Function.normalizeRule (/app/node_modules/webpack/lib/RuleSet.js:276:10)
app_1 | at rules.map (/app/node_modules/webpack/lib/RuleSet.js:110:20)
app_1 | at Array.map (<anonymous>)
app_1 | at Function.normalizeRules (/app/node_modules/webpack/lib/RuleSet.js:109:17)
app_1 | at new RuleSet (/app/node_modules/webpack/lib/RuleSet.js:104:24)
app_1 | at new NormalModuleFactory (/app/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
app_1 | at Compiler.createNormalModuleFactory (/app/node_modules/webpack/lib/Compiler.js:586:31)
app_1 | at Compiler.newCompilationParams (/app/node_modules/webpack/lib/Compiler.js:603:30)
app_1 | at Compiler.compile (/app/node_modules/webpack/lib/Compiler.js:611:23)
app_1 | at readRecords.err (/app/node_modules/webpack/lib/Compiler.js:284:11)
app_1 | at Compiler.readRecords (/app/node_modules/webpack/lib/Compiler.js:479:11)
app_1 | at hooks.run.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:281:10)
app_1 | at _err0 (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
app_1 | at compiler.hooks.run.tapAsync (/app/node_modules/webpack/lib/CachePlugin.js:52:13)
app_1 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
app_1 | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
app_1 | at hooks.beforeRun.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:278:19)
app_1 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
app_1 | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
app_1 | at Compiler.run (/app/node_modules/webpack/lib/Compiler.js:275:24)
app_1 | at processOptions (/app/node_modules/webpack-cli/bin/cli.js:492:14)
app_1 | at yargs.parse (/app/node_modules/webpack-cli/bin/cli.js:503:3)
app_1 | at Object.parse (/app/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
app_1 | at /app/node_modules/webpack-cli/bin/cli.js:206:8
app_1 | at Object.<anonymous> (/app/node_modules/webpack-cli/bin/cli.js:505:3)
app_1 | at Module._compile (internal/modules/cjs/loader.js:689:30)
app_1 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
app_1 | at Module.load (internal/modules/cjs/loader.js:599:32)
app_1 | at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
app_1 | at Function.Module._load (internal/modules/cjs/loader.js:530:3)
Can we get some input from the Rails team on this?
Quintasan
on 10 Apr 2019
@gauravtiwari ping
Quintasan
on 17 Apr 2019
Your structure is wrong:
Since sass.options inside the sass.options = declaration is invalid syntax
...sass.options, // don't overwrite existing options makes use of the spread syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
Plainly: you don't want sass.options.options, you need to spread the options object properties so you don't get nesting.
jakeNiemiec
on 17 Apr 2019
@jakeNiemiec
This is the best I could come up with was:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const path = require('path')
console.log("----------------------BEFORE")
console.log(environment.loaders.get('sass'))
console.log(environment.loaders.get("sass").use[3].loader)
console.log(environment.loaders.get("sass").use[3].options)
console.log("----------------------BEFORE")
environment.loaders.get("sass").use[3].options["includePaths"] = [
path.join(path.dirname(module.filename), 'node_modules'),
path.join(path.dirname(module.filename), '..', 'node_modules')
]
console.log("----------------------AFTER")
console.log(environment.loaders.get('sass'))
console.log(environment.loaders.get("sass").use[3].loader)
console.log(environment.loaders.get("sass").use[3].options)
console.log("----------------------AFTER")
module.exports = environment
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
})
)
output:
app_1 | Started GET "/admin/law_proposals" for 172.19.0.1 at 2019-04-18 18:04:15 +0000
app_1 | Processing by Admin::LawProposalsController#index as HTML
app_1 | Rendering admin/law_proposals/index.html.haml within layouts/application
app_1 | LawProposal Load (0.6ms) SELECT "law_proposals".* FROM "law_proposals"
app_1 | ↳ app/views/admin/law_proposals/index.html.haml:18
app_1 | Query Trace:
app_1 | app/views/admin/law_proposals/index.html.haml:18:in `_app_views_admin_law_proposals_index_html_haml___921799541927736900_47096048959000'
app_1 | ↳ app/views/admin/law_proposals/index.html.haml:18
app_1 | Rendered admin/law_proposals/index.html.haml within layouts/application (10.7ms)
app_1 | [Webpacker] Compiling…
app_1 | [Webpacker] Compilation failed:
app_1 |
app_1 | ----------------------BEFORE
app_1 | { test: /\.(scss|sass)$/i,
app_1 | use:
app_1 | [ '/app/node_modules/mini-css-extract-plugin/dist/loader.js',
app_1 | { loader: 'css-loader', options: [Object] },
app_1 | { loader: 'postcss-loader', options: [Object] },
app_1 | { loader: 'sass-loader', options: [Object] } ],
app_1 | sideEffects: true,
app_1 | exclude: /\.module\.[a-z]+$/ }
app_1 | sass-loader
app_1 | { sourceMap: true }
app_1 | ----------------------BEFORE
app_1 | ----------------------AFTER
app_1 | { test: /\.(scss|sass)$/i,
app_1 | use:
app_1 | [ '/app/node_modules/mini-css-extract-plugin/dist/loader.js',
app_1 | { loader: 'css-loader', options: [Object] },
app_1 | { loader: 'postcss-loader', options: [Object] },
app_1 | { loader: 'sass-loader', options: [Object] } ],
app_1 | sideEffects: true,
app_1 | exclude: /\.module\.[a-z]+$/ }
app_1 | sass-loader
app_1 | { sourceMap: true,
app_1 | includePaths:
app_1 | [ '/app/config/webpack/node_modules',
app_1 | '/app/config/node_modules' ] }
app_1 | ----------------------AFTER
app_1 | Hash: 6b7a65d4a5d05365170b
app_1 | Version: webpack 4.29.6
app_1 | Time: 1646ms
app_1 | Built at: 04/18/2019 6:04:19 PM
app_1 | Asset Size Chunks Chunk Names
app_1 | js/application-b1d30b46897359a051be.js 97.9 KiB application [emitted] application
app_1 | js/application-b1d30b46897359a051be.js.map 81.2 KiB application [emitted] application
app_1 | js/stylesheets-e5228ab453b47e372b4b.js 4.82 KiB stylesheets [emitted] stylesheets
app_1 | js/stylesheets-e5228ab453b47e372b4b.js.map 3.53 KiB stylesheets [emitted] stylesheets
app_1 | manifest.json 703 bytes [emitted]
app_1 | Entrypoint application = js/application-b1d30b46897359a051be.js js/application-b1d30b46897359a051be.js.map
app_1 | Entrypoint stylesheets = js/stylesheets-e5228ab453b47e372b4b.js js/stylesheets-e5228ab453b47e372b4b.js.map
app_1 | [./app/webpack/controllers sync recursive _controller\.js$] ./app/webpack/controllers sync _controller\.js$ 216 bytes {application} [built]
app_1 | [./app/webpack/controllers/clipboard_controller.js] 2.48 KiB {application} [optional] [built]
app_1 | [./app/webpack/controllers/hello_controller.js] 2.54 KiB {application} [optional] [built]
app_1 | [./app/webpack/controllers/index.js] 396 bytes {application} [built]
app_1 | [./app/webpack/packs/application.js] 47 bytes {application} [built]
app_1 | [./app/webpack/packs/stylesheets.scss] 949 bytes {stylesheets} [built] [failed] [1 error]
app_1 | + 32 hidden modules
app_1 |
app_1 | ERROR in ./app/webpack/packs/stylesheets.scss
app_1 | Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
app_1 | ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
app_1 |
app_1 | @import "@material/feature-targeting/functions";
app_1 | ^
app_1 | File to import not found or unreadable: @material/feature-targeting/functions.
app_1 | in /app/node_modules/@material/typography/_mixins.scss (line 23, column 1)
app_1 | at runLoaders (/app/node_modules/webpack/lib/NormalModule.js:301:20)
app_1 | at /app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
app_1 | at /app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
app_1 | at context.callback (/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
app_1 | at Object.render [as callback] (/app/node_modules/sass-loader/lib/loader.js:52:13)
app_1 | at Object.done [as callback] (/app/node_modules/neo-async/async.js:8077:18)
app_1 | at options.error (/app/node_modules/node-sass/lib/index.js:294:32)
app_1 | Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/lib/loader.js??ref--7-3!app/webpack/packs/stylesheets.scss:
app_1 | Entrypoint mini-css-extract-plugin = *
app_1 | [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./app/webpack/packs/stylesheets.scss] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpack/packs/stylesheets.scss 313 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
app_1 |
app_1 | ERROR in ./app/webpack/packs/stylesheets.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpack/packs/stylesheets.scss)
app_1 | Module build failed (from ./node_modules/sass-loader/lib/loader.js):
app_1 |
app_1 | @import "@material/feature-targeting/functions";
app_1 | ^
app_1 | File to import not found or unreadable: @material/feature-targeting/functions.
app_1 | in /app/node_modules/@material/typography/_mixins.scss (line 23, column 1)
app_1 |
app_1 | [Webpacker] Compiling…
app_1 | [Webpacker] Compilation failed:
app_1 |
app_1 | ----------------------BEFORE
app_1 | { test: /\.(scss|sass)$/i,
app_1 | use:
app_1 | [ '/app/node_modules/mini-css-extract-plugin/dist/loader.js',
app_1 | { loader: 'css-loader', options: [Object] },
app_1 | { loader: 'postcss-loader', options: [Object] },
app_1 | { loader: 'sass-loader', options: [Object] } ],
app_1 | sideEffects: true,
app_1 | exclude: /\.module\.[a-z]+$/ }
app_1 | sass-loader
app_1 | { sourceMap: true }
app_1 | ----------------------BEFORE
app_1 | ----------------------AFTER
app_1 | { test: /\.(scss|sass)$/i,
app_1 | use:
app_1 | [ '/app/node_modules/mini-css-extract-plugin/dist/loader.js',
app_1 | { loader: 'css-loader', options: [Object] },
app_1 | { loader: 'postcss-loader', options: [Object] },
app_1 | { loader: 'sass-loader', options: [Object] } ],
app_1 | sideEffects: true,
app_1 | exclude: /\.module\.[a-z]+$/ }
app_1 | sass-loader
app_1 | { sourceMap: true,
app_1 | includePaths:
app_1 | [ '/app/config/webpack/node_modules',
app_1 | '/app/config/node_modules' ] }
app_1 | ----------------------AFTER
app_1 | Hash: 6b7a65d4a5d05365170b
app_1 | Version: webpack 4.29.6
app_1 | Time: 1506ms
app_1 | Built at: 04/18/2019 6:04:22 PM
app_1 | Asset Size Chunks Chunk Names
app_1 | js/application-b1d30b46897359a051be.js 97.9 KiB application [emitted] application
app_1 | js/application-b1d30b46897359a051be.js.map 81.2 KiB application [emitted] application
app_1 | js/stylesheets-e5228ab453b47e372b4b.js 4.82 KiB stylesheets [emitted] stylesheets
app_1 | js/stylesheets-e5228ab453b47e372b4b.js.map 3.53 KiB stylesheets [emitted] stylesheets
app_1 | manifest.json 703 bytes [emitted]
app_1 | Entrypoint application = js/application-b1d30b46897359a051be.js js/application-b1d30b46897359a051be.js.map
app_1 | Entrypoint stylesheets = js/stylesheets-e5228ab453b47e372b4b.js js/stylesheets-e5228ab453b47e372b4b.js.map
app_1 | [./app/webpack/controllers sync recursive _controller\.js$] ./app/webpack/controllers sync _controller\.js$ 216 bytes {application} [built]
app_1 | [./app/webpack/controllers/clipboard_controller.js] 2.48 KiB {application} [optional] [built]
app_1 | [./app/webpack/controllers/hello_controller.js] 2.54 KiB {application} [optional] [built]
app_1 | [./app/webpack/controllers/index.js] 396 bytes {application} [built]
app_1 | [./app/webpack/packs/application.js] 47 bytes {application} [built]
app_1 | [./app/webpack/packs/stylesheets.scss] 949 bytes {stylesheets} [built] [failed] [1 error]
app_1 | + 32 hidden modules
app_1 |
app_1 | ERROR in ./app/webpack/packs/stylesheets.scss
app_1 | Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
app_1 | ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
app_1 |
app_1 | @import "@material/feature-targeting/functions";
app_1 | ^
app_1 | File to import not found or unreadable: @material/feature-targeting/functions.
app_1 | in /app/node_modules/@material/typography/_mixins.scss (line 23, column 1)
app_1 | at runLoaders (/app/node_modules/webpack/lib/NormalModule.js:301:20)
app_1 | at /app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
app_1 | at /app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
app_1 | at context.callback (/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
app_1 | at Object.render [as callback] (/app/node_modules/sass-loader/lib/loader.js:52:13)
app_1 | at Object.done [as callback] (/app/node_modules/neo-async/async.js:8077:18)
app_1 | at options.error (/app/node_modules/node-sass/lib/index.js:294:32)
app_1 | Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/lib/loader.js??ref--7-3!app/webpack/packs/stylesheets.scss:
app_1 | Entrypoint mini-css-extract-plugin = *
app_1 | [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./app/webpack/packs/stylesheets.scss] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpack/packs/stylesheets.scss 313 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
app_1 |
app_1 | ERROR in ./app/webpack/packs/stylesheets.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpack/packs/stylesheets.scss)
app_1 | Module build failed (from ./node_modules/sass-loader/lib/loader.js):
app_1 |
app_1 | @import "@material/feature-targeting/functions";
app_1 | ^
app_1 | File to import not found or unreadable: @material/feature-targeting/functions.
app_1 | in /app/node_modules/@material/typography/_mixins.scss (line 23, column 1)
app_1 |
app_1 | Completed 500 Internal Server Error in 7585ms (ActiveRecord: 0.6ms)
app_1 |
app_1 |
app_1 |
app_1 | Webpacker::Manifest::MissingEntryError - Webpacker can't find stylesheets in /app/public/packs/manifest.json. Possible causes:
app_1 | 1. You want to set webpacker.yml value of compile to true for your environment
app_1 | unless you are using the `webpack -w` or the webpack-dev-server.
app_1 | 2. webpack has not yet re-run to reflect updates.
app_1 | 3. You have misconfigured Webpacker's config/webpacker.yml file.
app_1 | 4. Your webpack configuration is not creating a manifest.
app_1 | Your manifest contains:
app_1 | {
app_1 | "application.js": "/packs/js/application-b1d30b46897359a051be.js",
app_1 | "application.js.map": "/packs/js/application-b1d30b46897359a051be.js.map",
app_1 | "entrypoints": {
app_1 | "application": {
app_1 | "js": [
app_1 | "/packs/js/application-b1d30b46897359a051be.js"
app_1 | ],
app_1 | "js.map": [
app_1 | "/packs/js/application-b1d30b46897359a051be.js.map"
app_1 | ]
app_1 | },
app_1 | "stylesheets": {
app_1 | "js": [
app_1 | "/packs/js/stylesheets-e5228ab453b47e372b4b.js"
app_1 | ],
app_1 | "js.map": [
app_1 | "/packs/js/stylesheets-e5228ab453b47e372b4b.js.map"
app_1 | ]
app_1 | }
app_1 | },
app_1 | "stylesheets.js": "/packs/js/stylesheets-e5228ab453b47e372b4b.js",
app_1 | "stylesheets.js.map": "/packs/js/stylesheets-e5228ab453b47e372b4b.js.map"
app_1 | }
app_1 | :
app_1 | app/views/layouts/application.html.haml:10:in `_app_views_layouts_application_html_haml___2653262680338665170_47096048969700'
@jakeNiemiec If I try applying your version with small fixes ie.
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const path = require('path')
let sass = environment.loaders.get('sass');
sass.options = {
...sass.options, // don't overwrite existing options
includePaths: [
path.join(path.dirname(module.filename), 'node_modules')
]
};
environment.loaders.sass = sass;
module.exports = environment
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
})
)
I get:
app_1 | Started GET "/admin/law_proposals" for 172.19.0.1 at 2019-04-18 18:08:02 +0000
app_1 | (0.6ms) SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
app_1 | ↳ /gems/gems/activerecord-5.2.3/lib/active_record/log_subscriber.rb:98
app_1 | Processing by Admin::LawProposalsController#index as HTML
app_1 | Rendering admin/law_proposals/index.html.haml within layouts/application
app_1 | LawProposal Load (1.1ms) SELECT "law_proposals".* FROM "law_proposals"
app_1 | ↳ app/views/admin/law_proposals/index.html.haml:18
app_1 | Query Trace:
app_1 | app/views/admin/law_proposals/index.html.haml:18:in `_app_views_admin_law_proposals_index_html_haml__2729042247272436623_47185552244340'
app_1 | ↳ app/views/admin/law_proposals/index.html.haml:18
app_1 | Rendered admin/law_proposals/index.html.haml within layouts/application (22.7ms)
app_1 | [Webpacker] Compiling…
app_1 | [Webpacker] Compilation failed:
app_1 | /app/node_modules/webpack/lib/RuleSet.js:276
app_1 | throw new Error(
app_1 | ^
app_1 |
app_1 | Error: options/query provided without loader (use loader + options) in {
app_1 | "test": {},
app_1 | "use": [
app_1 | "/app/node_modules/mini-css-extract-plugin/dist/loader.js",
app_1 | {
app_1 | "loader": "css-loader",
app_1 | "options": {
app_1 | "sourceMap": true,
app_1 | "importLoaders": 2,
app_1 | "localIdentName": "[name]__[local]___[hash:base64:5]",
app_1 | "modules": false
app_1 | }
app_1 | },
app_1 | {
app_1 | "loader": "postcss-loader",
app_1 | "options": {
app_1 | "config": {
app_1 | "path": "/app"
app_1 | },
app_1 | "sourceMap": true
app_1 | }
app_1 | },
app_1 | {
app_1 | "loader": "sass-loader",
app_1 | "options": {
app_1 | "sourceMap": true
app_1 | }
app_1 | }
app_1 | ],
app_1 | "sideEffects": true,
app_1 | "exclude": {},
app_1 | "options": {
app_1 | "includePaths": [
app_1 | "/app/config/webpack/node_modules"
app_1 | ]
app_1 | }
app_1 | }
app_1 | at Function.normalizeRule (/app/node_modules/webpack/lib/RuleSet.js:276:10)
app_1 | at rules.map (/app/node_modules/webpack/lib/RuleSet.js:110:20)
app_1 | at Array.map (<anonymous>)
app_1 | at Function.normalizeRules (/app/node_modules/webpack/lib/RuleSet.js:109:17)
app_1 | at new RuleSet (/app/node_modules/webpack/lib/RuleSet.js:104:24)
app_1 | at new NormalModuleFactory (/app/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
app_1 | at Compiler.createNormalModuleFactory (/app/node_modules/webpack/lib/Compiler.js:586:31)
app_1 | at Compiler.newCompilationParams (/app/node_modules/webpack/lib/Compiler.js:603:30)
app_1 | at Compiler.compile (/app/node_modules/webpack/lib/Compiler.js:611:23)
app_1 | at readRecords.err (/app/node_modules/webpack/lib/Compiler.js:284:11)
app_1 | at Compiler.readRecords (/app/node_modules/webpack/lib/Compiler.js:479:11)
app_1 | at hooks.run.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:281:10)
app_1 | at _err0 (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
app_1 | at compiler.hooks.run.tapAsync (/app/node_modules/webpack/lib/CachePlugin.js:52:13)
app_1 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
app_1 | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
app_1 | at hooks.beforeRun.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:278:19)
app_1 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
app_1 | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
app_1 | at Compiler.run (/app/node_modules/webpack/lib/Compiler.js:275:24)
app_1 | at processOptions (/app/node_modules/webpack-cli/bin/cli.js:492:14)
app_1 | at yargs.parse (/app/node_modules/webpack-cli/bin/cli.js:503:3)
app_1 | at Object.parse (/app/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
app_1 | at /app/node_modules/webpack-cli/bin/cli.js:206:8
app_1 | at Object.<anonymous> (/app/node_modules/webpack-cli/bin/cli.js:505:3)
app_1 | at Module._compile (internal/modules/cjs/loader.js:689:30)
app_1 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
app_1 | at Module.load (internal/modules/cjs/loader.js:599:32)
app_1 | at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
app_1 | at Function.Module._load (internal/modules/cjs/loader.js:530:3)
app_1 |
app_1 |
app_1 | [Webpacker] Compiling…
app_1 | [Webpacker] Compilation failed:
app_1 | /app/node_modules/webpack/lib/RuleSet.js:276
app_1 | throw new Error(
app_1 | ^
app_1 |
app_1 | Error: options/query provided without loader (use loader + options) in {
app_1 | "test": {},
app_1 | "use": [
app_1 | "/app/node_modules/mini-css-extract-plugin/dist/loader.js",
app_1 | {
app_1 | "loader": "css-loader",
app_1 | "options": {
app_1 | "sourceMap": true,
app_1 | "importLoaders": 2,
app_1 | "localIdentName": "[name]__[local]___[hash:base64:5]",
app_1 | "modules": false
app_1 | }
app_1 | },
app_1 | {
app_1 | "loader": "postcss-loader",
app_1 | "options": {
app_1 | "config": {
app_1 | "path": "/app"
app_1 | },
app_1 | "sourceMap": true
app_1 | }
app_1 | },
app_1 | {
app_1 | "loader": "sass-loader",
app_1 | "options": {
app_1 | "sourceMap": true
app_1 | }
app_1 | }
app_1 | ],
app_1 | "sideEffects": true,
app_1 | "exclude": {},
app_1 | "options": {
app_1 | "includePaths": [
app_1 | "/app/config/webpack/node_modules"
app_1 | ]
app_1 | }
app_1 | }
app_1 | at Function.normalizeRule (/app/node_modules/webpack/lib/RuleSet.js:276:10)
app_1 | at rules.map (/app/node_modules/webpack/lib/RuleSet.js:110:20)
app_1 | at Array.map (<anonymous>)
app_1 | at Function.normalizeRules (/app/node_modules/webpack/lib/RuleSet.js:109:17)
app_1 | at new RuleSet (/app/node_modules/webpack/lib/RuleSet.js:104:24)
app_1 | at new NormalModuleFactory (/app/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
app_1 | at Compiler.createNormalModuleFactory (/app/node_modules/webpack/lib/Compiler.js:586:31)
app_1 | at Compiler.newCompilationParams (/app/node_modules/webpack/lib/Compiler.js:603:30)
app_1 | at Compiler.compile (/app/node_modules/webpack/lib/Compiler.js:611:23)
app_1 | at readRecords.err (/app/node_modules/webpack/lib/Compiler.js:284:11)
app_1 | at Compiler.readRecords (/app/node_modules/webpack/lib/Compiler.js:479:11)
app_1 | at hooks.run.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:281:10)
app_1 | at _err0 (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
app_1 | at compiler.hooks.run.tapAsync (/app/node_modules/webpack/lib/CachePlugin.js:52:13)
app_1 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
app_1 | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
app_1 | at hooks.beforeRun.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:278:19)
app_1 | at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
app_1 | at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
app_1 | at Compiler.run (/app/node_modules/webpack/lib/Compiler.js:275:24)
app_1 | at processOptions (/app/node_modules/webpack-cli/bin/cli.js:492:14)
app_1 | at yargs.parse (/app/node_modules/webpack-cli/bin/cli.js:503:3)
app_1 | at Object.parse (/app/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
app_1 | at /app/node_modules/webpack-cli/bin/cli.js:206:8
app_1 | at Object.<anonymous> (/app/node_modules/webpack-cli/bin/cli.js:505:3)
app_1 | at Module._compile (internal/modules/cjs/loader.js:689:30)
app_1 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
app_1 | at Module.load (internal/modules/cjs/loader.js:599:32)
app_1 | at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
app_1 | at Function.Module._load (internal/modules/cjs/loader.js:530:3)
app_1 |
app_1 |
app_1 | Completed 500 Internal Server Error in 4306ms (ActiveRecord: 2.7ms)
app_1 |
app_1 |
app_1 |
app_1 | Webpacker::Manifest::MissingEntryError - Webpacker can't find stylesheets in /app/public/packs/manifest.json. Possible causes:
app_1 | 1. You want to set webpacker.yml value of compile to true for your environment
app_1 | unless you are using the `webpack -w` or the webpack-dev-server.
app_1 | 2. webpack has not yet re-run to reflect updates.
app_1 | 3. You have misconfigured Webpacker's config/webpacker.yml file.
app_1 | 4. Your webpack configuration is not creating a manifest.
app_1 | Your manifest contains:
app_1 | {
app_1 | "application.js": "/packs/js/application-b1d30b46897359a051be.js",
app_1 | "application.js.map": "/packs/js/application-b1d30b46897359a051be.js.map",
app_1 | "entrypoints": {
app_1 | "application": {
app_1 | "js": [
app_1 | "/packs/js/application-b1d30b46897359a051be.js"
app_1 | ],
app_1 | "js.map": [
app_1 | "/packs/js/application-b1d30b46897359a051be.js.map"
app_1 | ]
app_1 | },
app_1 | "stylesheets": {
app_1 | "js": [
app_1 | "/packs/js/stylesheets-e5228ab453b47e372b4b.js"
app_1 | ],
app_1 | "js.map": [
app_1 | "/packs/js/stylesheets-e5228ab453b47e372b4b.js.map"
app_1 | ]
app_1 | }
app_1 | },
app_1 | "stylesheets.js": "/packs/js/stylesheets-e5228ab453b47e372b4b.js",
app_1 | "stylesheets.js.map": "/packs/js/stylesheets-e5228ab453b47e372b4b.js.map"
app_1 | }
app_1 | :
app_1 | app/views/layouts/application.html.haml:10:in `_app_views_layouts_application_html_haml__3581347421049466869_47185552286280'
I'm probably being a pain in the ass but people making those moudules are not making it any easier to use them.
Quintasan
on 18 Apr 2019
👀1
@Quintasan I stopped using webpackER for this very reason. I don't know why we need to programmatically build a config. environment.loaders apparently contains rules not loaders! .use contains the actual array of loaders.
Looking at your error:
All you need is a ~ to indicate that the file is in node_modules and it would probobly work. @import "~@material/feature-targeting/functions";
jakeNiemiec
on 18 Apr 2019
At this point, you could just replace it with exactly what you need:
environment.loaders.get("sass").use[3] = {
loader: "sass-loader",
options: {
sourceMap: true,
includePaths: [
join(dirname(module.filename), 'node_modules')
]
}
}
@jakeNiemiec yeah, still doesn't work lol
# environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const path = require('path')
module.exports = environment
environment.loaders.get("sass").use[3] = {
loader: "sass-loader",
options: {
sourceMap: true,
includePaths: [
path.join(path.dirname(module.filename), 'node_modules')
]
}
}
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
})
)
# app/webpack/packs/stylesheets.scss
@import "~@material/feature-targeting/functions";
@import "~@material/typography/mdc-typography";
@import '~bootstrap/scss/bootstrap';
yield
app_1 | [Webpacker] Compiling…
app_1 | [Webpacker] Compilation failed:
app_1 |
app_1 | Hash: 6b7a65d4a5d05365170b
app_1 | Version: webpack 4.29.6
app_1 | Time: 1386ms
app_1 | Built at: 04/19/2019 12:39:33 PM
app_1 | Asset Size Chunks Chunk Names
app_1 | js/application-b1d30b46897359a051be.js 97.9 KiB application [emitted] application
app_1 | js/application-b1d30b46897359a051be.js.map 81.2 KiB application [emitted] application
app_1 | js/stylesheets-e5228ab453b47e372b4b.js 4.82 KiB stylesheets [emitted] stylesheets
app_1 | js/stylesheets-e5228ab453b47e372b4b.js.map 3.53 KiB stylesheets [emitted] stylesheets
app_1 | manifest.json 703 bytes [emitted]
app_1 | Entrypoint application = js/application-b1d30b46897359a051be.js js/application-b1d30b46897359a051be.js.map
app_1 | Entrypoint stylesheets = js/stylesheets-e5228ab453b47e372b4b.js js/stylesheets-e5228ab453b47e372b4b.js.map
app_1 | [./app/webpack/controllers sync recursive _controller\.js$] ./app/webpack/controllers sync _controller\.js$ 216 bytes {application} [built]
app_1 | [./app/webpack/controllers/clipboard_controller.js] 2.48 KiB {application} [optional] [built]
app_1 | [./app/webpack/controllers/hello_controller.js] 2.54 KiB {application} [optional] [built]
app_1 | [./app/webpack/controllers/index.js] 396 bytes {application} [built]
app_1 | [./app/webpack/packs/application.js] 47 bytes {application} [built]
app_1 | [./app/webpack/packs/stylesheets.scss] 949 bytes {stylesheets} [built] [failed] [1 error]
app_1 | + 32 hidden modules
app_1 |
app_1 | ERROR in ./app/webpack/packs/stylesheets.scss
app_1 | Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
app_1 | ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
app_1 |
app_1 | @import "@material/feature-targeting/functions";
app_1 | ^
app_1 | File to import not found or unreadable: @material/feature-targeting/functions.
app_1 | in /app/node_modules/@material/typography/_mixins.scss (line 23, column 1)
app_1 | at runLoaders (/app/node_modules/webpack/lib/NormalModule.js:301:20)
app_1 | at /app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
app_1 | at /app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
app_1 | at context.callback (/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
app_1 | at Object.render [as callback] (/app/node_modules/sass-loader/lib/loader.js:52:13)
app_1 | at Object.done [as callback] (/app/node_modules/neo-async/async.js:8077:18)
app_1 | at options.error (/app/node_modules/node-sass/lib/index.js:294:32)
app_1 | Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/lib/loader.js??ref--7-3!app/webpack/packs/stylesheets.scss:
app_1 | Entrypoint mini-css-extract-plugin = *
app_1 | [./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./app/webpack/packs/stylesheets.scss] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpack/packs/stylesheets.scss 313 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
app_1 |
app_1 | ERROR in ./app/webpack/packs/stylesheets.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./app/webpack/packs/stylesheets.scss)
app_1 | Module build failed (from ./node_modules/sass-loader/lib/loader.js):
app_1 |
app_1 | @import "@material/feature-targeting/functions";
app_1 | ^
app_1 | File to import not found or unreadable: @material/feature-targeting/functions.
app_1 | in /app/node_modules/@material/typography/_mixins.scss (line 23, column 1)
app_1 |
app_1 | Completed 500 Internal Server Error in 7082ms (ActiveRecord: 0.5ms)
app_1 |
app_1 |
app_1 |
app_1 | Webpacker::Manifest::MissingEntryError - Webpacker can't find stylesheets in /app/public/packs/manifest.json. Possible causes:
app_1 | 1. You want to set webpacker.yml value of compile to true for your environment
app_1 | unless you are using the `webpack -w` or the webpack-dev-server.
app_1 | 2. webpack has not yet re-run to reflect updates.
app_1 | 3. You have misconfigured Webpacker's config/webpacker.yml file.
app_1 | 4. Your webpack configuration is not creating a manifest.
app_1 | Your manifest contains:
app_1 | {
app_1 | "application.js": "/packs/js/application-b1d30b46897359a051be.js",
app_1 | "application.js.map": "/packs/js/application-b1d30b46897359a051be.js.map",
app_1 | "entrypoints": {
app_1 | "application": {
app_1 | "js": [
app_1 | "/packs/js/application-b1d30b46897359a051be.js"
app_1 | ],
app_1 | "js.map": [
app_1 | "/packs/js/application-b1d30b46897359a051be.js.map"
app_1 | ]
app_1 | },
app_1 | "stylesheets": {
app_1 | "js": [
app_1 | "/packs/js/stylesheets-e5228ab453b47e372b4b.js"
app_1 | ],
app_1 | "js.map": [
app_1 | "/packs/js/stylesheets-e5228ab453b47e372b4b.js.map"
app_1 | ]
app_1 | }
app_1 | },
app_1 | "stylesheets.js": "/packs/js/stylesheets-e5228ab453b47e372b4b.js",
app_1 | "stylesheets.js.map": "/packs/js/stylesheets-e5228ab453b47e372b4b.js.map"
app_1 | }
app_1 | :
app_1 | app/views/layouts/application.html.haml:10:in `_app_views_layouts_application_html_haml___4004440967550002970_47332951207380'
👀1
😕1
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"] or includePaths: ["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
on 19 Apr 2019
❤3
@jakeNiemiec it worked, my bad there, thanks!
I still find it amusing how using an npm-distributed component is an edge-case though :D
Quintasan
on 19 Apr 2019
🎉4
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.
const sassLoaderIndex = environment.loaders
.get("sass")
.use.findIndex(el => el.loader === "sass-loader")
let sassLoader = environment.loaders.get("sass").use[sassLoaderIndex]
sassLoader = {
...sassLoader,
options: {
...sassLoader.options,
includePaths: ["./node_modules"],
},
}
environment.loaders.get("sass").use[sassLoaderIndex] = sassLoader
aried3r
on 7 May 2019
🚀1
@aried3r your example does work but I guess it doesn't show the complete file as I don't see neither const { environment } = require('@rails/webpacker') nor module.exports = environment.
I've added to my code to make it work, but it might be best for people coming to this thread to see the complete example. @aried3r Could you please update your code?
Thanks
a-barbieri
on 9 Oct 2019
This works for me:
https://github.com/rails/webpacker/issues/1245#issuecomment-364040877
environment.loaders.get('sass').use.find(item => item.loader === 'sass-loader').options.includePaths = ['node_modules']
daniel-dm
on 6 Dec 2019
The solution for webpacker 5.0.1 should be to just have this in your config/webpacker.yml file, thanks to https://github.com/rails/webpacker/pull/2203.~~
#̶ ̶A̶d̶d̶i̶t̶i̶o̶n̶a̶l̶ ̶p̶a̶t̶h̶s̶ ̶w̶e̶b̶p̶a̶c̶k̶ ̶s̶h̶o̶u̶l̶d̶ ̶l̶o̶o̶k̶u̶p̶ ̶m̶o̶d̶u̶l̶e̶s̶
#̶ ̶[̶'̶a̶p̶p̶/̶a̶s̶s̶e̶t̶s̶'̶,̶ ̶'̶e̶n̶g̶i̶n̶e̶/̶f̶o̶o̶/̶a̶p̶p̶/̶a̶s̶s̶e̶t̶s̶'̶]̶
r̶e̶s̶o̶l̶v̶e̶d̶_̶p̶a̶t̶h̶s̶:̶ ̶[̶'̶.̶/̶n̶o̶d̶e̶_̶m̶o̶d̶u̶l̶e̶s̶'̶]̶
Edit: After testing this, setting resolved_paths was not the right way to go. It more than quadrupled our testing times, I assume because many more parts of webpacker use that setting and node_modules is usually quite big. Go with the solution below:
To all others who still need to use the workaround described above, webpacker 5.0.1 ships with sass-loader 8, which means the config object changed, and includePaths should be in sassOptions.
Probably (untested) something like this (this would probably overwrite resolved_paths, haven't checked):
// config/webpack/environment.js
let sassLoader = environment.loaders
.get("sass")
.use.find(item => item.loader === 'sass-loader')
sassLoader = {
...sassLoader,
options: {
...sassLoader.options,
sassOptions: {
...sassLoader.options.sassOptions,
includePaths: ["./node_modules"],
},
},
}
Here is my take on the issue:
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function(element) {
return element.loader == 'sass-loader'
})
const options = sassLoaderConfig.options
options.sassOptions.includePaths = ['node_modules']
options.implementation = require('sass')
module.exports = environment
IvanDreamer
on 9 Apr 2020
I have the same problem, nothing works from here Failed to find '~mapbox-gl/src/css/mapbox-gl.css'
vedmant
on 27 May 2020
Hey, I have a problem with nested JS.
In development import 'path/to/file.js' runs global file js as descripbed here
Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
But when precompiling iin staging/production t does nothing without giving an error.
So I have to use require('path/to/file.js') to make this work.
Anyone else seeing this? Bug?
mickenorlen
on 3 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
towry
·
3Comments
naps62
·
3Comments
ytbryan
·
3Comments
itay-grudev
·
3Comments
vtno
·
3Comments
Most helpful comment
@jakeNiemiec it worked, my bad there, thanks!
I still find it amusing how using an npm-distributed component is an edge-case though :D