Compilation Failure after Updating to Next.js 13.5.5-canary.19 in NX Monorepo

kingsleykbc commented 1 year ago

Current Behavior

After updating Next.js to version 13.5.5-canary.19 within our NX monorepo, our project no longer compiles as expected. The issue arises specifically when pages try to import components from shared libraries. We're encountering a module parse failure related to ui-context.tsx and other libs within our shared library. This issue was not present prior to the update.

The application fails to compile, indicating a module parse failure and suggesting the absence of a necessary loader for handling specific file types within our shared libraries.

Expected Behavior

The application compiles successfully, and pages correctly import and render components from shared libraries, without module parse failures.

GitHub Repo

No response

Steps to Reproduce

Create nx next js app on13.4.11-canary.1
Create a react lib and import components from it into the pages.
Update Next version to latest.
Observe the error logs

Nx Report

NX  Falling back to ts-node for local typescript execution. This may be a little slower.
  - To fix this, ensure @swc-node/register and @swc/core have been installed

 >  NX   Report complete - copy this into the issue template

   Node   : 18.16.1
   OS     : win32 x64
   npm    : 9.5.1
   Hasher : Native

   nx                 : 16.2.1
   @nx/js             : 16.2.1
   @nx/jest           : 16.2.1
   @nx/linter         : 16.2.1
   @nx/workspace      : 16.2.1
   @nx/cypress        : 16.2.1
   @nx/devkit         : 16.2.1
   @nx/eslint-plugin  : 16.2.1
   @nx/next           : 17.0.0-beta.6
   @nx/react          : 16.2.1
   @nx/storybook      : 16.2.1
   @nrwl/tao          : 16.2.1
   @nx/vite           : 16.2.1
   @nx/web            : 16.2.1
   typescript         : 5.0.4
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nx/next@17.0.0-beta.6
     - @nrwl/next@17.0.0-beta.6

   To fix this, run `nx migrate nx@17.0.0-beta.6`

Failure Logs

○ Compiling /(pages)/(others)/page ...
 ⨯ ../../libs/shared/ui/src/contexts/ui-context/ui-context.tsx
Module parse failed: Unexpected token (6:7)
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 { useModals } from '../modals-context/modals-context';
|
> export interface UIContextProviderProps {
|   children: ReactNode;
| }
Import trace for requested module:
../../libs/shared/ui/src/contexts/ui-context/ui-context.tsx

Package Manager Version

npm --9.5.1

Operating System

[ ] macOS
[ ] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

The issue surfaced after updating to a canary version of Next.js; it was not present when using the stable release. We suspect there could be incompatibilities or required configurations that were introduced in the new version, affecting how modules are parsed and compiled, specifically in a monorepo setting using NX.

Attached is our project’s dependency graph for a visual representation of our setup.

astrodomas commented 1 year ago

duplicate of https://github.com/nrwl/nx/issues/19555 solution can be found here: https://github.com/nrwl/nx/issues/16658

basically add your package names to next.config.js => transpilePackages: ["ui"] and it will work.

The problem is that the libs are not included into next compiling process and 'use client' is not compiled

github-actions[bot] commented 9 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx