Question

今天遇到了类似这样的项目结构

packages
  /app
    pages/
    package.json
  /ui-kit
    pages/
    package.json
  /shared
.babelrc
package.json

root lvl包json定义了workspaces: [packages/*]，其中app和ui-kit都是nextjs应用程序。

我在根lvl package.json中有以下脚本

"dev:app": "next packages/app",
"dev:ui-kit": "next packages/ui-kit"

这些

在我引入shared文件夹之前都可以正常工作，该文件夹本质上包含一些函数/组件等，可以在软件包之间重复使用。一旦将其包含到app或ui-kit中，我就会收到这样的错误

在./packages/shared/index.js

中

模块解析失败：意外的令牌（4:21）您可能需要一个适当的加载程序来处理此文件类型。 |从导入React '反应'| | export default（）=>您好共享！ |

因此，nextjs似乎没有将任何加载程序应用于指向该文件夹的文件夹之外的任何内容。是否有解决此问题的解决方案？即从根文件夹开始，然后根据不同的脚本命令将其指向不同的入口文件？

Answer 1

This other answer在Next.js 9.2+中对我不起作用。我不得不使用一个分叉的软件包而不是称为next-transpile-modules。

您真正要做的就是将yarn add next-transpile-modules放入每个软件包中，然后使用以下内容添加/编辑next.config.js：

// next.config.js
const withTM = require('next-transpile-modules')(['somemodule', 'and-another']); // pass the modules you would like to see transpiled

module.exports = withTM();

如果要使用Next.js默认值，甚至可能甚至不需要babel.config.js到根目录中。

该软件包的工作方式是实现一个自定义的Webpack配置as described in the official documentation，以告知webpack监视您在上面next.config.js中定义的模块的目录。

Answer 2

问题是Babel不会转译下一个文件夹之外的代码。这是因为.babelrc文件并未考虑在内，即使它位于代码的根目录。

但是，如果您改而使用babel.config.js文件（自Babel 7版以来的建议）并将其放在代码的根目录（有效替换.babelrc文件），则可以使用此插件：

https://github.com/josephluck/next-plugin-custom-babel-config

我已经做到了，并且效果很好！

在纱线工作区中使用next.js

2 个答案: