@wordpress/scripts can't see errors details with errorDetails.true

[webexpr-dhenriet]

Description

In a theme with a /src folder and a /build folder, I want to compile js and scss into css.
I used this example https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/

With a dart-sass compilation, no problem, it's very simple.
A simple addition to the .json package is all that's needed, and every file that doesn't start with "_" will be compiled with the same name:

"scripts": {   
  "scss": "./src/scss/:./build/ --style compressed",
},

With @wordpress/scripts, it's still extremely complicated.
I have several errors that I can't see, I don't know which file it is on which line ?

The error message is :

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

The console displays the entire compilation of the scss file... Why is this ?
The /build folder has an app.asset.php file, no error detail.

For example, with dart sass if there's an error during compilation, it indicates the error line and file, compilation stops, it doesn't display the entire compiled file in the console.

So I put this in webpack.config.js

stats: {
  preset: 'normal',
  moduleTrace: true,
  errorDetails: true,
},

In webpack.config.js and package.json :

"scripts": {
  "start": "wp-scripts start --stats-error-details",
  "build": "wp-scripts build"
},
stats: {
  preset: 'normal',
  moduleTrace: true,
  errorDetails: true,
},

Now the error message is :

The message is "webpack 5.91.0 compiled with 3 errors in 4542 ms".

So that doesn't display anything else ?

Errors comes from background images path .
But more importantly, how to display errors and not display 14000 lines in the console ?

// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );

// Utilities.
const path = require( 'path' );

// Add any a new entry point by extending the webpack config.
module.exports = {
	...defaultConfig,
	...{
		entry: {
			// 'js/editor':  path.resolve( process.cwd(), 'src/js', 'editor.js' ),
			'css/app': path.resolve( process.cwd(), 'src/scss', 'app.scss' ),
			//'css/editor': path.resolve( process.cwd(), 'src/scss', 'style-editor.scss' )
		},
		stats: {
			preset: 'normal',
			moduleTrace: true,
			errorDetails: true,
		},
		plugins: [
			// Include WP's plugin config.
			...defaultConfig.plugins,

			// Removes the empty `.js` files generated by webpack but
			// sets it after WP has generated its `*.asset.php` file.
			new RemoveEmptyScriptsPlugin( {
				stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
			} )
		]
	}
};

Step-by-step reproduction instructions

install @wordpress/scripts
/src/scss with multiples files
have errors in scss files

Screenshots, screen recording, code snippet

---

Environment info

node v18.12.1
webpack 5.91.0
windows 10pro
@wordpress/scripts": "^27.4.0"

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[webexpr-dhenriet]

module.exports = {
    ...defaultConfig,
      stats: {
        ...defaultConfig.stats,
        errors: false,
        errorDetails: true,
    },
}

By setting this settings, the complete compilation of the file is not displayed in the console, but it's still impossible to know where the errors come from, in which file and on which line?
Moreover, it says that I have an error in "app.scss" and then that webapck compiled with 2 errors....
If you need to implement more advanced scss (mixins, functions), I don't see how it's possible to work with this configuration. In that case, you might as well use native css, which now allows nesting.

If anyone could help me, that would be great.

[nicwinn]

@webexpr-dhenriet, Did you figure this out. Same issue here. But I'm curious, the code scaffolded by npx @wordpress/create-block did not make a webpack.config.js. Did you create one?

[webexpr-dhenriet]

@nicwinn
yes, I had created a webpack.config.ts file
I haven't found any solutions, I corrected the errors linked to the scss compilation. In any case, the compilation time is much too long. I tried laramix and vite js too, but again it's not perfect, so I went back to my old and fastest method (no javascript compilation, browser sync in CLI for the watch/live reload and only scss compilation with scripts launched from the package.json file).

// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );

// Utilities.
const path = require( 'path' );

//https://developer.wordpress.org/news/2023/04/25/how-webpack-and-wordpress-packages-interact/
//https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#using-fonts-and-images
//https://github.com/WordPress/gutenberg/issues/55936#issuecomment-1916500479

// Add any a new entry point by extending the webpack config.
module.exports = {
    ...defaultConfig,
    entry: {
        'js/app':  path.resolve( process.cwd(), 'src/js', 'app.js' ),
        'js/editor':  path.resolve( process.cwd(), 'src/js', 'editor.js' ),
        'css/app': path.resolve( process.cwd(), 'src/scss', 'app.scss' ),
        'css/editor': path.resolve( process.cwd(), 'src/scss', 'editor.scss' )
    },
    // infrastructureLogging: {
    //     level: 'info',
    //     debug: /webpack/,
    // },
    stats: {
        ...defaultConfig.stats,
        errors: false,
        errorDetails: true,
    },
    plugins: [
        // Include WP's plugin config.
        ...defaultConfig.plugins,

        // Removes the empty `.js` files generated by webpack but
        // sets it after WP has generated its `*.asset.php` file.
        new RemoveEmptyScriptsPlugin({
            stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
        })
    ]
};