Nextjs 11.4.0 with next 10.0.7 version next.config not being used

[underfisk]

Current Behavior

Right now i'm having issues with Vercel deploy due to the routes manifest but locally now nextjs config is not being used because i do use next/image component and it requires image domains and i have set all the domains and it doesn't recognize, NOR env variables so i assume the file is not being used
Nx each time i upgrade i do have issues and breaking changes or something does stop working, i'm not sure what happened but in fact next.config is not being process correctly

Expected Behavior

Load the file correctly, allow me to process a build and have all my env vars and image domains correctly

Steps to Reproduce

Simply install all latest versions except nextjs (use 10.0.7) and use Nextjs image component or even try to pass env variables

My next.config.js:

const { nextI18NextRewrites } = require('next-i18next/rewrites')
const localeSubpaths = {}
const withNx = require('@nrwl/next/plugins/with-nx')
module.exports = withNx({
	rewrites: async () => nextI18NextRewrites(localeSubpaths),
	publicRuntimeConfig: {
		localeSubpaths,
	},
	poweredByHeader: false,
	devIndicators: {
		autoPrerender: false,
	},
	env: {
		PUSHER_CLIENT_KEY: process.env.PUSHER_CLIENT_KEY,
		API_URL: process.env.NX_SERVERLESS
			? 'my-api-url'
			: process.env.API_URL,
	},
	images: {
		domains: [
			'localhost',
                          "s3 domains etc etc"
		],
	},
})

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

in vercel I do have one

13:17:47.550 | Traced Next.js server files in: 34844.514ms
-- | --
13:17:47.553 | [Error: ENOENT: no such file or directory, lstat '/vercel/workpath0/dist/dist/apps/app/.next/routes-manifest.json'] {
13:17:47.554 | errno: -2,
13:17:47.554 | code: 'ENOENT',
13:17:47.554 | syscall: 'lstat',
13:17:47.554 | path: '/vercel/workpath0/dist/dist/apps/app/.next/routes-manifest.json'
13:17:47.554 | }
13:17:50.227 | Done with "package.json"

Now locally I have the fact that it does not load images throwing

