Add --experimental-modules handler to Webpack configuration

[Jorgu5]

Is your enhancement related to a problem? Please describe.

The new Interactivity API introduced in WP 6.5 requires --experimental-modules flag to both the build and start scripts.

The Interactivity API script requires new modules in WordPress 6.5, so blocks must enqueue any JavaScript that relies on the API by using viewScriptModule instead of viewScript. Considering this module requirement, the --experimental-modules flag tells wp-scripts how to build view.js properly.

What exactly does this module is stated in their doc, With this option enabled, script and module fields will all be compiled. The viewScriptModule field is analogous to the viewScript field, but will compile a module and should be registered in WordPress using the Modules API.

Are you planning to add this feature soon?

Designs

N/A

Describe alternatives you've considered

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct

[fabiankaegy]

Hey @Jorgu5 👋

We actually already added support for this in #368 :) We just released version 6.1.0 beta 1 with this in it. So you can test this out for yourself by installing npm i [email protected].

[Jorgu5]

This is awesome! Thanks for prompt reply. It works on the first run with yarn start, however there seems to be a small bug, after making changes and updating while watch is running, below block of code is being added dynamically to the end of the module and it's looking for a runtime.js file which does not exist and breaks the functionality.

import __webpack_require__ from "../../runtime.js";
var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
import * as __webpack_chunk_0__ from "./view.js";
__webpack_require__.C(__webpack_chunk_0__);
var __webpack_exports__ = __webpack_exec__("./includes/blocks/mega-menu-block/view.js");

This snippet is not being added on the first run, so whenever I make an edit, I have to close the session and re-run yarn start

[nicholasio]

Thanks for the report, that is very likely being injected by the react refresh webpack plugin and I don't think we have got it working for modules so we might just need to disable it.