CODEWITHSUNDEEP
reactjsecmascript-6eslintlint
LeBlaireau
LeBlaireau

Reputation: 17467

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

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"
  }
}

Upvotes: 4

Views: 10830

Answers (2)

j33n
j33n

Reputation: 59

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 .

Upvotes: 1

Joshua Underwood
Joshua Underwood

Reputation: 927

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

Upvotes: 0

Related Questions