Unhandled Runtime Error
Error: Invalid src prop (https://mys3url.amazonaws.com/etcetc) on `next/image`, hostname "mys3url.etcetc" is not configured under images in your `next.config.js`
See more info: https://err.sh/next.js/next-image-unconfigured-host

If i do print the process env, its empty even though i'm passing variables

Environment

Node : 14.15.5
OS : darwin x64
pnpm : 5.18.3

nx : 11.2.12
@nrwl/angular : Not Found
@nrwl/cli : 11.4.0
@nrwl/cypress : Not Found
@nrwl/devkit : Not Found
@nrwl/eslint-plugin-nx : 11.4.0
@nrwl/express : Not Found
@nrwl/jest : 11.4.0
@nrwl/linter : 11.4.0
@nrwl/nest : 11.4.0
@nrwl/next : 11.4.0
@nrwl/node : 11.4.0
@nrwl/react : 11.4.0
@nrwl/schematics : Not Found
@nrwl/tao : 11.4.0
@nrwl/web : 11.4.0
@nrwl/workspace : 11.4.0
typescript : 4.0.7

[sebacruz]

I am also facing the same issue.

[underfisk]

@FrozenPandaz Any news on this? This is important and seems that happen after upgrading to the latest versions as you suggested among CLI and others

[underfisk]

@FrozenPandaz Just a small info that might help, so if you use 10.0.8 (which i assume the 11.4.0 of nrwl next has upgraded) they have a bug which don't allow builds, you can read that on the issue i have raised in nextjs repo so it will probably require a rollback

Another note that i have found is that after the nrwl/next export command is executed it uses next/export and it does correctly but after when it tries to ls stat or even check for the routes.manifest, check that it isn't going on the right path
info - using build directory: /Users/rodrigo/Documents/trackonperformance/dist/apps/app/.next

Cannot find module '/Users/me/Documents/trackonperformance/dist/apps/app/.next/serverless/pages-manifest.json'
Require stack:
- /Users/me/Documents/trackonperformance/node_modules/.pnpm/next@10.0.8_e6b2880af642a3740f93362e5227e5f1/node_modules/next/dist/export/index.js
- /Users/me/Documents/trackonperformance/node_modules/.pnpm/@nrwl/next@11.5.1_335f662e9075987fc147bd85187f1d13/node_modules/@nrwl/next/src/executors/export/export.impl.js
- /Users/me/Documents/trackonperformance/node_modules/.pnpm/@nrwl/tao@11.5.1/node_modules/@nrwl/tao/src/shared/workspace.js
- /Users/me/Documents/trackonperformance/node_modules/.pnpm/@nrwl/tao@11.5.1/node_modules/@nrwl/tao/src/commands/run.js
- /Users/me/Documents/trackonperformance/node_modules/.pnpm/@nrwl/tao@11.5.1/node_modules/@nrwl/tao/index.js
- /Users/me/Documents/trackonperformance/node_modules/.pnpm/@nrwl/cli@11.5.1/node_modules/@nrwl/cli/lib/run-cli.js

So the serveless folder is not even created and so the files are obviously not found but i'm not sure if this is really related with Nextjs or not, exports are simply throwing this

[kirjai]

Hey @underfisk , thanks for reporting the issue!

I took a stab at recreating your issue in this repo here. More specifically, here's a commit with all the changes that I had to do on top of a clean nx workspace (version 11.4.0)

---

You have outlined a few issues:

• environment variables aren't being loaded. In the repo i linked to, I managed to get env variables working in next.config.js. Make sure you have a .local.env or an .env file where you're actually setting the variables that you want to use. As per the Nx documentation. In my example, I can see PUSHER_CLIENT_KEY equal to somevaluehere in the log inside next.config.js

• the problem with images domains and Next.js image component. In the error that you're seeing locally - Error: Invalid src prop (https://mys3url.amazonaws.com/etcetc) ..., it says that the domain you're trying to use is mys3url.amazonaws.com.
  If i plug that as the value into the images.domains inside next.config.js - i'm no longer getting that error locally. So make sure the domain that your image is on definitely matches the domain you're using in your image's src prop

• regarding your latest comment about Next.js version 10.0.8 and pages-manifest - as you now know, we already tracking that in NextJs 10.0.8 Export Error #4973 , with a fix hopefully releasing soon 🤞

• The issue with the build in Vercel that you're seeing - Error: ENOENT: no such file or directory, lstat '/vercel/workpath0/dist/dist/apps/app/.next/routes-manifest.json'. We'd need steps to reproduce that one, if you can narrow it down. Having said that, I am hoping that the cause there is same as for the pages-manifest issue NextJs 10.0.8 Export Error #4973 . So maybe give that a try once it's released and report back if that's fixed this issue with the build on Vercel or not

---

Let us know how it goes!

[underfisk]

@kirjai Thanks for recreating the issue, so i'll answer to each point

• Environment in development may work using the .local env but using Vercel they wouldn't and that was still a problem
• I did use, that's the fun fact, i set all the domains and even tried using wildcard and somehow it was being ignored
• Yes i know, i also figured that you guys are probably using some release that has these bugs like 10.0.8 which i manage to have this issue working with a workaround with a lot of rollback versions
• In the previous point i mentioned i got a work around, so basically i rollbacked a lot of versions in order to get it working but its not ideal because i got 10x version of Nx in order to run the builds

[kirjai]

• Just tried adding the project from my repo to Vercel and running the build there. What I've done is I added the environment variable in the project settings on Vercel and it showed up as expected in the log inside next.config.json. Or is that not what you're looking to do?

---

• hm.. if you're confident that you've tried identical domains for the src prop and the images.domains value - i'm not quite sure what else to try. I can only seem to break it locally and get it to throw the error if i start messing with mys3url.amazon.com value in the images.domains. Like adding /etcetc to the end - that obviously doesn't work. I don't think there's much more we can do without having access to the real values you're using here to help you debug. Seems to me that next.config.js is loaded correctly. I assume you're restarting the server between all the different attempts when changing images.domains value?

I went a step further in my repo, and added a realistic image to confirm that everything works as expected. Here's a commit. Only this variation of values works. Adding https:// to the domain breaks it, adding any paths, like buttercms.com/static also breaks it. So i'd triple check that all you're listing is a domain, in images.domains.

Could the rewrites and next-i18next/rewrites be conflicting with resource urls there? I'm not familiar with that package, so can't say for sure. maybe worth trying commenting that out, as a last resort attempt?

---

• regarding the last two points - it's good that you have a temporary fix. but just thought it's worth mentioning that latest version of Nx (as well as 11.4.0) isn't guaranteed to work with Next other than 10.0.1 - that's the version we use internally. so, in theory, you shouldn't need to roll back Nx - you need to roll back Next to 10.0.1. Using older Nx (10.x) with latest Next (10.0.1+) is even less guaranteed to work, to be honest.

[underfisk]

@kirjai Yes the env vars are okay so locally i would have to setup .local.env or .env because most i use as arguments directly on the script command
I start to think that using multiple versions, somehow i had in cache some wrong build version of nx/next. that was introducing that bug, its a bit odd because when i rollbacked to 10x it started working all again (Nx versions)
I'm not sure if next-i18n rewrites are messing because its an empty object in there but anyway thanks for your time investigating this issue, its something that has kinda delayed me because all of a sudden when next 10.0.8 and Nx upgraded to 11.5.1 it all stopped working without any apparently reason

The issue was i had next as "next": "^10.0.7" and somehow if you say "^" its going to install the latest and it was creating some kind of conflict and so doing "next": "10.0.7" (using the exact version) it started to only installing that version (I'm using pnpm not yarn or npm)
Yes i do understand but i want to use the latest version so once its fixed (this shall be temporary) i'll resume back to the latest versions when next releases 10.0.9

[kirjai]

thanks for the update! so hopefully the upcoming version of Nx will solve all of these problems and allow you to use latest Nx and Next (10.0.9) together 🤞

[kirjai]

version 11.6.0 of Nx has been released, which bumps Next.js version to 10.0.9. Release. please give it a try and report back if the issue still persists

[cyrus-za]

I'm still on 11.5.2 but will upgrade soon.

I also ran into the image domain issue. My domains were perfectly set. In fact, it worked before migrating this same project (with exact same domains and same image urls in db) over to nx.

Removing the withNx magically fixes it (but obviously breaks a bunch of other stuff)

@kirjai there is definitely something in that webpack config breaking it

[cyrus-za]

@kirjai
I upgraded to 11.6.0 and ran migrations. This introduced the pages-manifest.json error for me on nx serve myapp

[kirjai]

@cyrus-za i'm afraid i'm going to need a repro to be able to look into it properly, as mentioned in my previous comment, i couldn't recreate the domains issue given the repro steps in the original post. Same for the pages-manifest.json, i'm afraid.

[cyrus-za]

@kirjai here's a repro: https://github.com/cyrus-za/nx-repro-4990-next-babel-issues

• make sure you have pnpm
• run pnpm i
• run pnpm nx build next-app (or if you got nx globally, no need to prepend pnpm)

> nx run next-app:build 
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Using external babel configuration from org/babel.config.json
info  - Using external babel configuration from org/apps/next-app/.babelrc
info  - Using external babel configuration from org/libs/ui/.babelrc
info  - Creating an optimized production build  
Failed to compile.

org/libs/ui/src/lib/Dropdown.tsx 68:49
Module parse failed: Unexpected token (68:49)
File was processed with these loaders:
 * ../../node_modules/.pnpm/next@10.1.3_19437c2f9b137c4ee9c416360487a7aa/node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
| }) => {
|   const [isOpen, setOpen] = useState(false);
>   const [key, selectKey] = useState(selectedKey ?? defaultKey);
|   const values = options.map(({
|     key,

> Build failed because of webpack errors
 ERROR  Command failed with exit code 1.

This is what I got when upgrading to 11.6.1

11.5.2 had the image issue discussed above.

[cyrus-za]

I can confirm that this is still broken in nx 12

[cyrus-za]

I noticed my package.json had "typescript": "~4.2.0",
So I upgraded to latest typescript and saw lockfile had 4.2.3 go to 4.2.4 including the ts used by the babel loader.

This appeared to be fixing it but a lot of other things also changed in the lockfile, so I tried to manually remove changes in the lockfile to pin it down to what caused it. Locally it was fixed by simply making the ts changes, but when I pushed it wasn't fixed yet. I removed my node modules and reinstalled, still worked locally without any git changes. So I killed the loclfile and the node_modules and did a force pnpm install and then got some new lockfile changes. I committed that and then the build in github actions worked, but not on vercel deployment and also not on master/main.

Something is very strange with how it gets decided when to install what, despite a frozen lockfile. I tried switching to npm, but same result.

[jaysoo]

We'll get this patched up, in the meantime you can update your lib's .babelrc to use next/babel to keep it consistent with your next.js app.

{
  "presets": ["next/babel"],
  "plugins": []
}

The @nrwl/web/babel preset currently has a bug when the application is coming from Next.js (and isServer === true) it will target the latest Node. The problem is that in Node 14+ optional chaining and nullish coalescing are supported, so they aren't transpiled, which causes problems in the build.

[cyrus-za]

@jaysoo the libs are used by more than just nextjs apps so not possible. I did see #5322 PR though so thanks for that. Any idea when it will be released?

[kirjai]

@cyrus-za this was released in 12.0.2 yesterday, but there are some problems with that release that we're in the process of fixing. so should be the next release after that

[cyrus-za]

I updated to 12.0.2 and still got the same error. I also tried switching the .babelrc file in the repro and it still fails as seen here: cyrus-za/nx-repro-4990-next-babel-issues#7

Please reopen the issue

[cyrus-za]

Also, for some reason nx migrate latest did not work. I had to manually update the deps after checking that the release contains no migration files. @kirjai is that wha you referred to when you said

but there are some problems with that release
Or what exactly is the issue you referring to and what could be causing the nx migrate to fail?

@jaysoo you said

The problem is that in Node 14+ optional chaining and nullish coalescing are supported, so they aren't transpiled, which causes problems in the build.

I am using node 14 in all my environments (local, github actions, vercel)

[jaysoo]

@cyrus-za I updated to Nx 12.0.3 and the app loads for me (including loading the config).

https://github.com/jaysoo/nx-repro-4990-next-babel-issues

Can you let me know if there's still an issue for you?

I am using node 14 in all my environments (local, github actions, vercel)

The problem wasn't with the runtime environment, it was webpack not understanding the syntax properly.

[kirjai]

yeah, upgrading to 12.0.3 resolves the issue (PR) in the provided repro. so whoever is experiencing please give that a try.

One thing to note, that you sometimes might need to clear node_modules/.cache. clearing dist helps sometimes as well, when it comes to Next.js

[cyrus-za]

Updating to 12.0.3 fixes the issue of not understanding ts 3.7+ syntax. After that got solveed, I can confirm that the domain image issue is also gone.

nx serve still had the issue despite clearning node_modules/.cache and dist but clearing node_modules as a whole and reinstalling fixed it. Nextjs caches in .next by default, but with @nrwl/next the next cache goes somewhere else (not sure where). @kirjai can you confirm which directory is used to store next cache? This will also help with making sure github actions cache that directory to improve CI build times

Thanks for all the hard work @kirjai and @jaysoo

[kirjai]

@cyrus-za I've answered your caching question in the other issue you opened

[github-actions]

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.