如何配置 Nextjs 项目以转译 monorepo 项目？答案

【问题标题】：How do I configure a Nextjs project to transpile a monorepo project?如何配置 Nextjs 项目以转译 monorepo 项目？
【发布时间】：2020-12-11 06:42:37
【问题描述】：

我使用的 monorepo 本身就是一个完整的 Nextjs 应用程序。

对于我正在寻找的用例，

some_previous_project

是从 git 安装的 package.json 中定义的包。我只需要从中导入实用功能和组件。该项目是在 es6 中完成的，因此执行时需要转译。我需要转译从此包中导入的每个组件或函数。

我目前使用的配置是：

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);

这会引发以下错误：

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

【问题讨论】：

标签： javascript reactjs webpack next.js

【解决方案1】：

您的 monorepo 设置错误，如错误消息中所述。如果你想将next-transpile-modules 与 NextJS 和 monorepo 一起使用，你需要确保你的 monorepo 设置正确，如果你使用的是 npm，你可以使用 Lerna，如果你使用的是 @987654324，你可以使用 yarn workspaces @。

正确设置后，您需要将您的包裹 "main" 指向您的 some_previous_project 的来源，以便 TM 接收它们。另一种方法是设置它，以便您的其他项目在每次更改时创建一个 ES5 构建，但这会很快占用您的 CPU。另一种选择是在 Next 项目的配置中为每个 monorepo 模块创建一个 Webpack 别名，以将导入解析为 src（或您的源代码所在的任何位置），这是我为 Next 是开发环境的项目所做的，并且包也必须能够单独部署。

然而，要解决您的问题，您首先需要解决您的包，这意味着您需要正确设置您的 monorepo。

【讨论】：