How do I configure a Nextjs project to transpile a monorepo project?

Question

The monorepo I am using is a complete Nextjs app in itself.

For the use case I am looking for,

some_previous_project

is a package defined in package.json installed from git. I only need to import the utility functions and components from it. The project was done in es6 so transpiling is necessary for the execution. I need every component or function imported from this package to be transpiled.

The configuration I am currently using is:

const withTM = require('next-transpile-modules')(['some_previous_project']);

const withPlugins = require('next-compose-plugins');

const nextConfig = {
  target: 'serverless',
  webpack(config) {
    return config;
  },
};

module.exports = withPlugins([withTM], nextConfig);

This throws the following error:

C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project>npm run dev

> trendline-frontend@0.1.0 dev C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project
> next dev

Error: next-transpile-modules - an unexpected error happened when trying to resolve "some_previous_project"
Error: Can't resolve 'some_previous_project' in 'C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project'
    at getPackageRootDirectory (C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next-transpile-modules\src\next-transpile-modules.js:70:11)
    at Array.map (<anonymous>)
    at generateModulesPaths (C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next-transpile-modules\src\next-transpile-modules.js:81:33)
    at withTM (C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next-transpile-modules\src\next-transpile-modules.js:110:26)
    at C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next-compose-plugins\lib\compose.js:100:23
    at Array.forEach (<anonymous>)
    at composePlugins (C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next-compose-plugins\lib\compose.js:77:11)
    at C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next-compose-plugins\lib\index.js:22:38
    at normalizeConfig (C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next\dist\next-server\server\config.js:7:494)
    at loadConfig (C:\Users\prajwaldankit\Desktop\truemark\ecom-078\current_project\node_modules\next\dist\next-server\server\config.js:8:131)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! current_project@0.1.0 dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the current_project@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\prajwaldankit\AppData\Roaming\npm-cache\_logs\2020-12-11T06_38_48_407Z-debug.log

Answer 1

Your monorepo is wrongly set up as it states in the error message. If you want to use next-transpile-modules with NextJS and monorepo you need to make sure that your monorepo is correctly set up, for which you can use Lerna if you're using npm or yarn workspaces if you're using yarn .

Once that's correctly set up, you need to point your package "main" to be the source of your some_previous_project in order for TM to pick them up. An alternative is to set it up so that your other project creates an ES5 build each time it's changed, but that can quickly occupy your CPU. Another option is to create a Webpack alias in your Next project's config for each of your monorepo modules to resolve imports to src (or wherever your source is), which is what I have done for a project where Next is the development environment and packages have to be able to deploy separately too.

To solve your problem however you first need to make it so that your package resolves, which means you need to set up your monorepo correctly.