Distributing a next.js app via NPM

[evantahler]

(related to and coppied from #11411)

Hello!

We are looking at distributing our next.js application via NPM, but are having trouble getting webpack to work properly when running next from /within/ node_modules. We want to allow folks to run next dev and next build in our project so they can add plugins and modify behavior - meaning we can't run next build and ship that ourselves. Our users would install peerDependencies which would be bundled into the next application.

The goal is to have something like this:

---

I've published next-subproject-example (github) to npm which is a very simple next.js application with one page and no custom config.

1. Make a new project with the following package.json, which aims to consume next-subproject-example

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cd node_modules/next-subproject-example && npm run dev",
    "build": "cd node_modules/next-subproject-example && npm run prepare"
  },
  "dependencies": {
    "next-subproject-example": "latest"
  },
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^13.9.5",
    "@types/react": "^16.9.26"
  }
}

2. npm install
3. npm run dev

[evantahler]

I've got the demo project working now!

It looks like the webpack rule that next uses explicitly ignores all files within node_modules. We can metaprogram around this allow our plugin to be transpiled with a bit of hack in next.config.js:

// from next.config.js

module.exports = {
  webpack: (config) => {
    const rule = config.module.rules[0];
    const originalExcludeMethod = rule.exclude;
    config.module.rules[0].exclude = (moduleName, ...otherArgs) => {
      // we want to explicitly allow our plugin
      if (moduleName.indexOf("node_modules/next-subproject-example") >= 0) {
        return false;
      }

      // otherwise, use the original rule
      return originalExcludeMethod(moduleName, ...otherArgs);
    };

    return config;
  },
};

[thomvaill]

Thanks a lot for your solution! I had the same issue.

I created a PR that fixes this bug: #19749

[ivanjeremic]

I tried the above solution with the programmatic API (Custom Server) const app = next({ conf: webpack: SOLUTION }) but I still get You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Any ideas?

[BrunoQuaresma]

@evantahler can you share your solution?

[evantahler]

We wrote up our process here - https://www.grouparoo.com/blog/nextjs-plugins

[andreazanti]

Thanks for your solution. Great!

I've similar situation: i have a core next js project( that is shipped as an npm package, like you said).
This core performs some calls to an endpoint, receiving back the paths of the component defined by the users in the current project. Then With dynamic import the template are used by core.

But i have problem with weback, receiving this error:
"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders"

Could you provide some help?

[thomvaill]

What kind of file are you trying to import?

[andreazanti]

A Jsx file! I've solved extending the default configuration of webpack. Anyway thank you very much :)

[hemsh09]

Hi how did you solve this.I am having similar issue. @andreazanti

[hahnbeelee]

I'm also trying to run next within a node_module, but am running into the same issue. +1 to @andreazanti can you share your solution?

[nkpremices]

Running into the same error as well

[ashishbairwa]

I need some help on the same. I'm trying to build an app on next-js where i'm using SSR components. I want to build an npm package out of it which I can use in my old react project.
cc @evantahler

[timheerwagen]

Is there any way to make it work with TurboPack? Currently, I am copying the node_modules/next-project folder into a temporary folder, which works with npm but not with pnpm due to the stricter package structure.