Doesn't nextjs in vercel support Optional Chaining?

Question

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?

E_K · Accepted Answer · 2022-05-13 06:48:18Z

3

The issue was the wrong node version (12) was being used to build the app.

answered May 13, 2022 at 6:48

E_K

2,24929 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit · Accepted Answer · 2022-05-13 01:54:12Z

0

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.

answered May 13, 2022 at 1:54

Amit

1,1832 gold badges11 silver badges25 bronze badges

4 Comments

E_K Over a year ago

I think I'm doing exactly what the article says Environment variables must be referenced as e.g. process.env.PUBLISHABLE_KEY, or am I missing something?

Amit Over a year ago

Yes. Actually, I tried it as well and it's working fine for me.

Amit Over a year ago

You may have missed to add the environment variable on vercel.

E_K Over a year ago

I have it but even if it's not there that's why. I'm adding the Optional Chaining

Collectives™ on Stack Overflow

Doesn't nextjs in vercel support Optional Chaining?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related