Webpack Error: webpac require is not defined

[Schuppel1]

Preview stays blank – __webpack_require__ is not defined (possible fix included)

Plugin Version: 1.4.1

Environment

Testserver:

• Neos: 8.3.29
• Node: v14.21.3
• PHP: 8.2.11

Plugin compiled with:

• Node.js: v16.20.2
• npm: 8.19.4
• Yarn: 1.22.22
• PHP: 8.2.29

Problem

The preview view remains completely blank after building the project.

The browser console shows the following error:

index.jsx_+_233_modules:3 Uncaught ReferenceError: __webpack_require__ is not defined
    at eval (index.jsx_+_233_modules:3:13)
    at eval (<anonymous>)
    at h (site.min.js:1:16913)
    at 57259 (app.js:1:70322)
    at __webpack_require__ (app.js:1:4761894)
    at app.js:1:4763172
    at app.js:1:4763200

// EXTERNAL MODULE: ../../../../node_modules/react/index.js
var react = __webpack_require__(21902);

Analysis

It seems that the preview script is executed before the Webpack runtime is properly available.
The combination of devtool: 'eval' and an async script tag appears to cause this issue.

Workaround / Fix

I was able to fix the issue locally with the following changes:

1. Change Webpack devtool

File:
Yoast.YoastSeoForNeos/Resources/Private/Scripts/edit-mode/webpack.config.js

const webpackConfig = [
    {
        entry: './src/index.jsx',
-       devtool: 'eval',
+       devtool: 'source-map',
        ...

2. Remove async attribute from script tag

File:
Yoast.YoastSeoForNeos/Resources/Private/Fusion/Documents/YoastSeoView.fusion

       ...
-                       <script async="async" @key="appBundle">
+                       <script @key="appBundle">
        ...

After rebuilding the assets, the preview loads correctly and the error no longer occurs.

Additional Information

If any further information is required, I am happy to provide it.

Please let me know how I can help to further investigate or validate this issue.