Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Eslint errorring importing jsx without extension

Tags:

I am trying, in es6, to import jsx files without requiring the .jsx extension:

import LoginErrorDialog from './LoginErrorDialogView';

Not:

import LoginErrorDialog from './LoginErrorDialogView.jsx';

While I have got webpack to import in this fashion successfully:

export default {
  entry: './src/ui/js/app.js',
  output: {
    publicPath: '/',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx'],

Eslint (esw webpack.config.* ./ --color --ext .js --ext .jsx) is still errorring.

Unable to resolve path to module './LoginView' import/no-unresolved

Any ideas?

like image 230
gazzwi86 Avatar asked Feb 16 '17 02:02

gazzwi86


1 Answers

I had the same issue here, and I fixed adding extra configuration in my .eslintrc.

In the extends property add:

"plugin:import/react"

In the settings property add:

"import/resolver": {
  "node": {
    "extensions": [".js",".jsx"]
   }
}

Your .eslintrc will look like:

{
    "extends": [
        ...
        "plugin:import/react",
        ...
    ],
   ...
    "settings": {
        "import/resolver": {
          "node": {
            "extensions": [".js",".jsx"]
          }
        }
    },
...
}
like image 129
Carlos Avatar answered Oct 13 '22 22:10

Carlos