[v6.5.4.0] Webpack Error: bin/build-storefront.sh: Webpack Error: Module not found: Error: Can't resolve 'module' in 'path'

Shopware 6 (German)
1

Moin zusammen!

Beim Update eines Themes von einem Kunden ist mir aufgefallen, dass es bei einigen (nicht allen) NPM-Packages wohl zu Fehlern in der Konsole kommt, wenn man versucht, dass JS zu kompilieren.

Es handelt sich in dem Fall um das JS der Storefront:
v6.5.2.1: bin/build-storefront.sh: Executing script assets:install [OK]
v6.5.3.0: - aktuell nicht getestet -
v6.5.4.0: bin/build-storefront.sh:

ERROR in ../../../../../../../custom/plugins/SwagExample/src/Resources/app/storefront/src/plugin/headroom/headroom.plugin.js 2:0-33
Module not found: Error: Can't resolve '@Headroom' in '/shopware-flex/custom/plugins/SwagExample/src/Resources/app/storefront/src/plugin/headroom'

Um den Fehler zu reproduzieren habe ich lokal eine frische Shopware-Flex installation durchgeführt, dort ein eigenes Theme erstellt und dort anhand der Anleitung eine eigenes NPM-Paket („headroom.js“) installiert, dies via build/webpack.config.js als „@Headroom“ resolve eingetragen und ein eigenes JS-Plugin geschrieben, in dem das installierte Package importiert wird.

Als Gegentest habe ich lokal via NPM ein leeres Projekt erstellt (mit Webpack 5) und dort eine ähnliche Konfiguration nachgebaut - hier wird das Package korrekt dem gewünschten Namespace zugeordnet.

Außerdem habe ich lokal mit einer älteren Version (v6.5.2.1) getestet - auch hier wird das Package sauber eingebunden und der Build-Befehl läuft fehlerfrei durch.

Falls noch jemand diesen Fehler nachstellen kann, freue ich mich über ein Voting im Issue-Ticket:

LG;LA

2

Ich bin doch nicht etwa der einzige Entwickler, der NPM benutzt? ^^

3

Moin,

nein, bist Du nicht, hier das gleiche Problem. Wobei bei mir auch bin/watch-storefront nicht funktioniert. Der Tracker steht immer noch auf Scheduled Minor, Voting nicht mehr möglich. Mittlerweile ist bereits 6.5.6.0 erschienen… :roll_eyes:

Beste Grüße,
devnullroot

4

Ticket steht noch auf in Review, aber es wurde nun etwas gemacht: SW6.5.5.0

Nun arbeite ich in einer 6.6.2.0 und habe ähnliche Probleme beim admin-watcher:

ERROR in ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8888&pathname=%2Fws&logging=info&progress=true&overlay=false&reconnect=10&hot=false&live-reload=true 8:0-47
Module not found: Error: Can't resolve 'webpack/hot/log.js' in '/var/www/html/vendor/shopware/administration/Resources/app/administration/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/modules/logger/index.js 256:37-44
Module not found: Error: Can't resolve 'process/browser' in '/var/www/html/vendor/shopware/administration/Resources/app/administration/node_modules/webpack-dev-server/client/modules/logger'

ERROR in ./node_modules/webpack-dev-server/client/overlay.js 9:0-43
Module not found: Error: Can't resolve 'ansi-html-community' in '/var/www/html/vendor/shopware/administration/Resources/app/administration/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/overlay.js 10:0-39
Module not found: Error: Can't resolve 'html-entities' in '/var/www/html/vendor/shopware/administration/Resources/app/administration/node_modules/webpack-dev-server/client'

ERROR in ./node_modules/webpack-dev-server/client/utils/reloadApp.js 1:0-48
Module not found: Error: Can't resolve 'webpack/hot/emitter.js' in '/var/www/html/vendor/shopware/administration/Resources/app/administration/node_modules/webpack-dev-server/client/utils'

ERROR in ./node_modules/webpack-dev-server/client/modules/logger/index.js
Cannot read properties of undefined (reading 'module')

webpack 5.88.2 compiled with 6 errors in 2427 ms
5

Moin!

Bei mir hat der Watch-Befehl ehrlicherweise noch nie funktioniert :sweat_smile:

Interessant find ich bei Dir, dass immer webpack-dev-server im Log erwähnt wird, gibt es da ggf. eine neue Version oder bist vielleicht auf einer zu neuen Version?

Beim „normalen“ bin/build wird das vermutlich richtig kompiliert?

Das ursprüngliche Problem dieses Threads wurde in einer neueren Version seitens Shopware behoben, möglich, dass dies hier auch nötig ist.

LG;LA

6

webpack-dev-server wird nur für den Watcher genutzt. bin/build-administration.sh lief zwar ohne Fehlermeldung durch, da gab es dann noch Fehlermeldungen von Vue, wenn ich mich richtig erinnere.

Ich habe nun die webpack.config.js wieder auf die alte Methode umgestellt mit alias:

const { join, resolve } = require('path');

module.exports = () => {
    return {
        resolve: {
            alias: {
                '@tiptap': resolve(
                    join(__dirname, '..', 'node_modules', '@tiptap'),
                ),
            }
        }
    };
}

Statt wie in der Doku nun beschrieben Adding NPM Dependencies | Shopware Documentation

module.exports = (params) => {
    return { 
        resolve: { 
            modules: [
                `${params.basePath}/Resources/app/storefront/node_modules`,
            ],
       } 
   }; 
}

Bisher scheint es zu laufen

Die letzten Updates bis 6.6.4.1 sehen nicht nach Fixes dafür aus :frowning:
Mit dem Watcher hatte ich anfangs auch Probleme. Meist lag es am mount des Plugins für Docker. Das synchronsieren mit dem Docker Container (dockware/dev) und noch der Watcher war wohl zu viel des Guten.