Running Nextron(Next js library) inside NX monorepo

andirsun commented 1 year ago

Current Behavior

Hey! I am trying to use a nextron (https://github.com/saltyshiomix/nextron) project inside NX monorepo, nextron is a library that allow devs to run nextjs instance on electron.

I created this minimal repository to reproduce the error I am facing: https://github.com/andirsun/nx-nextron, it has a simple NX monorepo workspace with a single nextron project inside.

If you clone the repo and then try to run npm run start:nextron is working normally but at this point there is no connection with NX features like modules/libs sharing etc, thats why I want to modify the next.config.js using this function to use nx-next integration

// next.config.js
const { withNx } = require('@nrwl/next/plugins/with-nx')

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {}

// default next config export (This is working) 
// module.exports = nextConfig

// nx-next confif export (This is not working)
module.exports = withNx(nextConfig);

But if you try to export the next config using withNx(nextConfig) syntaxis, nextron stop working because of the renderer command next

❯ npm run start:nextron 

> nx-test@0.0.0 start:nextron
> nx dev nextron

> nx run nextron:dev

> nextron@1.0.0 dev
> nextron
ready - started server on 0.0.0.0:8888, url: http://localhost:8888
Error: Could not determine the config for this Next application.
    at getNxContext (/Users/andirsun/projects/streamline/nx-nextron/node_modules/@nrwl/next/plugins/with-nx.js:63:15)
    at /Users/andirsun/projects/streamline/nx-nextron/node_modules/@nrwl/next/plugins/with-nx.js:104:106
    at Generator.next (<anonymous>)
    at fulfilled (/Users/andirsun/projects/streamline/nx-nextron/node_modules/tslib/tslib.js:164:62)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

How can I modify the withNx(nextConfig) function to work with nextron ?

Expected Behavior

I suppose to run next and nextron normally with the same exported next configuration using module.exports = withNx(nextConfig)

GitHub Repo

https://github.com/andirsun/nx-nextron

Steps to Reproduce

Clone the repo https://github.com/andirsun/nx-nextron
npm install
npm run start:nextron (working)
To reproduce the error: go to next.config.js file and export next config as `module.exports = withNx(nextConfig)
run again npm run start:nextron
See the error

Nx Report

❯ nx report 

 >  NX   Report complete - copy this into the issue template

   Node : 16.16.0
   OS   : darwin arm64
   npm  : 8.11.0

   nx                      : 15.8.9
   @nrwl/js                : 15.8.9
   @nrwl/jest              : 15.8.9
   @nrwl/linter            : 15.8.9
   @nrwl/workspace         : 15.8.9
   @nrwl/cli               : 15.8.9
   @nrwl/cypress           : 15.8.9
   @nrwl/devkit            : 15.8.9
   @nrwl/eslint-plugin-nx  : 15.8.9
   @nrwl/next              : 15.8.9
   @nrwl/react             : 15.8.9
   @nrwl/tao               : 15.8.9
   typescript              : 4.9.5

Failure Logs

❯ npm run start:nextron 

> nx-test@0.0.0 start:nextron
> nx dev nextron

> nx run nextron:dev

> nextron@1.0.0 dev
> nextron
ready - started server on 0.0.0.0:8888, url: http://localhost:8888
Error: Could not determine the config for this Next application.
    at getNxContext (/Users/andirsun/projects/streamline/nx-nextron/node_modules/@nrwl/next/plugins/with-nx.js:63:15)
    at /Users/andirsun/projects/streamline/nx-nextron/node_modules/@nrwl/next/plugins/with-nx.js:104:106
    at Generator.next (<anonymous>)
    at fulfilled (/Users/andirsun/projects/streamline/nx-nextron/node_modules/tslib/tslib.js:164:62)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Additional Information

No response

PaulACoroneos commented 1 year ago

Seeing same issue as well when trying to upgrade from nx 15.8.

I also tried playing with tsconfig to use swc and tsc as compilers and also tried targetting "node" but no dice.

jonsoku-dev commented 1 year ago

same issue

because changed function withNx...

jaysoo commented 1 year ago

Thanks for the repro, we'll investigate this.

raphzandrade commented 1 year ago

We are also experiencing difficulties with the withNx function while attempting to upgrade our organization's repository.

Hamzakh777 commented 1 year ago

A quick fix I found was to do the following:

// next.config.js
...

const getConfig = () => {
  if (process.env.WITHOUT_NX) {
    return nextConfig;
  } else {
    return withNx(nextConfig);
  }
}

module.exports = getConfig();

and then simply set the env variables WITHOUT_NX to true when running the cypress component testing to true.

andirsun commented 1 year ago

@Hamzakh777 Thanks! but I need to run the project using NX configuration.

raphzandrade commented 1 year ago

@Hamzakh777 Without it, the library imports will not function properly, so this is not a viable workaround for me.

TkDodo commented 1 year ago

We are seeing a similar issue when upgrading nx from 15.8.6 to 16.3.2 (even without nextron): withNx now returns a NextConfigFn, so it's different than other plugins and different from before, where it returned a NextConfig directly.

I tried to apply solutions described here:

https://github.com/nrwl/nx/issues/15794

but with no success.

What we have is:

const { withNx } = require('@nx/next/plugins/with-nx')

const nextConfig = { ... }

module.exports = async (phase, context) => {
  const nxConfig = await withNx(nextConfig)(phase, context)
  return nxConfig
}

it doesn't really matter what's inside the nextConfig. I tried with ours, with an empty one and with a default one ...
the error is always coming from withNx:

Error: Could not determine the config for this Next application.
    at getNxContext (~/node_modules/.pnpm/@nx+next@16.3.2/node_modules/@nx/next/plugins/with-nx.js:70:15)
    at ~/node_modules/.pnpm/@nx+next@16.3.2/node_modules/@nx/next/plugins/with-nx.js:95:106
    at Generator.next (<anonymous>)
    at fulfilled (~/node_modules/.pnpm/tslib@2.4.0/node_modules/tslib/tslib.js:115:62)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Any help is really appreciated, thanks 🙏

ZackDeRose commented 1 year ago

Hey folks! @TkDodo just pinged me about this, so I took a look. I was able to make a fresh Next app with the @nx/next:application generator that works in dev mode (looks like we call this target serve in a fresh generated app).

Here's the next.config.js file that was generated:

//@ts-check

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

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

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

And here's the modifications I made to match the issue as reported:

//@ts-check

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

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {};

module.exports = withNx(nextConfig);

(^ repo: https://github.com/ZackDeRose/next-nx-bug - for dev mode: nx serve test)

Both appear to work as expected. If I'm missing something though let me know and I can relay to our team!

ZackDeRose commented 1 year ago

@andirsun I cloned down your repo and saw the error as well.

In your case, this looks to be because you are ultimately running nextron while our plugin seems to expect you to be using one of the expected @nx/next executors, so when the task runs, it is not able to use the info from the nx graph and it errors out.

I was able to make it work via a hack: by removing your dev npm script and instead adding the following configuration in your project.json:

{
  "name": "nextron",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/nextron",
  "projectType": "application",
  "targets": {
    // ...
    "dev": {
      "executor": "nx:run-commands",
      "options": {
        "command": "nextron",
        "devServerTarget": "nextron:build",
        "cwd": "apps/nextron"
      }
    }
  },
  "tags": []
}

^ having a devServerTarget option present on the target is the "hack" that I'm using to end-around the fact that we're not using the expected @nx/next targets here. I'll bring up options for a fix on this with the team, but hopefully this can get you through in the meantime.

My fork of your minimal repro repo: https://github.com/ZackDeRose/nx-nextron

jaysoo commented 1 year ago

To be clear, it was never our intention that withNx works without our own, specific executors. However, after some thought, I think it makes sense to open up support so things continue to work for workspaces that rely on such behavior.

This PR relaxes the constraint, and should work for the cases outlined in this issue. https://github.com/nrwl/nx/pull/17819

TkDodo commented 1 year ago

To be clear, it was never our intention that withNx works without our own, specific executors.

hmm, it worked just fine with nx 15 tough :/

so, here's our situation:

we are not using @nx/next:build to build our project - we are just running npx next build in an nx:run-commands executor
with that, withNx was breaking for us when starting our dev task.

the workaround that worked for us was:

create a dummy build target:

"build-for-nx": {
    "executor": "@nx/next:build",
    "outputs": ["{options.outputPath}"],
    "options": {},
    "defaultConfiguration": "production"
},

note: it needs an empty options object or it dies as well.

wire this target up to your dev task via the devServerTarget option. Given an app named my-app:

"dev": {
    "executor": "nx:run-commands",
    "options": {
        "commands": [
            "NODE_OPTIONS=--max-old-space-size=8192 npx next dev,
        ],
        "cwd": "packages/my-app",
        "devServerTarget": "my-app:build-for-nx"
    }
},

and then it started to work again.

jaysoo commented 1 year ago

@TkDodo I think it's a legit use case, just not something we designed for. I merged the PR to add support for all executors, so it will be fixed once we release a new version this week or next week.

The dummy target and dummy options won't be needed anymore either. I added e2e test to ensure support moving forward.

github-actions[bot] commented 1 year 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