nx: On nx 15.8.7 can't build Next app (13.1.6 nor 13.2.4)

Current Behavior

I can no longer build my Nextjs app with nx 15.8.7. I guess it’s related to previous issues reported in the Nextjs repo and this PR #15650.

Expected Behavior

I can build the app.

GitHub Repo

No response

Steps to Reproduce

May provide a repro later if I have time.

Nx Report

❯ pnx 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.14.2
   OS   : darwin arm64
   pnpm : 7.29.0

   nx                      : 15.8.7
   @nrwl/js                : 15.8.7
   @nrwl/jest              : 15.8.7
   @nrwl/linter            : 15.8.7
   @nrwl/workspace         : 15.8.7
   @nrwl/cli               : 15.8.7
   @nrwl/cypress           : 15.8.7
   @nrwl/devkit            : 15.8.7
   @nrwl/esbuild           : 15.8.7
   @nrwl/eslint-plugin-nx  : 15.8.7
   @nrwl/nest              : 15.8.7
   @nrwl/next              : 15.8.7
   @nrwl/node              : 15.8.7
   @nrwl/react             : 15.8.7
   @nrwl/rollup            : 15.8.7
   @nrwl/storybook         : 15.8.7
   @nrwl/tao               : 15.8.7
   @nrwl/web               : 15.8.7
   @nrwl/webpack           : 15.8.7
   @nrwl/nx-cloud          : 15.2.3
   typescript              : 4.9.5

Failure Logs

pnx run front-legacy:build --skip-nx-cache

 >  NX   --skip-nx-cache disables the connection to Nx Cloud for the current run.

   The remote cache will not be read from or written to during this run.


> nx run front-legacy:build:production


./src/components/epic/app-worker/onboarding/specialties/hooks/useSpecialtiesNavigation.ts
62:14  Warning: 'i18n' is assigned a value but never used.  @typescript-eslint/no-unused-vars

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info  - Linting and checking validity of types
info  - Creating an optimized production build
Failed to compile.

