Next.js Lerna monrepo: Module parse failed: Unexpected token

Question

I have added a next + typescript project to a lerna monorepo.

When I run lerna build it runs tsc in all my packages and next build in my UI package.

The tsc part works just fine:

$ 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

However, I get the following error:

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

It looks like next build is having a problem with JSX < in:

>     return (<Container>

My understanding is that this should work out of the box and I should not try to customise the babel config.

nullromo · Accepted Answer · 2023-03-14 22:22:01Z

2

The problem is partially solved by using 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;
  },
});

UPDATE 2023:

Built-in module transpilation is supported as of the release of Nextjs 13.1:

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

You can read more here.

edited Mar 14, 2023 at 22:22

nullromo

2,7374 gold badges25 silver badges55 bronze badges

answered May 30, 2022 at 11:12

Remo H. Jansen

25.2k13 gold badges73 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js Lerna monrepo: Module parse failed: Unexpected token

1 Answer 1

UPDATE 2023:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE 2023:

Comments

Your Answer

Sign up or log in

Post as a guest

Related