[Bug]: output.copy type definition is limited to CopyRspackPluginOptions

[AllenAttuned]

Version

npmPackages:
  @modern-js/app-tools: 2.48.0 => 2.48.0 
  @modern-js/eslint-config: 2.48.0 => 2.48.0 
  @modern-js/runtime: 2.48.0 => 2.48.0 
  @modern-js/tsconfig: 2.48.0 => 2.48.0

Edit: I've tried upgrading to Modern.js v2.48.4 and the issue still persists.

Details

Our configuration is using Webpack to produce a static SPA.

• TypeScript v5.0.4

The documentation for output.copy outlines, correctly, that the Modern.js copy should accept the same configuration as the copy-webpack-plugin. However, the type definition for this property is limited to the CopyRspackPluginOptions type.

The property that's throwing the error is the transform property. We're using Webpack to bundled our application, so the feature does work correctly. Only the type checking is incorrect.

Below is the type error thrown:

TS2322: Type '{ from: string; to: string; transform(content: any): any; }' is not assignable to type 'string | ({ from: string; } & Partial<RawCopyPattern>)'.
  Object literal may only specify known properties, and 'transform' does not exist in type '{ from: string; } & Partial<RawCopyPattern>'.
    20 |                 from: './env/fileToCopy.js',
    21 |                 to: '',
  > 22 |                 transform(content) {
       |                 ^^^^^^^^^
    23 |                     return content;
    24 |                 },
    25 |             },

Relevant portion of the modern.config.ts:

// modern.config.ts
export default defineConfig({
    output: {
        cleanDistPath: true,
        disableSourceMap: false,
        polyfill: 'off',
        distPath: {
            html: '',
        },
        copy: [
            {
                from: './env/fileToCopy.js',
                to: '',
                transform(content) { // <--- Throws type error
                    // ...
                    return content;
                },
            },
        ],
    },
    // ...
};

Reproduce link

https://gitpod.io#snapshot/7df64c15-a5f8-4d0c-ac1a-9702097a7ebe

Reproduce Steps

In the shared Gitpod snapshot: https://gitpod.io#snapshot/7df64c15-a5f8-4d0c-ac1a-9702097a7ebe

Code is on GitHub if you don't want to use Gitpod: https://github.com/AllenAttuned/modern_ts_bug

You'll find the modern.config.js file. In it, I've added the output.copy property with the transform property. Running npm run build as is will fail with the type error. Removing the whitespace between the @ and ts-expect-error in the TypeScript exception will allow the build to succeed.

// modern.config.ts

// ...
copy: [
  {
    from: './env/fileToCopy.txt',
    to: '',
    // Remove the " " between `@` and `ts-...` to correct the TS exception to fix the type error
    // @ ts-expect-error
    transform(content) {
      return content;
    },
  },
],
// ...

[chenjiahan]

We can try to implement the transform option in the CopyRspackPlugin, so Modern.js can provide consistent type definitions for output.copy, @9aoy can you take this?