Eslint-plugin-react: JSX not allowed in files with extension '' (react/jsx-filename-extension)

[tconroy]

Hey there -
For some unknown reason, I'm getting the following error on a .jsx component file:

JSX not allowed in files with extension '' (react/jsx-filename-extension)

The plugin seems to believe my file has no extension('')? Not exactly sure what could be the cause of this.

Running Sublime Text 3 + eslintner package, here's my eslint config:

{
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended",
    "prettier",
    "prettier/react",
    "prettier/flowtype"
  ],
  "parser": "babel-eslint",
  "plugins": [
    "flowtype",
    "react",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

[ljharb]

What happens on the command line? Editors often have linter bugs that are in fact a bug in the editor, so it's important to eliminate that variable from the equation.

[tconroy]

Hey @ljharb, thanks so much for the speedy reply. :)

CLI exits cleanly, however I do see some warnings thrown from eslint when running with --debug:

can't resolve reference #/definitions/basicConfig from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #

however, based on your input from this thread, it seems like these particular warnings aren't a problem.

Here's the output from the Sublime Text console while running the linter internally:

1 problem
can't resolve reference #/definitions/basicConfig from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id # 
{'add_blank_line_after_doc_string': True, 'dict_colon': ': ', 'add_blank_lines_around_comments': True, 'syntaxes': 'python', 'parenthesize_tuple_display': True, 'assignment': ' = ', 'boilerplate': '', 'wrap_doc_strings': False, 'normalize_doc_strings': False, 'max_seps_func_ref': 5, 'max_seps_func_def': 3, 'comment_prefix': '# ', 'blank_line': '', 'keep_blank_lines': True, 'subscript_sep': '=', 'leftjust_comments': False, 'max_lines_before_split_lit': 2, 'shebang': '#!/usr/bin/env python', 'can_split_strings': False, 'keep_unassigned_constants': False, 'max_char': 80, 'max_seps_dict': 3, 'java_style_list_dedent': False, 'slice_colon': ':', 'single_quoted_strings': False, 'indent_with_tabs': True, 'indent_size': 1, 'format_on_save': False, 'doc_tab_replacement': '....', 'list_sep': ', ', 'max_seps_series': 5, 'left_margin': '', 'function_param_assignment': '=', 'leftjust_doc_strings': False, 'wrap_comments': False, 'double_quoted_strings': False, 'function_param_sep': ', '}
SublimeLinter: flow attempting to run from: ['/Users/Tom/Code/rentjoy/node_modules/.bin/flow', 'check-contents', '@', '--show-all-errors', '--json'] 
SublimeLinter: found flow pragma! 
SublimeLinter: flow: index.jsx ['/Users/Tom/Code/rentjoy/node_modules/.bin/flow', 'check-contents', '@', '--show-all-errors', '--json'] 
SublimeLinter: flow output:
[{"flowVersion":"0.52.0","errors":[],"passed":true},{}] 
SublimeLinter: flow 0 errors. passed: True 
SublimeLinter: eslint: index.jsx ['/Users/Tom/Code/rentjoy/node_modules/.bin/eslint', '--format', 'compact', '--stdin', '--stdin-filename', '@', '--stdin-filename', '@'] 
SublimeLinter: eslint output:
/Users/Tom/Code/rentjoy/src/views/pages/@: line 7, col 3, Error - JSX not allowed in files with extension '' (react/jsx-filename-extension)

[ljharb]

Seems from the stack trace that the linter is passing the filename to stdin code, and that might have a bug.

Can you reproduce the failure on the command line from stdin?

[tconroy]

Turns out it was an extension config error in my editor. No problem with eslint or the plugin. Apologies!

[drew-wallace]

@tconroy I'm having the same issue. What did you do to fix it?

[Ogala]

@drew-wallace There's is a good fix on Stackoverflow
https://stackoverflow.com/questions/43031126/jsx-not-allowed-in-files-with-extension-js-with-eslint-config-airbnb