Run Nextron inside NX monorepo

[andirsun]

Hey! I am trying to use nextron project inside NX monorepo, but there is an error that is not letting me make any progress:

I created this minimal repository to reproduce the error: 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 actually working but at this point there is no conection with NX features like modules/libs sharing etc, thats why nx team creates this plugin for Next projects https://github.com/erkobridee/nx-nextjs all you need to do in order to integrate Next project with NX features is to export next.config.js using this function:

// next.config.js
// 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 = {}

// This is working
// module.exports = nextConfig

// This is not working
module.exports = withNx(nextConfig);

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

❯ npm run start:nextron 

> [email protected] start:nextron
> nx dev nextron


> nx run nextron:dev

> [email protected] 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)

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target dev for project nextron

[andirsun]

Also I created a bug in NX repo as well https://github.com/nrwl/nx/issues/16064

[alexis-piquet]

Hi, nice to read you again ;). Have you tried to log the webpack config in you next.config.js ?

module.exports = {
  webpack: (config, { isServer }) => {
    console.log(config)
    return config
  },
}

[andirsun]

Sure, this is the output. output.txt

[alexis-piquet]

I've pulled your repository to try it on my side and this is what I've found:

You have missed to give options related to the NX usage.

This is where the error coming from:

    console.log('HERE WE ARE', { targetOptions })
    // If we are running serve or export pull the options from the dependent target first (ex. build)
    if (targetOptions.devServerTarget) {
        const devServerTarget = (0, devkit_1.parseTargetString)(targetOptions.devServerTarget, graph);
        return getNxContext(graph, devServerTarget);
    }
    else if (['@nrwl/next:server', '@nrwl/next:export'].includes(targetConfig.executor)) {
        const buildTarget = (0, devkit_1.parseTargetString)(targetOptions.buildTarget, graph);
        return getNxContext(graph, buildTarget);
    }
    else {
        throw new Error('Could not determine the config for this Next application.'); <--------- THE ERROR WAS THROWN HERE
    }

❯ npm run start:nextron

> [email protected] start:nextron
> nx dev nextron


> nx run nextron:dev

> [email protected] dev
> nextron
ready - started server on 0.0.0.0:8888, url: http://localhost:8888
HERE WE ARE { targetOptions: { script: 'dev' } }
Error: Could not determine the config for this Next application.
    at getNxContext (/home/alex/playground/projects/nx-nextron/node_modules/@nrwl/next/plugins/with-nx.js:65:15)
    at /home/alex/playground/projects/nx-nextron/node_modules/@nrwl/next/plugins/with-nx.js:106:106
    at Generator.next (<anonymous>)
    at fulfilled (/home/alex/playground/projects/nx-nextron/node_modules/tslib/tslib.js:164:62)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target dev for project nextron

I'm not aware with nx-monorepo but I'll like to help you and I'm very curious about the result.

I'll continue to investigate on it to help you to solve it!

[alexis-piquet]

So in my opinion the issue coming from your json files to configure nx, still on it 👀

[andirsun]

@alexis-piquet Thanks for investigate this!, hopefully we can create a PR to add support out of the box when using NX repo.

[rares-lupascu]

+1

[alexis-piquet]

Sorry @andirsun I was hospitalised (don't worry I'm good now) recently and couldn't recover from your issue. I'll get back to it as soon as possible ;). For sure!