What's the best way to configure a WordPress plugin with rslib?

[binarykitchen]

Good evening,

Before, I compiled WordPress plugins with gulp all fine. Switched to rslib and stuck. Here is an error message:

index.cjs?ver=5.4.0:3707 Uncaught ReferenceError: require is not defined

How can I tell rslib to build without using require for WordPress plugins, and to include all the external dependencies without require?

It's this library (Videomail-Client), I'm trying to include.
In rslib.config.ts, you can see this configuration:

export default defineConfig({
  lib: [
    {
      format: "esm",
      syntax: "es2022",
      dts: true,
    },
    {
      format: "cjs",
      syntax: "es2015",
    },
  ],
...

The ESM syntax works fine for my homepage, but not the CJS syntax for WordPress plugins.
Is there an option to compile all the external dependencies inside one single CJS file without the need for the require command? WordPress does not support require on the client-side.

Any thoughts?

Thanks for any inputs,
cheers M.

[fi3ework]

If you're trying to preserve autoExternal (https://lib.rsbuild.dev/config/lib/auto-external) in ESM and disable it in CJS. You could disable in this way. Is that what you want?

export default defineConfig({
  lib: [
    {
      format: "esm",
      syntax: "es2022",
      dts: true,
    },
    {
      format: "cjs",
+     autoExternal: false,
      syntax: "es2015",
    },
  ],

[binarykitchen]

@fi3ework Thanks, but no. More problems:

I've disabled autoExternal, see this commit:
binarykitchen/videomail-client@4b72e95#diff-1c2e0ed3430409c740c484cb2c2ce8d834adc288d2eb64a1c45258299d4c0309R31

Then tested locally using Docker/Local/Flywheel.
The new error message is:

index.cjs?ver=5.4.0:20987 Uncaught ReferenceError: exports is not defined

Why compile using exports - es2015 does not support it?

In short:
Before, I didn't set autoExternal, and it complained about the lack of the require fn, now, after your suggestion, I've set it to false, and it complains about the lack of the missing exports function.

I wonder, do you have enough unit test coverage regarding the autoExternal parameter? Maybe there is some bug?

[binarykitchen]

For the record, the generated bundle index.cjs has these code lines at the end where the error is thrown:

...
    client_define_property(VideomailClient, "ENC_TYPE_APP_JSON", constants.public.ENC_TYPE_APP_JSON);
    client_define_property(VideomailClient, "ENC_TYPE_FORM", constants.public.ENC_TYPE_FORM);
    /* ESM default export */ const src_client = VideomailClient;
})();
var __webpack_export_target__ = exports; // <----- HERE, ERRORS with "Uncaught ReferenceError: exports is not defined"
for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
    value: true
});

You can inspect the full bundle at path /videomail-client/dist/index.cjs here:
https://www.npmjs.com/package/videomail-client/v/10.0.0-15?activeTab=code

[fi3ework]

This is expected, in my opinion. You are trying to deliver a CommonJS (CJS) product, so it will naturally include require and exports, which are CommonJS runtime methods.

Before you disabled autoExternal, you encountered an issue with require. However, exports was also present then; the problem with require simply caused a runtime error first.

In my view, the current product meets the expectations of CommonJS. Browsers cannot run CJS products directly. If you want to support both browsers and CJS, consider using the "umd" format. You can find more information here: https://lib.rsbuild.dev/guide/basic/output-format#umd.

[binarykitchen]

Thanks for the advice @fi3ework to give UMD a try. Unfortunately, there are still problems. __webpack_require__ always returns undefined.

What I did:

(1) Added a UMD Bundle

    {
      format: "umd",
      // This will include all the JS code into one single file without
      // the use of require()
      autoExternal: false,
      umdName: "VideomailClient",
      output: {
        distPath: {
          root: "./dist/umd/",
        },
      },
    },

See https://github.com/binarykitchen/videomail-client/blob/master/rslib.config.ts#L45

(2) Included that UMD bundle in the WordPress plugin

function copyVideomailClient() {
  return gulp
    .src("node_modules/videomail-client/dist/umd/index.js")
    .pipe(gulp.dest("target/js/videomail-client"));
}

See https://github.com/binarykitchen/videomail-for-ninja-forms/blob/develop/gulpfile.js#L58

(3) Loaded it into WordPress

    wp_enqueue_script(
      'nf-videomail-client',
      NF_Videomail::$jsUrl . 'videomail-client/index.js',
      array(),
      NF_Videomail::VERSION
    );

See https://github.com/binarykitchen/videomail-for-ninja-forms/blob/develop/src/php/fields/videomail.php#L161

(4) Error when loading locally

First error thrown:

index.js?ver=5.4.0:4152 Uncaught TypeError: Cannot read properties of undefined (reading 'createNanoEvents')
    at <static_initializer> (index.js?ver=5.4.0:4152:59)

When i debug, it's this bundled code:

            // EXTERNAL MODULE: external "nanoevents"
            var external_nanoevents_ = __webpack_require__("nanoevents");
            class Despot {
                name;
                options;
                // The one and only, instantiate it only once and keep it global.
                // https://github.com/ai/nanoevents
                static EMITTER = (0, external_nanoevents_.createNanoEvents)();
                constructor(name, options){
                    this.name = name;
                    this.options = options;
                }

There appears to be a problem around webpack_require, I think? I've set autoExternal to false, why still the use of require?

[Timeless0911]

I have checked your cjs/esm/umd output products, there is no code snippet which contains var external_nanoevents_ = __webpack_require__("nanoevents").

[binarykitchen]

I think I made a mistake and have fixed it on my side. Thanks for your advice and suggestions.