Glitch not recognizing null propagation operator?

Glitch Help
1

I’m getting an error when trying to use the null propagation operator (e.g. photo: profile.photos[0]?.value || '', inside of an object definition getting SyntaxError: Unexpected token . Is this an issue specifically with glitch, or am I doing something wrong?

2

I think that might still need a babel plugin to make it work in JavaScript (but my knowledge might be outdated?) If you have babel set up already, Google suggests this might be the one! https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

1 Like
3

Null propagation is a new language feature that isn’t supported yet in browsers or in our version of node- you’ll need to use a transpiler like Babel to be able to write that syntax for the foreseeable future.

4

@potch
Sorry for my ignorance, but I’m still new to node. So in my package.json file I put in the following dependencies:

"babel": "^6.23.0",
    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
    "babel-core": "^6.26.3"

then in the js file I’m trying to implement it, I have

require("babel-core").transform("code", {
  plugins: ["transform-optional-chaining"]
});

this was the implementation suggested on the site you linked to @househaunt but it doesn’t seem to be working.

5

Hi TaraBryn! If you’re already using a transpiler like Babel, then you might be asking about how to get rid of the linting errors?

Glitch uses ESLint for linting JavaScript, and some of ESLint’s behavior on Glitch can be customized by putting a .eslintrc.json file at the root of your project.

A sufficiently drastic .eslintrc.json will turn ESLint off entirely, which might be what you would like to do. See for example: https://glitch.com/edit/#!/fourth-captain?path=README.md:1:31

However, since optional chaining is new syntax that would require a new parser, and since Glitch does not support plugging new parsers into ESLint via the .eslintrc.json configuration file, there there isn’t a way to run the linter on optional-chaining syntax.

(Aside: plugging new parsers into ESLint via the .eslintrc.json configuration file might never be available, since it would likely be a security vulnerability.)

Hope this helps,

Johnicholas

6

I always struggle with babel configs – I’ll take a look and see if I can get it running!

7

@TaraBryn Hmmm… do you have a .babelrc set up?

8

@househaunt, no, not sure what that is.

@Johnicholas I put in the .eslinkrc.json file, still getting the same error

here’s a link to my glitch

When I remixed the example you gave me, it shows no errors, even without babel…

9

I’m sorry TaraBryn I do not mean to be confusing.

My comment was about controlling LINTING - the red circle and/or red squiggle - on Glitch.

Are you primarily interested in trying to use the null propagation operator, either because it’s a challenge or because you’re interested in learning about it? Or are you primarily trying to complete this, and the null propagation operator is only a means to that end?

You do not have to use the null propagation operator to complete that step of that challenge, if that isn’t actually your goal, for example an example solution linked on that page doesn’t use the null propagation operator.

Hope this helps,

Johnicholas

10

@Johnicholas so I was able to pass the challange by making sure the assertions for it were passing, but when I tried to actually log in with github to test to see if it was working, I was getting an error, which I tracked down to find that email: profile.email[0] was null in the github passport strategy so email: profile.email[0].value || 'no public email', was throwing an error b/c I was trying to call .value on a null value. There are other ways to do it, such as using ? as the ternary operator (which I’m not even sure will work without first implementing ES6 on glitch, but either way, it’s more concise to use the null propation operator, so I’ve made it a personal challenge to get that feature working.

Either way, when i remixed the example project I got no squiggly line using null propogation in the .js file, but in the project I’m trying to implement it in, it’s still showing the squiggly line, even after adding the .eslintrc.json file. I’m looking to do both…both get rid of the squiggly lines, and to make the functionality work.

Also, after I got the assertions to pass, I moved the functionality from server.js to auth.js (I tested logging in with both)…the assertions for the challenfge require it to be in server.js but I think it makes more sense to have it in auth.js as the challenge prior to the three social login challenges had us actually create those extra modules.

11

OK!

I remixed ~tarabryn-advanced-node-and-express and I was not able to get the behavior you describe - That is, it didn’t seem to me that linting was still occurring after linting was turned off with a sufficently drastic .eslintrc.json file - this is my remix: https://glitch.com/edit/#!/plastic-vertebra?path=auth.js:28:6

I don’t think I can help with how to compile null propagation operator code for node - something like this? https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining - it’s a bit beyond my abilities with Babel.

Hope this helps,

Johnicholas

1 Like
12

@Johnicholas Oh! I see, so linting is just for display purposes? I was still getting the syntax error, so I thought it wasn’t working, but yeah, it looks like the squiggly is gone, but the syntax error is still there. That makes more sense. Thanks though.

1 Like