Javascript import handle undefined

Question

Is it possible to catch typos like in switch case example statement below?

Preferred way would be that eslinter report an warning/error. Currently adding toString() to const can be used to raise an TypeError in runtime if undefined.

actionTypes.js

export const UPDATE_REQUEST = 'UPDATE_REQUEST';

reducer.js

import * as types from '../constants/actionTypes';

export default function pouchdbReducer(state = {}, action) {
  switch (action.type) {
    case types.UPDDATE_REQUEST:
      // there is a typo above and it evaluates to `undefined`
      // this code would never be reached - how to make it an error
      return Object.assign({}, state, {updated: true});
    default:
      return state;
  }
}

UPDATE:

As @nikc.org answered eslint-plugin-import with namespace option can be used for linting such bugs.

Here is small repository with configuration and demo:

https://github.com/bmihelac/test-js-import-undefined/tree/eslint-plugin-import

Relevant part of eslint config is:

"plugins": ["import"],
"rules": {
  "import/namespace": [2],

Well, the problem with trying to catch errors like that is they're not necessarily errors. There's nothing *wrong* about the code, in other words, given the rules of JavaScript. — Pointy, Nov 19 '15 at 16:55
@Pointy as es6 modules are static I am hoping that some statical analyzer can find typos like this. — bmihelac, Nov 19 '15 at 17:05
Right, it's probably the case that clever static analysis would at least notice the absence of the misspelled constant. — Pointy, Nov 19 '15 at 17:12

score 1 · Answer 1 · answered Nov 25 '15 at 01:23

1

Disclaimer, I'm the autor of tern-lint.

I suggest you that you use tern-lint which is able to report errors like "Unknown property".

You can use this linter with command or with an editor which supports it (Emacs, Atom, CodeMirror or Eclipse). Here a screenshot with Eclipse tern.java

answered Nov 25 '15 at 01:23

Angelo

2,027
13
17

tern-lint looks promising, but eslint-plugin-import seems simpler to use – bmihelac Nov 25 '15 at 12:02
@bmihelac could you tell me what is difficult with tern-lint please. Using tern-lint with command is not commons, so please tell me suggestions to improve it, thanks! – Angelo Nov 25 '15 at 12:50
well as I already use eslint, setting up eslint-plugin-import was very easy. I do also use tern but unfortunately there is no out-of-box support for vim editor for tern-lint (that is why I said it was easier to setup eslint-plugin-import). Also I found that tern can have slow response and timeouts for bigger projects which would for sure improve over time (guess that could be expected from tern-lint too). – bmihelac Nov 25 '15 at 13:13

nikc.org · Answer 2 · 2015-11-24T06:00:30.657

0

The eslint-plugin-import plugin for ESLint performs static analysis on imports and exports and can be configured to raise errors or warnings on different criteria, including the case in your question where you misspelled the reference to an imported symbol.

To eliminate the problem entirely, you could have a glance at Tern which gives you code insight and code completion in several editors avoiding misspellings altogether.

edited Nov 24 '15 at 06:00

answered Nov 23 '15 at 14:58

nikc.org

16,462
6
50
83

1

@aschipfl How does it not provide an answer? I could pad the answer with prosaic fluff to pad it out, if you merely find it too short, but it would add no value. The question was "Can you use static analysis to find invalid references to imported symbols?". My answer is: "Yes you can, here is a tool that does just that." How is that not an answer? – nikc.org Nov 24 '15 at 05:53
@nikc.org - "namespace" is the option of eslint-plugin-import that I was looking for. – bmihelac Nov 25 '15 at 11:54

score 0 · Answer 3 · answered Nov 25 '15 at 05:31

I suppose depending on the number of actions types (and if you are willing to break them up) you could slightly change how you import them.

Maybe something like:

import {TYPE_ONE, TYPE_TWO} from '../constants/firstActionTypes';
import {TYPE_THREE} from '../constants/secondActionTypes';

export default function pouchdbReducer(state = {}, action) {
  switch (action.type) {
    case TTYPE_ONE:
      // Linting should identify this easily now
      return Object.assign({}, state, {updated: true});
    default:
      return state;
  }
}

Typical linters can pick that up quite easily and a side benefit is that you can break up your actions in to their concerns.

Javascript import handle undefined

3 Answers3