Next.js Discord

Discord Forum

Custom Webpack - Output bundle file that is IIFE

Unanswered
Common paper wasp posted this in #help-forum
Open in Discord
Common paper waspOP
I am trying to use my next.config.js with a custom webpack config so that I can output a separate JS file for some widgets that I am developing inside my NextJS app. The point being these widgets can be loaded in to a third party site and run. I've managed to get the file to output but it appears that it isn't outputting the webpack bootstrap function in the file (webpack.js that is created).

My config looks like this:
webpack: (config, options) => {
    config.output.enabledLibraryTypes?.push("window");

    const originalEntry = config.entry;

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

      return {
        ...entries,
        widgets: {
          import: "./src/widgets.js",
          dependOn: undefined,
          filename: "../public/widgets.js",
          library: {
            name: "WidgetName",
            type: "window",
            export: "default",
          },
        },
      };
    };
    return config;


Can anyone offer any insight? I see there is an iife option in the Webpack docs but this seems to break if I try and put it my code. How can I go about bundling webpack.js in to my bundle file?

0 Replies