[Feature] Add check for MF plugin name

[fz6m]

Clear and concise description of the problem

Usually, we will set the provider name as @scope/name, format with scoped package names ( like @company/project-name ):

  config.plugin('ModuleFederationPlugin').use(ModuleFederationPlugin, [
      {
        // 🟡 ↓ this name
        name: 'react-app',
        filename: 'remoteEntry.js',
        exposes: {
          './Button': './src/Button',
        },
        shared: {
          react: {
            singleton: true,
          },
          'react-dom': {
            singleton: true,
          },
        },
      },
    ])

but only get the following error:

// in rsbuild

<e> [webpack-dev-middleware] [Error:   × Library name base (federation-provider) must be a valid identifier when using a var declaring library type. Either use a valid identifier (e. g. federation_provider) or use a different library
<e>   │ type (e. g. `type: 'global'`, which assign a property on the global scope instead of declaring a variable). Common configuration options that specific library names are 'output.library[.name]',
<e>   │ 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.
<e> ] {
<e>   code: 'GenericFailure'
<e> }

// in webpack

<e> [webpack-dev-middleware] HookWebpackError: [ Module Federation Manifest Plugin ]: remoteEntry chunk should not have multiple files!, current files: 
<e>     at makeWebpackError (/Users/sakina/Documents/code/test/xn/mf-remote/node_modules/.pnpm/webpack@5.91.0_@swc+core@1.4.17_esbuild@0.20.2/node_modules/webpack/lib/HookWebpackError.js:48:9)
<e>     at /Users/sakina/Documents/code/test/xn/mf-remote/node_modules/.pnpm/webpack@5.91.0_@swc+core@1.4.17_esbuild@0.20.2/node_modules/webpack/lib/Compilation.js:3175:12
<e>     at eval (eval at create (/Users/sakina/Documents/code/test/xn/mf-remote/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
<e>     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

// ...

I tried many times, know this is not valid, currently only names with underscores ( _ ) can be used, names like some-name / @scope/name / @scope_name are not allowed.

Is this the expected behavior ?

I think should add some name validation and help messages.

Suggested solution

No response

Alternative

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ScriptedAlchemy]

Just use a different type like MFConfig.library.type = "window"

[zhoushaw]

@fz6m As zack said, For now, you can solve your problem in the following ways.

new ModuleFederationPlugin({
	name: "@com/aaa-remote2",
+	library: {
+		type: 'window',
+		name: 'remote2',
+	},
	exposes: {
		"./button": "./src/button.tsx",
		"./export-app": "./src/export-App.tsx",
	},
	shared: ["react", "react-dom"],
}),

You can wrap a layer around the module federation plugin according to your requirements, You can also consider using a function to convert the original name to a name that webpack can set to global, because this name needs to be stored in the global variable

[zhoushaw]

We actually do something similar inside ByteDance, and here are some basic ways to do some name conversions

https://github.com/module-federation/core/blob/3af2723fe2983b49480a276c6f3b9b8e5cebdac8/packages/sdk/__tests__/encodeName.spec.ts

[fz6m]

Thanks, I will try to set other library type or encode the name.