im getting a few errors when deploying on github

[katesgo]

Invalid next.config.js options detected: ⚠ Unrecognized key(s) in object: 'images' at "experimental"

Failed to compile.

./node_modules/canvas/build/Release/canvas.node

Import trace for requested module: ./node_modules/canvas/build/Release/canvas.node ./node_modules/canvas/lib/bindings.js ./node_modules/canvas/index.js ./node_modules/jsdom/lib/jsdom/utils.js ./node_modules/fabric/dist/fabric.js ./lib/canvas.ts ./app/App.tsx

Build failed because of webpack errors

even after updating the next.config.mjs and adding environment variable... please help!

[getFrontend]

To fix this problem, You have to make sure you're using the ssroption set to false:

So you page.tsx shold be:

import dynamic from "next/dynamic";

const App = dynamic(() => import("./App"), { ssr: false });

export default App;

and in App.tsx move all the code that was there before to page.tsx

And make sure that your next.config.mjs has a webpack config options for canvas:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals.push({
      "utf-8-validate": "commonjs utf-8-validate",
      bufferutil: "commonjs bufferutil",
      canvas: "commonjs canvas",
    });
    return config;
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "liveblocks.io",
        port: "",
      },
    ],
  },
  typescript: {
    ignoreBuildErrors: true,
  },
};

export default nextConfig;