EDIT: This is not the final solution. Please look at the comment below for the solution. I am leaving this here so we can have a full trace of the problem solving.
I am posting this an update as I managed to make this work, however the solution involves a hack that I am unhappy with and will be looking to solve.
So in the end, no matter what approach I would try to take with the import, webpack would keep on giving me errors about canvas, even after I installed canvas specifically.
After many hours of digging, I realized that the only realistic solution would be to modify webpack config as per this comment: https://github.com/konvajs/react-konva/issues/102#issuecomment-308000612
So, as my webpack knowledge is quite basic, the only way I could do it is to actually modify the webpack files within node_modules/@frontity/core/dist/src/config/webpack/plugins.js.
NOTE: I know this is not the correct way of doing it and that updating will overwrite the changes, however it is the only way I could manage to make it work.
Inside plugins.js I modified the line with the ignoring of folders to this:
config.push(new webpack_1.WatchIgnorePlugin([new RegExp(outDir)]), new webpack_1.IgnorePlugin(/^encoding$/), new webpack_1.IgnorePlugin(/canvas|jsdom/, /konva/));
Once this was done webpack could actually compile the code.
The next step was using Konva. I have made a seperate package where Konva is used, called customizer. Inside that package the index.js file looks like this:
export default {
name: "kh-product-customizer",
roots: {},
state: {
customizer: {
visible: false,
},
},
libraries: {
customizer: {
components: {},
},
},
actions: {
customizer: {
beforeCSR: async ({ libraries, roots }) => {
let reactKonva = await loadable(() => import("./Components/index.js"));
libraries.customizer.Component = reactKonva
},
},
},
};
An extra note, I could only make it work with loadable. If i tried to use import as in the example above, it would keep giving me errors about the component not being exported properly.
Last but not least, in the component where I actually want to show the Konva component, I have the following:
const ProductCustomizer = libraries.customizer.Component
and within the return I have:
{ProductCustomizer && <ProductCustomizer/>}
As some extra info, for testing I was using one of the example components from Konva that looks like this:
import React from "react";
import { useConnect, connect } from 'frontity'
import { Stage, Layer, Rect, Transformer } from "react-konva";
const Rectangle = ({ shapeProps, isSelected, onSelect, onChange }) => {
const shapeRef = React.useRef();
const trRef = React.useRef();
React.useEffect(() => {
if (isSelected) {
// we need to attach transformer manually
trRef.current.nodes([shapeRef.current]);
trRef.current.getLayer().batchDraw();
}
}, [isSelected]);
return (
<React.Fragment>
<Rect
onClick={onSelect}
onTap={onSelect}
ref={shapeRef}
{...shapeProps}
draggable
onDragEnd={(e) => {
onChange({
...shapeProps,
x: e.target.x(),
y: e.target.y(),
});
}}
onTransformEnd={(e) => {
// transformer is changing scale of the node
// and NOT its width or height
// but in the store we have only width and height
// to match the data better we will reset scale on transform end
const node = shapeRef.current;
const scaleX = node.scaleX();
const scaleY = node.scaleY();
// we will reset it back
node.scaleX(1);
node.scaleY(1);
onChange({
...shapeProps,
x: node.x(),
y: node.y(),
// set minimal value
width: Math.max(5, node.width() * scaleX),
height: Math.max(node.height() * scaleY),
});
}}
/>
{isSelected && (
<Transformer
ref={trRef}
boundBoxFunc={(oldBox, newBox) => {
// limit resize
if (newBox.width < 5 || newBox.height < 5) {
return oldBox;
}
return newBox;
}}
/>
)}
</React.Fragment>
);
};
const initialRectangles = [
{
x: 10,
y: 10,
width: 100,
height: 100,
fill: "red",
id: "rect1",
},
{
x: 150,
y: 150,
width: 100,
height: 100,
fill: "green",
id: "rect2",
},
];
const App = () => {
const [rectangles, setRectangles] = React.useState(initialRectangles);
const [selectedId, selectShape] = React.useState(null);
const { state } = useConnect();
const checkDeselect = (e) => {
// deselect when clicked on empty area
const clickedOnEmpty = e.target === e.target.getStage();
if (clickedOnEmpty) {
selectShape(null);
}
};
console.log("state", state)
return (
<Stage
width={window.innerWidth}
height={window.innerHeight}
onMouseDown={checkDeselect}
onTouchStart={checkDeselect}
>
<Layer>
{rectangles.map((rect, i) => {
return (
<Rectangle
key={i}
shapeProps={rect}
isSelected={rect.id === selectedId}
onSelect={() => {
selectShape(rect.id);
}}
onChange={(newAttrs) => {
const rects = rectangles.slice();
rects[i] = newAttrs;
setRectangles(rects);
}}
/>
);
})}
</Layer>
</Stage>
)
};
export default connect(App, { injectProps: false });
This is the best way I could make this work for now. If I have some improvements I will post them here for anyone needing this in the future.