search

bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

Assets precompiling fails after upgrading through yarn #217

Closed migu0 closed 2 years ago

migu0 commented 2 years ago

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