Image not found when trying out the widget

0
Hi, I’m making a pluggable widget in React with Typescript but I keep getting 404 file not found when testing the widget. const dotIMG = new Image(size, size); dotIMG.src = '../nodes/dot.svg'; ctx.drawImage(dotIMG, node.x - size / 2, node.y - size / 2, size, size); My structure file is simple, inside my src folder I have a component folder with my component and next to that folder a nodes folder with svg images.
asked
2 answers
0

I worked with Maxime on this one an what we ended up doing is the following:

Extend the default Webpack configuration as explained here: https://github.com/mendix/pluggable-widgets-tools

Then we used the first approach described here: https://www.pluralsight.com/guides/how-to-load-svg-with-react-and-webpack. That means adding the https://github.com/bhovhannes/svg-url-loader as a loader for SVG images

const merge = require("webpack-merge");
const baseConfig = require("@mendix/pluggable-widgets-tools/configs/webpack.config.dev.js"); //Can also be webpack.config.prod.js

const customConfig = {
    
};
const previewConfig = {
    // Custom configuration goes here

    // Custom configuration goes here
    devtool: "source-map",
    mode: 'development',

    module: {
        rules: [
            {
                test: /\.svg$/,
                loader: "svg-url-loader"
            },
        ],
    },
};

module.exports = [merge(baseConfig[0], customConfig), merge(baseConfig[1], previewConfig)];

and then we can just use the SVG images like this: 

 

import rectangle from 'images/rectangle.svg';

const App = () => <img src={rectangle} alt="" />;
answered
0

If I understand the widget tools correctly, the Typescript is transpiled to a single Javascript file. This means that any of the SVG files will not end up in the final result. You can check this by looking in your dist/tmp folder.

One way to do this I guess is to include the SVG with require (and let webpack read the SVG as a base64 string) and set the src in that way.

answered