Assets precompiling fails after upgrading through yarn
migu0 opened this issue · 0 comments
migu0 commented
I have an app that worked just fine. Somehow, after upgrading modules through yarn, Heroku started crashing when precompiling assets. I can reproduce the error locally when running rails assets:precompile, on the fly compiling works though. I'm more of a backend dev and have tried to debug this without success for days, any help would be very much apprechated.
Here's the code I have:
package.json
{
"name": "some_app",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@popperjs/core": "^2.9.2",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.3",
"bootstrap": "^5.0.2",
"jquery": "^3.6.0",
"lightgallery": "^2.2.1",
"popper.js": "^1.16.1",
"resolve-url-loader": "^4.0.0",
"tiny-slider": "^2.9.3",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3"
}
}
environment.js
const { environment } = require('@rails/webpacker')
// https://github.com/sachinchoolur/lightGallery/issues/1039
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
jquery: 'jquery/src/jquery',
'window.jQuery': 'jquery/src/jquery',
// or jquery/src/popper.js ??
// Popper: ['popper.js', 'default'],
})
)
module.exports = environment
webpack.config.js
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import OptimizeCssAssetsPlugin from '../../../src/';
module.exports = {
entry: './index',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'css-loader'
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: { loader: 'style-loader' },
use: {
loader: 'css-loader'
}
})
},
],
},
plugins: [
new ExtractTextPlugin('file.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /optimize-me\.css/g
})
],
};
Stylesheets are under app/javascript/stylesheets and for some plugins in node_modules.
Referenced fonts & images in stylesheets app/javascript/images and for some plugins in node_modules.
This is the error I'm getting after updating things through yarn:
rails assets:precompile
yarn install v1.22.17
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.56s.
Compiling...
Compilation failed:
Hash: 1b22a2a5da6a4c5eaaea
Version: webpack 4.46.0
Time: 11875ms
Built at: 10/31/2021 6:59:18 PM
24 assets
Entrypoint application = js/application-a0f426d4f3221843ac92.js js/application-a0f426d4f3221843ac92.js.map
[110] (webpack)/buildin/module.js 552 bytes {0} [built]
[111] ./app/javascript/images/01.jpeg 99 bytes {0} [optional] [built]
[112] ./app/javascript/images/application/chevron-right-solid.svg 127 bytes {0} [optional] [built]
[113] ./app/javascript/images/application/logo.png 112 bytes {0} [optional] [built]
[114] ./app/javascript/images/application/spinner.gif 115 bytes {0} [optional] [built]
[115] ./app/javascript/images/homepage/slider/herz_feuer.jpg 122 bytes {0} [optional] [built]
[116] ./app/javascript/images/homepage/slider/simon_rosenberger.jpg 129 bytes {0} [optional] [built]
[122] multi ./app/javascript/packs/application.js ./app/javascript/packs/application.scss 40 bytes {0} [built]
[123] ./app/javascript/packs/application.js 1010 bytes {0} [built]
[160] ./app/javascript/channels/index.js 205 bytes {0} [built]
[162] ./app/javascript/images sync ^\.\/.*$ 523 bytes {0} [built]
[183] ./app/javascript/scripts/theme.js 20.5 KiB {0} [built]
[184] ./app/javascript/scripts/theme_extension.js 382 bytes {0} [built]
[185] ./app/javascript/packs/application.scss 714 bytes {0} [built]
[186] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--6-4!./app/javascript/packs/application.scss 2.25 KiB {0} [built] [failed] [1 error]
+ 175 hidden modules
ERROR in ./app/javascript/packs/application.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--6-4!./app/javascript/packs/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
at /Users/user/Development/novoglobo/app/javascript/packs/application.scss:11:8157
at Parser.error (/Users/user/Development/novoglobo/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/user/Development/novoglobo/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/user/Development/novoglobo/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/user/Development/novoglobo/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/user/Development/novoglobo/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/user/Development/novoglobo/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/user/Development/novoglobo/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:194:18
at /Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:139:18
at Rule.each (/Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:105:16)
at Rule.walk (/Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:135:17)
at /Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:152:24
at Root.each (/Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:105:16)
at Root.walk (/Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:135:17)
at Root.walkDecls (/Users/user/Development/novoglobo/node_modules/postcss/lib/container.js:192:19)
at transformProperties (/Users/user/Development/novoglobo/node_modules/postcss-custom-properties/index.cjs.js:330:8)
at Object.syncTransform [as plugin] (/Users/user/Development/novoglobo/node_modules/postcss-custom-properties/index.cjs.js:522:5)
at /Users/user/Development/novoglobo/node_modules/postcss-preset-env/index.js:443:97
@ ./app/javascript/packs/application.scss 2:26-278
@ multi ./app/javascript/packs/application.js ./app/javascript/packs/application.scss