Getting An Error When Compiling Scripts using wp-scripts

[alexstandiford]

Description

When I try to use the wp-scripts library to run wp-scripts start, I get the following error message:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.output has an unknown property 'jsonpFunction'. These properties are valid:
   object { assetModuleFilename?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
   Did you mean output.chunkLoadingGlobal (BREAKING CHANGE since webpack 5)?

I did a little digging, and found this issue on Webpack's repository that mentions jsonpFunction was replaced with chunkLoadingGlobal. I was able to get the script to compile successfully by replacing jsonpFunction with chunkLoadingGlobal like so:

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

defaultConfig.output.chunkLoadingGlobal = defaultConfig.jsonpFunction

delete defaultConfig.output.jsonpFunction

module.exports = defaultConfig

Step-by-step reproduction instructions

1. Create a new project that uses @wordpress/scripts. I used Underpin's boilerplate in my testing, but that is probably not required.
2. Run wp-scripts start in whatever way you need to-do that. In my case I had a command npm run start set up to run this for me.
3. Observe the error that occurs.

Screenshots, screen recording, code snippet

No response

Environment info

Using WordPress 5.8, and the most-recent version of WP Scripts (whatever gets pulled as the latest from npm)

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

Yes

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

Yes

[gziolo]

Which version of @wordpress/scripts do you use? I don't see jsonpFunction in the default config anymore:

https://unpkg.com/browse/@wordpress/scripts@19.2.2/config/webpack.config.js

Create a new project that uses @wordpress/scripts. I used Underpin's boilerplate in my testing, but that is probably not required.

Actually that might be an issue because it uses an older version v15 of @wordpress/scripts that works with webpack v4:
https://github.com/Underpin-WP/underpin-plugin-boilerplate/blob/cd68e0443daec8d627dcf61ec5c15c7ba9202589/package.json#L13

The only question would be how it happened that you end up using webpack v5.

[alexstandiford]

So, I thought I had updated the version locally before opening this, but evidently I did not.

After updating to the latest version, everything worked without a hitch.

Thanks for your time, @gziolo and @skorasaurus. And THANK YOU for your contributions.

[skorasaurus]

@alexstandiford from a fellow Ohioan, thank you for your appreciation :)