React Linting, Missing file extension for "react" (import/extensions)

user_1002758 0
Viewed 7786

I am using the Airbnb lint settings for my react app

and the line

import React from 'react';

Gives the error

Missing file extension for "react" (import/extensions)

Any idea how to fix this?

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.17.1",
    "firebase": "^4.6.2",
    "jquery": "^3.2.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "sass": "sass --watch src/styles/scss:src/styles/css",
    "sass:build": "sass src/styles/scss:src/styles/css"
  },
  "devDependencies": {
    "eslint": "^4.12.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.5.1"
  }
}
eslint reactjs ecmascript-6 lint
2 Answers

In the rules object of your .eslintrc set "import/extensions" to never or 0 to avoid this.

user_53178600

You should check if you have eslint-plugin-import installed, Airbnb style guide configuration uses it to handle linting of imports and exports. If you don't have it, it results in the error Unable to resolve path to module '_module-name_' and/or Missing file extension for "_module-name_" (import/extensions).

Also since you have it installed in dev-dependencies, you can run something like ./node_modules/.bin/eslint . or setup eslint globally to just run eslint .

user_64858130
Related