Uncaught Error: Cannot find module 'canvas' in Electron 19

[ajoslin103]

I'm having trouble getting started with konva & react-konva in my Electron project based on the boilerplate: https://github.com/hellosoftware-io/electron-typescript-react-mui

Here is a minimal repo showing the problem: https://github.com/ajoslin103/electron-typescript-react-mui

I managed to get the webpack config to work (see below), so the app will compile and launch, but I get a runtime error (whether i have canvas installed or not, does not change the error)

Can anyone say what I should do the fix this problem?

runtime error:

Uncaught Error: Cannot find module 'canvas'
    at webpackMissingModule (index-node.js:4:24)
    at ./node_modules/konva/cmj/index-node.js (index-node.js:4:24)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/react-konva/lib/ReactKonva.js (ReactKonva.js:24:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/renderer/components/KonvaThumbnail.tsx (KonvaThumbnail.tsx:5:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

which shows as:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const _FullInternals_1 = require("./_FullInternals");
const Canvas = require("canvas"); <==================================== error's here
const canvas = Canvas['default'] || Canvas;
global.DOMMatrix = canvas.DOMMatrix;
const isNode = typeof global.document === 'undefined';
if (isNode) {
    _FullInternals_1.Konva.Util['createCanvasElement'] = () => {
        const node = canvas.createCanvas(300, 300);
        if (!node['style']) {
            node['style'] = {};
        }
        return node;
    };
    _FullInternals_1.Konva.Util.createImageElement = () => {
        const node = new canvas.Image();
        return node;
    };
}
exports.default = _FullInternals_1.Konva;

webpack config

import * as path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { Configuration as WebpackConfiguration, IgnorePlugin } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

const rootPath = path.resolve(__dirname, "..");

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    mainFields: ["main", "module", "browser"],
  },
  entry: path.resolve(rootPath, "src/renderer", "index.tsx"),
  target: "electron-renderer",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        include: /src/,
        use: {
          loader: "ts-loader",
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  devServer: {
    static: {
      directory: path.resolve(rootPath, "dist/renderer"),
      publicPath: "/",
    },
    port: 4000,
    historyApiFallback: true,
    compress: true,
  },
  output: {
    path: path.resolve(rootPath, "dist/renderer"),
    filename: "js/[name].js",
  },
  plugins: [
    new HtmlWebpackPlugin({ template: path.resolve(rootPath, "index.html") }),
    new IgnorePlugin({
      resourceRegExp: /canvas|jsdom/,
      contextRegExp: /konva/,
    }),
  ],
  externals: { knex: "commonjs knex" },
};

export default config;

[ajoslin103]

switching the config to no longer ignore, but supply differently

import * as path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

const rootPath = path.resolve(__dirname, "..");

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    mainFields: ["main", "module", "browser"],
  },
  entry: path.resolve(rootPath, "src/renderer", "index.tsx"),
  target: "electron-renderer",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        include: /src/,
        use: {
          loader: "ts-loader",
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  devServer: {
    static: {
      directory: path.resolve(rootPath, "dist/renderer"),
      publicPath: "/",
    },
    port: 4000,
    historyApiFallback: true,
    compress: true,
  },
  output: {
    path: path.resolve(rootPath, "dist/renderer"),
    filename: "js/[name].js",
  },
  plugins: [
    new HtmlWebpackPlugin({ template: path.resolve(rootPath, "index.html") }),
  ],
  externals: { 
    knex: "commonjs knex",
    canvas: "commonjs canvas",
  },
};

export default config;

Showed a different error

Uncaught Error: Loading non-context-aware native module in renderer: '/Users/ajoslin/Documents/Als/Development/EPC/Development/electron-typescript-react-mui/node_modules/canvas/build/Release/canvas.node'. See https://github.com/electron/electron/issues/18397.

Which points out the real problem -- the canvas module itself is not context-aware

The canvas module contributors are aware of the problem, but struggling with a solution

Automattic/node-canvas#1981

Automattic/node-canvas#1394