next.js 下一个. js Lerna monrepo：模块解析失败：意外标记

ocebsuys 于 2023-03-18 发布在其他

关注(0)|答案(1)|浏览(147)

我在lerna monorepo中添加了一个next + typescript项目。
当我运行lerna build时，它在我的所有包中运行tsc，在我的UI包中运行next build。
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>

我的理解是，这应该工作的开箱即用，我不应该试图自定义巴别塔配置。

next.js

来源：https://stackoverflow.com/questions/72432298/next-js-lerna-monrepo-module-parse-failed-unexpected-token

1条答案

按热度按时间

g6ll5ycj1#

使用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)],
};

你可以在这里阅读更多。

赞(0）回复(0）举报 2023-03-18

我来回答

next.js 下一个. js Lerna monrepo：模块解析失败：意外标记

1条答案

2023年更新：

相关问题

热门标签

最新问答