1

I'm not sure if this something I'm doing wrong, or that I missing something, But I've added in optional chaining ?. to some of the parts of my create react app. i.e 

  const customFieldName = customFields[0]?.customFieldName || "Custom Field";

This works on localhost in chrome on my mac, and also on the Xcode ios 13 iPad simulator in Safari but when I deploy the firebase app using 

react-scripts build && firebase deploy

The app crashes saying that customFieldName is undefined, which in some cases it will be as the array customFields will be empty/null, but I take care of that my falling back to the "Custom Field" String to be set as default.

So my question is why does the optional chaining ?. code work in local host and not in deployment? I have checked to see that browser in loading the lastest version, which it is.

I'm also aware that optional chaining ?. is a new feature therefore may not work on all browser and especially older versions.

I would appreciate any help.

I'm thinking it could be impossible to know in future if the code is actually working in production when it works in development/localhost.

Andrew Irwin
  • 691
  • 12
  • 40
  • could it be that the actual `customFields` array is undefined? If so, try `customFields?[0]?.customFieldName || "Custom Field"` – shamsup Jan 02 '20 at 14:53
  • The support of optional chaining is only in chrome@79, if you are supporting only in chrome it will be fine or else you need to wait for it even i tried it in my local it was getting error for me Chrome@79.0.3945.88. And this is your structure of data isn't customFields = [{customFields: 'john' }] – Learner Jan 02 '20 at 15:02
  • 1
    Is `customFieldName is undefined` the actual error text? If not, could you provide us the whole error? I see that you have both a property named `customFieldName` and a variable with that name, so the error could be referring to that variable for some reason. Also, have you ascertained that the error is occurring on that line? If not, please verify that. – JLRishe Jan 02 '20 at 15:03
  • Are you compiling/transpiling your code? What versions of the tool do you use? – Bergi Jan 02 '20 at 15:17
  • @shamsup Thank you for your comment, that fixed the problem for me, its now working on localhost and production. I added `customFields?.[0]?.customFieldName || "Custom Field"` it's now working in chrome (79) on the mac and in safari on the ipad simulator ios13. the original code I had was missing the `?.` before customFields in order to check if it was null or not. Im still confused though why did my original code not crash in localhost but did production ? – Andrew Irwin Jan 02 '20 at 15:24
  • @JLRishe `backend.js:6 TypeError: Cannot read property '0' of null` is the actual error that it's throwing, (I pretty sure its to referring the array being null) I thought it was a different error, but went back and changed the code to recreate the crash. the error was on the line of code that I mentioned in my question. – Andrew Irwin Jan 02 '20 at 15:29
  • @Bergi I'm justing using the standard/vanilla version of create-react-app with javascript so I think its using babel behind the scenes to transpile my code. `"react": "^16.12.0",` `"react-scripts": "3.3.0",` Can you tell me why my original code worked on localhost but not in production ? – Andrew Irwin Jan 02 '20 at 15:33
  • Would I be right then to still stay away from optional chaining `?.` for a while, until it more supported? – Andrew Irwin Jan 02 '20 at 15:35
  • @AndrewIrwin it's likely that your local environment had data forcing the array being present, but the actual production data was missing that array. – shamsup Jan 02 '20 at 15:52
  • 1
    in regards to using optional chaining, babel supports it, and it has been supported in create-react-app since v3.3.0 so you should have no issues including it in your codebase as long as you are using CRA>=3.3.0 or have a proper babel configuration. – shamsup Jan 02 '20 at 15:55
  • Ok great thanks, yes Im using CRA v.3.3.0 – Andrew Irwin Jan 02 '20 at 16:10

1 Answers1

2

It appears that your value that is expected to be the actual array is actually null or undefined. To prevent the error there are two courses of action you can take:

  1. ensure the array is never null or undefined (via default arguments or other means)
  2. use optional chaining syntax on the array itself: 
const customFieldName = customFields?.[0]?.customFieldName || "Custom Field";
//                                  ^ optional chaining added here

Regarding browser support, as long as you are using a proper babel configuration for the feature, or in your case create-react-app >=3.3.0, you should have no issues with browser support. Babel will just transpile the new syntax to valid, cross-browser code, like this:

var _customFields, _customFields$;

var customFieldName = ((_customFields = customFields) === null || _customFields === void 0 ? void 0 : (_customFields$ = _customFields[0]) === null || _customFields$ === void 0 ? void 0 : _customFields$.customFieldName) || "Custom Field";
shamsup
  • 1,952
  • 14
  • 18
  • Thank you for your answer. I'm just curious which couse would take in this case. it looks like a "prevention is better then cure" scenario – Andrew Irwin Jan 02 '20 at 16:16
  • 1
    I would go for the prevention scenario. This is a constant battle in javascript in general, so I'd go for guaranteeing the value exists in every scenario. Preventing type errors like this is a main reason why static typing (eg typescript) exists. That being said, it is perfectly valid and encouraged to write code that properly handles unexpected values, especially when dealing with dynamic data like data from an API or user input. – shamsup Jan 02 '20 at 16:55