SVG importation fail

[LPoin]

Hello,
In this issue for Cadastrapp (in draft PR here)
We want to modify a tool icon with a custom SVG.
Work well in dev but the build broke the link and fail to find the SVG.
I made some test on prod-webpack.config.js to create paths, store the SVG and create a new path to apply it but also failed.
Some changes where needed fo fit webpack 5.

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const createExtensionWebpackConfig = require('../../MapStore2/build/createExtensionWebpackConfig');
const CopyPlugin = require('copy-webpack-plugin');
const ZipPlugin = require('zip-webpack-plugin');
const {name} = require('../../config');
const { gitRevisionPlugin, plugins: commonsPlugins, ...commons} = require('./commons');

// the build configuration for production allow to create the final zip file, compressed accordingly
const plugins = [
    new CopyPlugin([
        { from: path.resolve(__dirname, "..", "..", "assets", "translations"), to: "translations" },
        { from: path.resolve(__dirname, "..", "..", "assets", "index.json"), to: "index.json" }
    ]),
    new ZipPlugin({
        filename: `${name}.zip`,
        pathMapper: assetPath => {
            if (assetPath.startsWith('translations') || assetPath.startsWith('assets')) {
                return assetPath;
            }
            // other files have to be placed in the root, with the same name
            return path.basename(assetPath);
        }
    }),
    gitRevisionPlugin,
    ...commonsPlugins
];
// Temp fix to not fail for svg imports. TODO: wait for a fix on mapstore createExtensionWebpackConfig
const fileLoader = {
    test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
    type: 'asset/resource', // file loader for v5 webpack
    generator: {
        filename: 'assets/[name][ext]',
        publicPath: '/',
    },
};
const urlLoader = {
    test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
    use: [{
        loader: 'url-loader',
        options: {
            mimetype: "application/font-woff"
        }
    }]
};
const {module: moduleObj, ...extensionConfig} = createExtensionWebpackConfig({ prod: true, name, ...commons, plugins});
// Temp fix to return errors for leaflet
// TODO: wait for a fix on mapstore createExtensionWebpackConfig
const rules = [{
    ...moduleObj.rules[0], // css rule is the first
    use: [{
        loader: MiniCssExtractPlugin.loader, // replace prod loader first 'use' entry, adding the publicPath.
        options: {
            publicPath: '' // leaflet rises an error about public path, if missing.
        }
    }, ...moduleObj.rules[0].use.slice(1)]
}, ...moduleObj.rules.slice(1)];

module.exports = { 
    ...extensionConfig,
    resolve: {
        fallback: { // manages polyfills
            timers: false,
            stream: false,
            http: false,
            https: false,
            zlib: false,
            buffer: false
        },
        alias: {
            "@mapstore/patcher": path.resolve(__dirname, '..', '..', "node_modules", "@mapstore", "patcher"),
            "@mapstore": path.resolve(__dirname, '..', '..', "MapStore2", "web", "client"),
            "@js": path.resolve(__dirname, '..', '..', "js"),
        },
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        ...moduleObj,
        rules: [...rules, fileLoader, urlLoader]
    }
};

Seems to be a known issue about SVG need a fix but nothing about it for the moment.

[tdipisa]

Hi @LPoin we will try to have a look as soon as possible to provide a feedback.