Laravel-mix: Module build failed: Error: missing '{'

[Gummibeer]

• Laravel Mix Version: 4.1.0
• Node Version: 12.10.0
• NPM Version: 6.11.3
• OS: MacOs 10.14.6

Description:

If I use processCssUrls: true and try to compile with tailwind I get this error:

ERROR in ./resources/assets/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: file:///resources/assets/sass/app.scss:3:412: missing '{'

@bholloway found the issue and a solution in https://github.com/bholloway/resolve-url-loader/issues/132

I can see that laravel-mix@master is explicitly using the engine: rework for some perceived backwards compatibility, even though the engine: postcss should be the safer option.
Refer to here. If you monkey-patch your local node_modules to remove that option you will find it works.
I suggest that you open an issue on laravel-mix to have the option removed and add the ability to specify resolve-url-loader options even if it is an undocumented escape hatch. I make the default options as safe as possible but there are situations (like the removeCR fix) where configuration is needed per-project.

https://github.com/JeffreyWay/laravel-mix/blob/98434a367dee6df7212d864455b2922c91435faf/src/components/Preprocessor.js#L74-L82

I can't really help here because I use Mix for it's simplicity and haven't really understand webpack yet. 🙈

Steps To Reproduce:

https://github.com/Gummibeer/tailwind-process-css-urls

[tinyfly]

I get the same error and when I manually removed the engine: 'rework' line from the laravel-mix source my .scss file compiled correctly. @JeffreyWay Any chance we could get that removed or allow us to specify resolve-url-loader options so we could change it ourselves?

[tinyfly]

@Gummibeer I've figured out a temporary workaround for now until the 'rework' engine is removed. Put the following in your mix file. This lets you change the engine before any files are processed without having to muck about in the source code.

Mix.listen('configReady', webpackConfig => {
  webpackConfig.module.rules.forEach(rule => {
    if (Array.isArray(rule.use)) {
      rule.use.forEach(ruleUse => {
        if (ruleUse.loader === 'resolve-url-loader') {
          ruleUse.options.engine = 'postcss';
        }
      });
    }
  });
});

If you wanted you could also add ruleUse.options.debug = true here to see what images the loader found or not. Which might be useful.

[mojtabaahn]

@tinyfly I got no idea what this code does, but It's working 🎉

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[panda-madness]

I believe this needs to be re-opened, as the issue still exists, @JeffreyWay .

[amberlampsio]

Issue does exist

[kimobot]

This still exists.

[trocho]

I use v5.0.5 and I still have this issue as well. But the tip with change the engine works

[wtfmrpresident]

@kimobot @amberlampsio @trocho

try set options:

.options({
        processCssUrls: false, <-----
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })

because Preprocessor.js check this config option
if (preprocessor.type === 'sass' && Config.processCssUrls) {