storefront:build - node.js Migration von externen Modulen?

Moorleiche · 16. August 2019 um 14:51

Hey Leute, ich möchte externe node.js Module im Storefront nutzen. Ich bekomme beim storefront:build immer Fehlermeldungen like:

Module not found: Error: Can't resolve 'rbush' in '/home/vagrant/shopware-dev/custom/plugins/MeinPlugin/src/Resources/node_modules/ol/renderer/canvas'

Das liegt daran, dass die Import-Pfade in den node.js Modulen selbst nicht relativ sind… also z.B.

import rbush from 'rbush';

müsste in meinem Plugin jetzt eigentlich

import rbush from '../../rbush/rbush';

sein…

Jedoch nutze ich genau die selben Module in meiner Backend-App, d.h. beim administration:build wird mein node_modules Ordner irgendwie indexiert oder migriert, weil ich dort keinen Fehler erhalte und auch wie erwartet die externen Module nutzen kann.

Hat jemand eine Idee wie ich das auch fürs storefront:build hin bekomme?

Alternative wäre jetzt den node_modules Ordner im Storefront zu erweitern, jedoch ist das nur Plan B.

VG

StefanPoensgen · 24. Februar 2020 um 22:13

https://github.com/stefanpoensgen/SptecLazyload/tree/master/src/Resources/app/storefront

Hier findest du ein Beispiel wie ich es gelöst habe.

Moorleiche · 25. Februar 2020 um 13:12

Okay das ist mir neu mit der webpack.config.js - bist du da von selbst darauf gekommen oder gibt es innerhalb von Shopware Beispiele oder Dokumentationen?

https://github.com/stefanpoensgen/SptecLazyload/blob/master/src/Resources/app/storefront/build/webpack.config.js

Aber super nice von dir! Ich checke das gleich mal am We aus und geb dir Feedback

StefanPoensgen · 25. Februar 2020 um 21:15

Hab im Code Hinweise gefunden und mich dann durch getestet

params kannst du dir mit console.log mal ausgeben. Das wird dann hinterher mit dem Rückgabewert der Funktion gemerged.

github.com

shopware/platform/blob/b7fa36ba80197ff49f0e54b319163a4a65c56edd/src/Administration/Resources/app/common/webpack-plugin-injector/index.js#L273



        // Add new path to Node.js' module path resolving
        addPath(plugin.basePath);

        // Check if custom webpack config is a function
        const customConfigFn = require(plugin.webpackConfigPath); /* eslint-disable-line */
        if (typeof customConfigFn !== 'function') {
            throw new Error(`Webpack config for plugin ${name} needs to be a function to extend the provided Webpack.`);
        }

        // Call custom webpack config function and merge the new config
        const modifiedWebpackConfig = customConfigFn(Object.assign({}, {
            basePath: plugin.basePath
        }, params));

        this.webpackConfig = merge(this.webpackConfig, modifiedWebpackConfig);
        this.warn('Webpack Plugin Injector', `Plugin "${name}" injected with custom config`);
    });

    return this.injectIncludePathsToLoaders();
}

wall0t · 12. März 2020 um 14:39

@StefanPoensgen schrieb:

https://github.com/stefanpoensgen/SptecLazyload/tree/master/src/Resources/app/storefront

Hier findest du ein Beispiel wie ich es gelöst habe.

Sehr Cool, Danke. Das scheint grundsätzlich so zu funktionieren, allerdings nur wenn ich mein Theme/Plugin builde. Im HMR-Modus gehts leider nicht. Als Workaround hab ich jetzt alle Dependencies aus meinem ThemePlugin in meiner Vagrantbox mit in den Core installiert, ist aber auch keine Dauerlösung.

Moorleiche · 13. März 2020 um 11:48

Hat wunderbar funktioniert. Jetzt habe ich eine weitere Frage: Ist es möglich aus einem npm Modul einen bestimmten Ordner in den asset Ordner vom Storefront zu schieben? In meinem Fall geht es um die Schriftarten (FontAwesome 5), die ich ansonsten redundant in den asset Ordner packen müsste. Ist halt ein Luxusproblem, aber das wäre schon echt nice.

VG

ShapeAndShift · 13. März 2020 um 11:50

@Moorleiche‍ Für die Storefront passt das bei mir auch, geht es bei dir auch für die Adminstration? Denn sobald ich es dort verwende - natürlich mit angepassten Pfad - zerschießt er die Kompilierung und core Module usw. werden nicht mehr gefunden. Bei dir auch?

Moorleiche · 13. März 2020 um 12:38

@ShapeAndShift‍ nein, administration:build ging bereits schon vorher ;)

ShapeAndShift · 13. März 2020 um 13:18

Also ich meine - Wenn du eine custom webpack config nutzt für die administration

Moorleiche · 13. März 2020 um 13:28

habe ich nich probiert, im administration:build hat es immer funktioniert wenn der node_modules-Ordner im Resources-Ordner liegt

sawden · 29. Juli 2020 um 20:28

Hey,

habe das gleiche Problem. Beim Bauen mit “storefront:build” funktioniert alles wie gewünscht.
Was nicht funktioniert ist der HMR-Modus mit z. B. “storefront:hot-proxy”.

Hat jemand von euch da eine Lösung gefunden?

Thema		Antworten	Aufrufe
Storefront - Add custom Javascript - Module not found: Error: Can't resolve 'src/plugin-system/plugin.class' Programmierung general , programming	5	1143	30. September 2021
[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)	2	450	5. Oktober 2023
Error when trying to build storefront Themes & Design	8	6046	29. April 2020
Shopware 6 RC3 - Module not found: Error: Can't resolve 'src/script/plugin-system/plugin.class' Programmierung	1	1490	26. August 2020
Storefront:build - Plugin Script wird ignoriert? Programmierung	14	4977	18. August 2020

storefront:build - node.js Migration von externen Modulen?

Verwandte Themen