search

10up / 10up-toolkit

Official 10up asset building toolkit.
114 stars 19 forks source link

Add --experimental-modules handler to Webpack configuration #385

Closed Jorgu5 closed 7 months ago

Jorgu5 commented 7 months ago

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

fabiankaegy commented 7 months ago

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 10up-toolkit@6.1.0-next.0.

Jorgu5 commented 7 months ago

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 commented 7 months ago

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.