Add "use client" with webpack using some property in next.config.js

[VitorFigm]

Goals

Make it possible to export a config in next.config.js with a property that uses webpack to add the "use client" to client components from a third-party component library and allow server components to import it directly without the need for wrapper files.

Non-Goals

No response

Background

To use NextJS 13 with client components libraries like Prime React or React Bootstrap, since they are not exporting their components with the "use client" directive, we need to create a file like this:

export * from 'my-component-library/some-component'

Besides that doing this sucks, this, for instance, breaks the VScode auto import extension (it doesn't reach components exported this way).

Proposal

It's easy to use webpack loaders to fix that:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: function (config, options) {
    config.module.rules.push({
      test: [/node_modules\/primereact\//], // here goes the regex for the modules we want to add the "use client"
      loader: require.resolve("./loaders/use-client-loader.js"),
    });
    return config;
  },
};

module.exports = nextConfig;

/// And then we create a loader in loaders/use-client-loader.js
module.exports = function (source) {
  return `"use client";\n` + source;
};

So, one way of implementing that would be having a property in next.config.js that just abstracts this webpack loader. It could be something like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transformClientModules: [/primereact\//],
};

module.exports = nextConfig;

and this property will pass this array to the test property of the webpack loader.

[jamesmaher-dd]

+1 to this proposal - @VitorFigm is your custom loader how you're solving for this now? can't find any other docs on this, but having the same issue.

[VitorFigm]

Yes, and it did solve the problem.