Webpack configuration for building an embeddable widget

[cladams7905]

Summary

I am trying to create an embeddable widget that others can use on their site by creating a separate webpack entry within my project, however I keep on getting this error with my next.config.mjs file: "Entry widget depends on main, but this entry was not found." I have confirmed that my path to the widget entry is correct, but it still is not working correctly. Any ideas why?

Here is my next.config.mjs:

`import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, { isServer }) => {
if (!isServer) {
const originalEntry = config.entry;

  config.entry = async () => {
    let entries = await originalEntry();

    // Make sure 'main' exists and is not empty
    if (!entries["main"] || entries["main"].length === 0) {
      entries["main"] = path.resolve("./app/layout.tsx");
    }

    // Add the widget entry
    if (!entries["widget"]) {
      entries["widget"] = path.resolve("./app/_widgets/widget.js");
    }

    console.log("Entries after modification:", entries); // Debugging
    return entries;
  };

  // Output the widget bundle to the 'dist' folder
  config.output = {
    ...config.output,
    filename: (pathData) => {
      return pathData.chunk.name === "widget"
        ? "widget/[name].bundle.js"
        : "[name].js";
    },
    path: path.resolve(__dirname, "dist"),
  };
}

return config;

},
};

export default nextConfig;
`

Additional information

No response

Example

No response