Encore.copyFiles() broken with NodeJS 18.12 (LTS)

[nalxnet]

When running Encore.copyFiles() with webpack-encore 4.1.2 using the new NodeJS LTS release (18.12), the following error is thrown:

Module build failed (from ./node_modules/@symfony/webpack-encore/lib/webpack/copy-files-loader.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at getHashDigest (/app/node_modules/loader-utils/lib/getHashDigest.js:46:34)
    at /app/node_modules/loader-utils/lib/interpolateName.js:113:11
    at String.replace (<anonymous>)
    at interpolateName (/app/node_modules/loader-utils/lib/interpolateName.js:110:8)
    at Object.loader (/app/node_modules/file-loader/dist/index.js:29:48)
    at Object.loader (/app/node_modules/@symfony/webpack-encore/lib/webpack/copy-files-loader.js:90:33)

Encore.copyFiles() internally uses https://github.com/webpack-contrib/file-loader, which was last released over 2 years ago and deprecated with webpack 5, so file-loader won't get any updates to be compatible to NodeJS 17 and above. The recommendation is to switch to webpack 5 asset modules.

As webpack-encore requires webpack ^5.72 in its peer dependencies, I would consider this a bug.

[weaverryan]

We may need to deprecate and remove our super-fancy copyFiles() implementation. It was built by @Lyrkan and it's super impressive. But I'm not sure if it could be rewritten to work without file-loader.

[mbabker]

Just curious if anyone's come up with a workaround or alternative solution here, especially with Node 16 coming up to its EOL. The main use case I have in apps using Encore is using NPM to manage my CKEditor build/version and copying the files over when building the assets (which I know we could do in other ways, but it just makes everything simpler for everyone to have it all in one build step).

[mattsbennett]

I tried using asset/resource, and it works the same as file-loader. Can just use encore.getWebpackConfig(); to get the config, then add a rule as described at https://webpack.js.org/guides/asset-modules/#resource-assets.

From looking at the docs, I suspect copyFiles could be rewritten to use asset modules pretty simply.

[ThomasLandauer]

@mattsbennett Could you please post an example of how to add that rule to webpack.config.js? So far, I did:

yarn add asset --dev
yarn remove file-loader

And the call I'd need to replace is:

.copyFiles({
    from: './assets/images',
    to: 'images/[path][name].[hash:8].[ext]',
})

@weaverryan Since according to https://nodejs.org/en/about/previous-releases, Node.js 16 has reached EOL already, I think https://symfony.com/doc/current/frontend/encore/copy-files.html#referencing-image-files-from-a-template should be updated. Should I come up with a PR? Or what's your plan?