I see nextjs does support Optional Chaining here however, I've been trying to deploy this piece of code
module.exports = {
experimental: {
outputStandalone: true,
},
images: {
domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS?.split(",")
?.filter((d) => d.trim())
?.map((d) => d.trim()),
},
reactStrictMode: false,
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: [
"@svgr/webpack",
{
loader: "svg-url-loader",
options: {},
},
],
});
return config;
},
};
but it fails on vercel with error
> Build error occurred
/vercel/path0/next.config.js:6
domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS?.split(",")
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:195:29)
at ModuleJob.run (internal/modules/esm/module_job.js:145:37)
at async Loader.import (internal/modules/esm/loader.js:182:24)
at async Object.loadConfig [as default] (/vercel/path0/node_modules/next/dist/server/config.js:448:36)
at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:75:20)
error Command failed with exit code 1.
Any ideas why?
The issue was the wrong node version (12) was being used to build the app.
The problem is that you are assuming that process.env is a standard javascript object.
But, process.env is not a standard javascript object. Next js replaces process.env.* with the corresponding value at the build time. So, you can't destructure it like a javascript object or use properties like split on it.
Refer to Next js documentation, particularly this section.