How do I set multiple entry points for webpack in next.config.js?

[didimedina]

I'm trying to get webpack to compile one lib before the rest. From what I understand, in webpack5 you can do that by setting multiple entries like this:

const config = {
  entry: {
    app: {
      import: path.join(__dirname, "src", "index.js"),
      dependOn: "vendor",
    },
    vendor: ["react", "react-dom"],
  },
};

Based on the little information, I found here on NextJS docs and the web, I assumed something like this would work in the context of my project in the next.config.js file:

/** @type {import('next').NextConfig} */

const path = require("path");

module.exports = {
  reactStrictMode: true,
  webpack: (config, options) => {

    const newWebpackConfig = {
      entry: {
        app: {
          import: path.join(__dirname, "pages", "_app.tsx"),
          dependOn: "vendor",
        },
        vendor: ["tailwindcss"],
      }
    }

    console.log(options.webpack)
    Object.assign(options.webpack, newWebpackConfig)

    return config
  },
}

But running into errors when I run npm run dev ... what's the proper way to set multiple entry points for a next js using webpack5?

My desired outcome is that Tailwind compiles before the rest of my packages. Would appreciate any help I can get on this 🙌🏼

[yunsii]

#774 (comment) This is work for me.