reactjs - Next.js 勒纳 monrepo : Module parse failed: Unexpected token

Question

我已将 next + typescript 项目添加到 lerna monorepo。

当我运行lerna build时它运行 tsc在我所有的包裹和 next build在我的 UI 包中。

tsc部分工作正常:

$ yarn build
yarn run v1.22.18
$ lerna run build
lerna notice cli v4.0.0
lerna info Executing command in 6 packages: "yarn run build"
lerna info run Ran npm script 'build' in '@xxx/config' in 1.1s:
$ tsc
lerna info run Ran npm script 'build' in '@xxx/domain' in 1.2s:
$ tsc
lerna info run Ran npm script 'build' in '@xxx/utils' in 1.2s:
$ tsc
lerna info run Ran npm script 'build' in '@xxx/components' in 1.0s:
$ tsc
lerna info run Ran npm script 'build' in '@xxx/pages' in 1.0s:
$ tsc

但是，我收到以下错误:

lerna ERR! yarn run build exited 1 in '@xxx/ui'
lerna ERR! yarn run build stdout:
$ next build
info  - Checking validity of types...
info  - Creating an optimized production build...
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
Failed to compile.

../xxx-pages/lib/blog/blog.jsx
Module parse failed: Unexpected token (6:12)
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
| export var Blog = function (props) {
|     var data = props.data;
>     return (<Container>
|       <BlogPosts data={data}/>
|     </Container>);

看起来像next build JSX 有问题 <在:

>     return (<Container>

我的理解是，这应该是开箱即用的，我不应该尝试自定义 babel 配置。

Answer 1

使用next-transpile-modules部分解决了该问题:

const { dependencies } = require('./package.json')

function getModules() {
  return Object.keys(dependencies || [])
               .filter(dependency => dependency.startsWith('@jsdayie/'));
}

const modules = getModules();

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

function getAliases(modulesArray) {
  modulesArray.reduce((prev, next) => {
    return {
      ...prev,
      ...{
        [module]: require.resolve(next)
      }
    };
  }, {
    resolveSymlinks: false
  });
}

module.exports = withTM({
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      ...getAliases(modules)
    };
    return config;
  },
});

2023 年更新:

自 Nextjs 13.1 版本起支持内置模块转译:

const nextConfig = {
  transpilePackages: ['some-package', ...getAliases(modules)],
};

您可以阅读更多here .