Eslint-plugin-import: Why I am getting error no-named-as-default

[sqal]

Hi. I have some issue with the plugin and here's what is happening:

app/index.js

import Vue from 'vue';
import App from 'components/App' // <-- Error: import/no-named-as-default Parse errors in imported module 'components/App': Unexpected token < (1:1)at line 4 col 17 in src\app\index.js
...

components/App is .vue file, which looks like below:

<template>
  <div></div>
</template>

<script>
  export default {
    name: 'App',
  };
</script>

But when I import some default export from .js file there is no error like that, so this bug(?) seems to be related to files with .vue extension. Any idea how i can fix this? Thanks.

My config:

package.json

{
  ...
  "eslint": "^3.0.1",
  "eslint-config-airbnb-base": "^4.0.0",
  "eslint-import-resolver-webpack": "^0.3.2",
  "eslint-plugin-html": "^1.5.1",
  "eslint-plugin-import": "^1.9.2",
}

.eslintrc

{
  "extends": "airbnb-base",
  "plugins": [
    "html",
    "import"
  ],
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack/webpack.config.base.js"
      }
    }
  },
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  }
}

[benmosher]

Looks like you need jsx:true in your parserOptions:

Sorry, did not fully digest your post. You should specify import/extensions to avoid parsing .vue files:

  "settings": {
    "import/extensions": [".js"],
    "import/resolver": {
      "webpack": {
        "config": "webpack/webpack.config.base.js"
      }
    }
  },

This will be the default in v2+.

[sqal]

@benmosher

Hmm that doesn't seem to fix the issue, because now i have other error:

import/no-named-as-default Parse errors in imported module 'components/App': Adjacent JSX elements must be wrapped in an enclosing tag (11:1)at line 4 col 17 in src\app\index.js

[benmosher]

Yep, sorry, I jumped the gun on my initial response. Try the updated edit with import/extensions.

[sqal]

Now we are back to the original error :/

[benmosher]

Strange. Can you provide the relative paths of the source, components/App, and your .eslintrc?

[benmosher]

Would be helpful if you can confirm what import plugin version you have installed, too: npm ls | grep import

[sqal]

@benmosher https://github.com/sqal/eslint-import-bugs If you would take a look at this, i would very much appreciate it

btw. i checked verions of installed eslint plugins, and all matches with versions in package.json

[benmosher]

It's worth noting that the Webpack resolver technically doesn't support Webpack 2 (yet: #265), though that doesn't seem to be the issue.

[sqal]

Yeah, i checked with webpack 1.x and errors are the same unfortunately

[sqal]

I think this can be closed now since I no longer have any errors after updating all dependencies to the latest version :)

[guidobouman]

@sqal How did you get it to check the imports on vue files?

[sqal]

@guidobouman

Here's my eslint config:

---
root: true
parser: babel-eslint
extends: airbnb-base
env:
  browser: true
plugins:
  - html
  - flowtype
parserOptions:
  ecmaFeatures:
    experimentalObjectRestSpread: true
rules:
  import/no-extraneous-dependencies:
    - error
    - devDependencies: true
  import/extensions:
    - error
    - always
    - js: never
      vue: never
  flowtype/define-flow-type: 1
  flowtype/use-flow-type: 1
settings:
  import/resolver:
    webpack:
      config: config/webpack.config.base.js

[guidobouman]

OMG! It works! Had to use the base config instead of the dev one, that one failed apparently.

[guidobouman]

Thanks @sqal !