../../../libs/common/translation/src/lib/locale.ts
Module parse failed: Unexpected token (2: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
| /** i.e.: Europe/Paris */
> export type Timezone = string
| export type Locale = 'en' | 'fr' | 'es' | 'de'
|

Import trace for requested module:
../../../libs/common/translation/src/lib/locale.ts
../../../libs/common/translation/src/index.ts
./src/components/epic/app-worker/profile/details/personal-information/hooks/usePersonalInformation.ts
./src/components/epic/app-worker/profile/details/personal-information/PersonalInformation.tsx

../../../libs/front/api/src/logic/axios/auth/clearCookies.ts
Module parse failed: Unexpected token (1: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
> import type { FrontLegacyRuntimeConfig } from '@front/runtime-config'
| import { getRuntimeConfig } from '@front/runtime-config'
| import type { UserType } from '@front/type/auth'

Import trace for requested module:
../../../libs/front/api/src/logic/axios/auth/clearCookies.ts
../../../libs/front/api/src/logic/index.ts
./src/components/epic/app-worker/shared/worker-app-page/WorkerAppPage.tsx

../../../libs/front/api/src/logic/axios/auth/logoutUser.ts
Module parse failed: Unexpected token (4: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
|
| import { segmentReset } from '@front/logic/segment'
> import type { FrontLegacyRuntimeConfig } from '@front/runtime-config'
| import { getRuntimeConfig } from '@front/runtime-config'
| import type { UserType } from '@front/type/auth'

Import trace for requested module:
../../../libs/front/api/src/logic/axios/auth/logoutUser.ts
../../../libs/front/api/src/logic/index.ts
./src/components/epic/app-worker/shared/worker-app-page/WorkerAppPage.tsx

../../../libs/front/api/src/logic/react-query/queryClient.ts
Module parse failed: Unexpected token (2: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
| import { QueryClient } from '@tanstack/react-query'
> import type { AxiosError } from 'axios'
|
| export const queryClient = new QueryClient({

Import trace for requested module:
../../../libs/front/api/src/logic/react-query/queryClient.ts
./src/components/epic/app-admin/shared/admin-app-page/AdminAppPage.tsx

../../../libs/front/api/src/others/google-maps/useGoogleGeocode.ts
Module parse failed: Unexpected token (1: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
> import type { UseQueryOptions } from '@tanstack/react-query'
| import { useQuery } from '@tanstack/react-query'
|

Import trace for requested module:
../../../libs/front/api/src/others/google-maps/useGoogleGeocode.ts
../../../libs/front/api/src/others/google-maps/index.ts
../../../libs/front/api/src/others/index.ts
./src/components/epic/app-worker/shared/worker-app-page/WorkerAuthGuard.tsx
./src/components/epic/app-worker/shared/worker-app-page/WorkerAppPage.tsx

Additional Information

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 26 (11 by maintainers)

Most upvoted comments

@Serj10GR You’ll need to remove withNx and withSentryConfig from the plugins array. I think it’s better for now to just call each plugin manually.

const { withNx } = require('@nrwl/next/plugins/with-nx');
const nextTranslate = require('next-translate');
const { withSentryConfig } = require('@sentry/nextjs');

module.exports = async (phase, context) => {
  const isProd = process.env.NODE_ENV === 'production';
  const assetPrefix = (isProd && phase !== '') ? phase: undefined;
  const buildId = isProd ? `${assetPrefix.substring(1).replaceAll('/', '-')}` : '';

    const addNx = withNx({
      assetPrefix,
      generateBuildId: async () => buildId,
      poweredByHeader: false,
      publicRuntimeConfig: {
        assetPrefix,
      },
      trailingSlash: true,
      sentry: {
        hideSourceMaps: true,
      },
    });

    let config = await addNx(phase);
    config = await nextTranslate(config);
    config = await withSentryConfig(config, SentryWebpackPluginOptions);

    return config;
};

jaysoo on Mar 28, 2023

We’re releasing a patch for this, which should land today. Sorry for the inconvenience. There are additional e2e tests to cover these cases as well.

jaysoo on Mar 23, 2023

@charleskoehl thanks, at least now I was able to migrate from 13.8.6 to 15.8.5 😃

next step will be to align it to the latest, but I run now into your problem as well,

Serj10GR on Mar 27, 2023

Btw, is this transpilePackages: [‘libs’], needed or should nx handle that for us?

This isn’t needed to use workspace libs, with or without buildable libraries.

Something like this should work with Sentry:

module.exports = async (phase, context) => {
  let updatedConfig = plugins.reduce((acc, fn) => fn(acc), nextConfig);
  updatedConfig = await withNx(updatedConfig)(phase, context);
  updatedConfig = withSentryConfig(updatedConfig, SentryWebpackPluginOptions);
  return updatedConfig;
}

We may need to expose a composePlugins function to make it easier to work with different plugins now that next-compose-plugins isn’t working.

jaysoo on Mar 27, 2023

I could not reproduce with a fresh Nx 14.8.8 repo that I migrated to 15.8.9. I’m guessing the issue is next.config.js since we had to change they return type for withNx plugin function. It used to return a config object, but now it returns a function (so we can access Next.js phases).

This fresh config works:

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withNx } = require('@nrwl/next/plugins/with-nx');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

module.exports = withNx(nextConfig);

But if you tried to compose plugins by calling withNx(...) and using the returned value as a config it will no longer work.

// This won't work since `withNx` returns a function
const configWithNx = withNx({});
module.exports = {
  ...configWIthNx,
  //...
}

// This will work since we are passing the phase down
const configWithNx = withNx({});
module.exports = async (...args) => {
  return {
    ...(await configWithNx(...args))
    //...
  }
};

Also, do not use next-compose-plugins. It hasn’t been updated in years, and does not support the updated config definitions.

If you are running into issues, please share the next config so I can see if there’s anything that needs to be updated.

Update: Added async-await to the code snippet since it was missing.

jaysoo on Mar 27, 2023

I still have issue when trying to migrate from 13.9.6

npx nx migrate 15.8.8 npx nx migrate --run-migrations

Module parse failed: The keyword 'interface' is reserved (12:0)
File was processed with these loaders:
 * ../../../node_modules/next-translate/lib/cjs/plugin/loader.js

Serj10GR on Mar 24, 2023

Having the same challenge on my end. Been trying to reproduce it in a fresh application. Noted my details here on https://github.com/nrwl/nx/issues/15214#issuecomment-1475413286

hoffination on Mar 22, 2023